We should probably have a proper test image eventually, so that
we can use e.g. image dimensions to double-check the results, but
this way at least our tests won't get broken by unrelated changes
in other repos.
Change-Id: Iffffd94fde99c53da59217a5181ad0560fce314c
- rearrange DOM structure of above-fold part of the metadata panel:
- rename .mw-mmv-controls to .mw-mmv-above-fold
- the above-fold part is a single positioned div now, with height
explitcitly set
- less LESS gymnastics, above-fold height is a single variable
- add paddings to the p elements instead of the containers
- make all title elements align to baseline (except the logo which
would look horrible)
- discard some CSS which was superfluous
- overspecified sizes/positions
- some top/bottoms for staticly positioned elements
- get rid of the .mw-mmv-drag-affordance div, since a full-width bar
wouldn't really make sense on the bottom of the above-fold section
- flip the chevron and place it to the bottom of the above-fold part;
add colors etc. per spec
- fix stripe button horizontal spacing
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/706
Change-Id: Ic37b4150288055c3fae8d22919ed7b1249db1f09
Several people complained that "Learn more on Wikimedia Commons"
is not clear: it can be interpreted as a link to the Commons
main page, the text does not suggest that the link will be related
to this specific file. The new wording tries to address this.
Change-Id: Ia605cc30c4ca57598f7cebdde60061800a10b6e7
Instead of setting the parent's height as max height of the
<img> element, find the first parent which has a non-automatic
height (that would be .mw-mmv-image-wrapper).
With the old structure, the height of the parent element could
be determined by the height of the image, which would then be
written back into the max-height of the image, messing up the
aspect ratio. I did not see this in the wild, but it was easy
to reproduce by changing the timing of the resize handler (in
particular, I tried to call the resize handler before loading
the new resolution, to make the UI more responsive, and ran
into this problem). This cannot happen anymore now.
This also fix a bug on some browsers (IE 10, maybe iOS Safari)
where the size of the image could be slightly larger than the
available space, and the bottom of the image was obscured by
the metadata panel. I am still not sure how exactly that
happened, but it was related to the <img> parents with automatic
heights having incorrect height. After making sure the <img>
has a max-height derived from an element with non-automatic
height, I cannot reproduce the bug on IE 10 anymore.
Change-Id: I193aefc42e6d6072717643659a9e4c0c8b7c7e93
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/698
Bug: 66244
This includes images where the <img> element has that class
(achievable with [[File:Foo.png|class=noviewer]]) and also those
where some parent element has it.
Change-Id: I666be026828ea9ecb6e8c93d3f5ad1e3c190f81e
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/511
Previously 'up' brought the panel up, and 'down' brought it down,
which might conflict with expectations on scrolling. Up/down keys
now move the metadata panel to the opposite state, no matter what
the current state was.
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/697
Change-Id: I53079d81042afb86354bf44e9dfd662adf1576cb
The jQuery update broke onDomEvent('focus') in OOjs UI. This is a
workaround which fixes the issue by binding on the input/textarea
elements directly, instead of their parents.
This introduces the annoying side effect that the metadata panel jumps
a bit when the embed HTML text is selected. (Just for that one, yes.
Weird.) Still better for now than no selection at all.
Change-Id: Ifa4c0600d7b4c0c64487596cbcabd5b4f4a12a19
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/638
http://foo.com/bar was making a request to some random server
responding with HTTP 500 Internal Server Error.
Change-Id: I17f2e0908b849455db5ab1790b15c2344337c24b
Has issues:
- needs dependency injection
- needs to be DRY
- should not load mw.eventLogging when we are not in sample
Due to urgency this will be fixed in another commit.
Change-Id: I0df067a619109a7c945f82c8d33fa2e621217f0b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/619
Per the design meeting, we are abandoning this feature for now - there is not enough time to ensure it is of acceptable quality.
This reverts commit 4329d453ec.
Change-Id: I27c113ffecb617d442557163722ea5181ed0b2f4
jQuery 1.9 changes how $.focus() calls are handled: instead of
directly calling the handlers, it just invokes the DOM element's
focus(), and leaves it to the browser's event handling to trigger
them. This can fail for several reasons (e.g. element is not
attached to document, element is already focused, browser bugs such
as http://bugs.jquery.com/ticket/13363 ), so we are using
triggerHandler('focus') instead, which calls the handlers directly
without simulating actual browser events. Since these are unit
tests verifying event handler attach/unattach behavior, not
acceptance tests verifying actual event handling behavior, that
should be okay.
Change-Id: I65ecda28ace4f380ad33d6212e12069e18001232
Just a link to the full-size file for now.
Since the link must be to a PNG/JPEG/GIF (so possibly a thumbnail),
and we want to cap the size, we might need to get the URL from the
API, but we need to open the new window right away to avoid popup
blockers, making this patch quite complicated.
Change-Id: I9ce9d2a2d27b75470eae2806d9f9ce2f95f4dac2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/588
- Fix JS error on pushState
- Fix blur issue where blur(0px) filter would blur anyway
- Fix wrapper sizing issue where its size would be 0 when measured
Bug: 65225
Change-Id: If9279cd56f55f71f261ec54dda8228194988b9ae
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/597
Do not log metadata-open when panel is already fully open and the
user presses the open key. (Same with close).
Also a completely unrelated code simplification.
Change-Id: I1f26b8669aa496d68b61d9a432430bf0864e8533
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/559
This tries to fix a number of related issues:
* the blurred thumbnail was visible for a split-second sometimes
when switching back to an already-loaded image. (Presumably when
JS was sluggish enough to take more than 10 ms to execute.) We
now check whether the promise is pending before showing a placeholder.
(More generally, a lot of unnecessary logic was executed when paging
through already loaded images, like displaying the placeholder, so
this might make the UI a bit more responsive.)
* the blur could get stuck sometimes - I have seen this a few times,
but have never been able to reproduce it, so I'm only guessing, but
maybe the timing was really unfortunate, and we switched back less
than 10 ms before loading finished. We now remove the blur on every
branch, just to be sure.
* adding a progress handler to a promise might not have any immediate
effect, so when switching to an image which was loading, the progress
bar reacted too late. We now store the progress state per thumbnail
so it is always available immediately.
* the progress would animate from 0 to its actual state whenever we
navigated to the image. The change on paging is now instant; the
progress bar only animates when we are looking at it.
* switching quickly back and forthe between a loaded and a loading
image resulted in the loading image becoming unblurred. This seems
fixed now, I'm not sure why. Maybe the "skip on non-pending promise"
logic affects it somehow.
Also removes some unused things / renames some things which were
confusing, and makes an unrelated fix in the image provider, which kept
amassing fail handlers.
Change-Id: I580becff246f197ec1bc65e82acd422620e35578
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
Solves the bug, and makes the code slightly cleaner, but it
still does not inspire confidence (e.g. use of viewer flags
by a bunch of callbacks that can run for a background image).
Also, the tests seem underspecified.
I'll follow up with some more refactoring.
Change-Id: I2557abcec173691ffce21185bf1a939f1644ba8c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/489
It's important that when we generate the graphs based on
EventLogging data, we have a foolproof way to filter out
local runs that happened during development.
Change-Id: Ifc65d3b4bfb96946a8e8d59d080a6c5ee6552533
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/509
* Remove login since it's not longer needed
* Point to a new smaller test page instead of Lightbox_demo
which should make the tests run much faster
* Tweak selenium scroll workaround which seems to be speed-dependant
Change-Id: I247ae6a5044ecc93b6f3839f1b9ed955b488b5a7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/475
Cache API responses, both on Varnish and in the user's browser.
The imageinfo request is not cached, since that would make it very
hard to test metadata template edits. Everything else is cached for
one day.
Change-Id: I9149cf40d4448a424073eefd1eb442c70c977687
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/435
Not convinced this is a good thing (file description page still
opens in same window so it is somewhat inconsistent) but suddenly
leaving the lightbox to show the deed feels like a very unintuitive
behavior to me.
Change-Id: I2cca3e4241fd1bb2848c11cf425aa75aad8c4a30
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/472
Works, but awkward - the extension name changes a little later than the button
text itself. This is hard to avoid since we don't know beforehand
what the thumbnail type is - we have to wait for the API request.
(We can't do thumbnail URL guessing here since we cannot catch the 404 error.)
In general the whole API handling here is not so good, with a separate API
request going out when we should just get all size options in a single request,
when the user opens the reuse panel.
Change-Id: I502b7cb4e99d8af348d7d1967eb8343ec0f926fe
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/471
...since there probably still is one, and our failure to parse it
just makes it more important that we direct the user to the file
page.
Change-Id: Id31f95021f059ccf4bf9893b1146f3807dcabdcb
- Runs combinations of cold/warm browser cache and average/large window size
- Sends events with EventLogging that will allow us to generate limn graphs
This should run separately from the other cucumber test we already
have. This one needs different environment variables because it needs
to run against production wikis instead of beta wikipedia
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/378
Change-Id: I53b521ca2759c493aae6fe6e59be8d448e0f15d7
Given a sample thumbnail URL and the original width/height
this provider tries to guess the thumbnail url for a given
size.
Change-Id: I2966b60978ab763864475851d8a79370bd422dc4
* deduplicates URL generating/parsing code
* gets rid of spaces in URLs
* fixes error for file names with / in them (in case they exist;
current MediaWiki seems to disallow such names anyway)
Change-Id: I5aad43f6af1b99523c597c39befcc9db1ecab83a
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/371
Adds a Route class hierarchy for various URL schemes and a Router
class to convert Route classes to and from URLs.
Right now we only have two(-ish) schemes, but in the future we want
to be able to show related images which are not present on the current
page and need shareable URLs for those as well; also we might want
to specify other things in the URL than the current image (the reuse
box being open was one thing discussed); this will be a good framework
to add features like that.
The MainFileRoute class will be used by #416.
Change-Id: I489126a0ada37f91a22a2f48a4e686140a28d162
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/371
The scrolling logic has broken specifically when navigating with the
back button (as opposed to pressing the "close" button). This change
aims to test that scenario.
Change-Id: Ibe31b319c882b7de2a84ae143652144093c50f1c
It turns out that cucumber/selenium will automatically scroll
to the element you want it to click on. As a result we have to do
the same in order for the assertion to be correct when coming back to
the article.
Change-Id: I7d3b6609cfe7cdae9c08a6d723d652ad1a6a7055
There used to be a CSS trick with the order we added things to the
page and removed them from it, but it doesn't seem possible anymore
with the new order of execution, with the overlay appearing
immediately and being taken care of inside bootstrap.
The main cause of the bug, however, was the hash reset happening
after the interface was closed.
Doing the scroll restore with jQuery.scrollTo is more future-proof
and testable in QUnit.
Additions were also made to the cucumber E2E test because QUnit
alone wouldn't have caught the hash issue.
This also cleans up custom events a little and reintroduces
pushState on browsers that support the history API.
Change-Id: I63187383b632a2e8793f05380c18db2713856865
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/439
Bug: 63892
The CSS to make the favico twice as big was looking horrible in
Firefox and possibly other browsers. Since we're already
special-casing commons, let's apply a proper SVG instead of the
favico.
Change-Id: Ie32302342eba7aa37bd310c013a9f4d7f9ae187e
Also fixes other issues:
- Some code in mmv.lightboxinterface.js wasn't doing anything
- Canvas buttons were being added to the wrong element
- Several CSS rules were being declared twice, a remnant of the multilightbox days
Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409
The way categories were handled made it impossible to add anything
after them (they always ended up as the last child of the parent
container). This commit fixes that, and also moves the repo link
behind them (as required by #270).
Change-Id: I7c561c43897054e60028bd524d8ad5ea85f39e36
Only show the survey button if the user's language matches and the site is
enabled, and log which site we are on.
The corresponding site configuration commit is
Ic07432649906890785769ce5127761e2c84316e2
Change-Id: I575bb286f4289489b80505c901f5a9e7aeecec8b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/261
* intializeSelection was removed
* selectItem is replaced by chooseItem, sort of
(selectItem does not always update the UI, I think?)
* remove old workaround, bug was fixed upstream
This fixes the download button and unbreaks lots of unittests.
It does not fix the "Loading" text in the embed tab.
Change-Id: Iec7bf9ad5b516001231c7ba46fda962671aaddd8
- error caused by select() called during focus event
- HTMLElement not existing in older IEs
- filter rotation for older IEs causing black background bug in IE9
- IE9 lacking progress would have its progress bar never reach 100% and disappear
- Handle e.which value for clicks on IE < 9
Change-Id: I5727ef3f2a9f9aa77eac930f93320e6ce5964c78
Also make sure that the reuse dialog is positioned right, no
matter where its button is.
Also fixes some minor documentation problem with mw.mmv.ui.canvas
which I noticed in the process.
Change-Id: I86feed07738ebef012e63861ed909f3449b85a53
Also do a bunch of refactoring to:
* keep LESS rules in more sane locations so it is not as hard to get an overview
(most of the metadata panel rules were in mmv.less)
* move mmv.mixins.less up one directory as it is not specific to the UI
* move the SVG icons as all of them were related to the UI
* remove the marging-right hack which was used to keep the title text from
overflowing the button; instead use a float and overflow properties to make
sure text that is too long gets hidden
Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e
I think this takes care of all the different mutations of
weird states that happen when going from a small to large
images and transitions in the middle, see card/386.
Change-Id: I80527d746614c0bbda7a1084061d292e5d6394a8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/386
* Following design, use split button to display a pulldown
menu with possible image sizes. The download happens by
sending the special "download" parameter to the server.
* Offer link to preview image in the browser.
Change-Id: Ic9d895fead04c9128186c7376a0bb09f3596335c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/79
With apologies to anyone who gets a hundred merge conflicts
because of this :)
We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-,
mw-mmv-mmv-, a few unprefixed), which was getting annoying,
and will be confusing to wiki editors who are trying to figure out
where a given style comes from. Such changes are better done before
going live because it breaks all local CSS tweaks on the wiki,
so I am renaming things now (also removing some stuff which wasnt
used anywhere).
Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d
I went for this option because it was the fastest to implement.
I think we should wait until we make the change to core to expose
image dimensions before we consider switching to another strategy.
Change-Id: I61c9342a2d6d6fc24a24e0988b3cf7f9a06859a2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/248
Tests which trigger real animations conflict with tests using
Sinon.js fake timers. As a quick fix, disable animations in those
tests.
Change-Id: I1a5e9fbee853cc29621c6ccf286bd2191241fd2f
Less misleading as we have lots of buttons, and I plan to add a new
button class for the Commons/survey/reuse thing.
Change-Id: I74194e22e9066c58f9c1eba57629458b2b9148b5
Adds site link, license link and long name, replaces internal license name
(we don't have it for most licenses) with short name.
Also fixes some problems in previous changesets that I stumbled on,
renames things to be more consistent/less misleading, and makes
EmbedFileInfo a thin container for existing classes. (That results
in a lot of Demeter's law violations, but it means one less model
to remember, which is a good thing since our property names are
often not very informative (e.g. EmbedFileInfo.url and
Image.url which had completely different meanings))
We always have the site information for embed texts (comes from the repo
API); that part of the tests was pointless, but now that EmbedFileInfo
depends on Repo they became impossible to maintain, hence the
deletion of half the test cases in getThumbnailHtml().
Change-Id: I94e1d0aca14e2a7d5fad983412090add8ad6bfa3
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
This takes care of several minor annoyances:
* centralizes all the text processing functions which have been
floating all around the code, and adds proper tests
* filters out invisible elements (sometimes used for metadata)
* avoids merging separate words on HTML->text transformation
* adds caching since doing all this transformations could be
processing-intensive for big chunks of HTML. (This might or
might not be a good idea. I haven't done performance tests, so
this might be premature optimization, and increases memory use.
OTOH these functions are often called in situations where an
immediate UI response is expected (such as selecting a size
from the list) so even small delays would be perceivable.
Bug: 63126
Change-Id: I1ef1e3a33efdfea17612df00da6b629bf39e07aa
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/388
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
Update schema to rev. 7917896, omitting the redundant 'userAgent' field, which
is already logged as part of the generic event capsule.
Change-Id: I558282ed29a14ba574204b4d5cba2a432449a75e
Gets the text closer to the spec:
* links have #mediaviewer (lots of code duplication, see #373)
* image has alt text (was title in the spec but that made less sense)
* less convoluted logic in getCreditHtml()
Change-Id: I43db84adb7fe29850706f92ee978016939b59aaa
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/369
* remove reference to MultimediaViewer
* move hash handling to MultimediaViewer
* make it inherit from Element, remove code duplication
* cleaner event handling life cycle (register on attach,
unregister on unattach)
Change-Id: Ida8f68dead758a6ae3c429eb85c548af61e46801
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/178
Last round of fixes and refactorings regarding resize issues
and the Canvas component:
* Consolidate all the width calculation logic inside the Canvas component
* Consolidate image resizing logic in the Canvas component
* Fix size problem with SVG images
* Clean up comments and tests
Change-Id: I0198cc1e3a45f7287b9a7494f73a8f158303f886
Bug: 56454
Mingle: 239
I was going to stage this but better give you the whole enchilada,
it is not that bad, ;-). This is what I am doing:
- Delete things that are not used anymore.
- Componentize image ui element (Canvas).
Bug: 56454
Change-Id: Ib5461639a86d9f8e0a150f6d9543a20058d31e00
Mingle: 239
Quick and dirty fix for a bug that completely breaks the metadata panel.
Should be refactored later (for a ForeignDbRepo, a missing user is
normal, for anything else it should still be treated as an error
condition, although maybe not with a rejection).
Bug: 62019
Change-Id: I433ae2bd1334593d9c5bfe0272ce7207f3fdf723
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/267
- the bar now starts at 5% for a visual indication that
something is going on
- the bar animates (fast) to 100%, instead of
disappearing immediately
- the animation logic has been fixed to avoid seeing
the bar go backwards
- added sanity check in all the callbacks to make sure
that we don't apply any changes to an image we are
not looking at anymore (including progress updates)
Bug: 58055
Change-Id: I765a61c16513e9330a412c5ec96387623ae7dbc7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/242
Fades out the bottom of the text and adds a link to replace it
with the full HTML version. Due to the way it is positioned,
the fade + link will be invisible if the text is less then 3 lines.
The implementation is not very polished; since this will be
replaced by some JS-based ellipsis thing, I didn't want to spend
too much time on it.
Change-Id: Ib30e40fe845b85bfcf9557970efb886d28b3e5c7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118
Displays a blurred version of the thumbnail
while the actual image loads
Displays a progress bar showing the image load progress
Animates into focus once the actual image is loaded
Change-Id: I2b8bc4691c20ffb5b3f16da9a8b9d6fd1796d784
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146
Everything is under mw.mmv now.
(Also, I cut down on the number of direct global instance references a bit.)
Change-Id: I88bb3b62b82ce54126dd069b0aab4412d9404719
The old technique doesn't work in Firefox and
doesn't always work in Chrome depending on
when you call it.
https://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
Also fixes some tests that weren't overloading
the right function and were hitting the real
feature detection check
Change-Id: I0a9d6b5654efb169860ddf7e5e0551efb825920c
All Jenkins jobs will fail until this commit is merged:
https://wmf.ci.cloudbees.com/view/mv/
Bug: 61778
Change-Id: I5fb37946bbb15cb1b70045f85aa11ba48ecd2260
* Fixes the bug where the browser hash would get nuked on
foreign anchor clicks
* Moves the hash handling back into the mmv itself
* Adds test coverage for the hash nuking bug
Change-Id: Iea57d0f4b9090f96e622418223d3f774923e8038
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/254
After lots of experimenting with Wireshark and
current Chrome + Firefox on Ubuntu 13.10, this is my
current understanding of the caching when preloading images
with AJAX requests:
* on Chrome, the image request always comes from browser cache
* Firefox makes two separate requests by default
* Firefox with img.crossOrigin = 'anonymous' makes two separate
requests, but the second one is a 304 (does not load the
image twice)
* when the image has already been cached by the browser (but not in
this session), Chrome skips both requests; Firefox skips the AJAX
request, but sends the normal one, and it returns with 304.
"wish I knew this when I started" things:
* the Chrome DevTools has an option to disable cache. When this is
enabled, requests in the same document context still come from
cache (so if I load the page, fire an AJAX request, then without
reloading the page, fire an AJAX request to the same URL, then the
second request will be cached), but an AJAX request - image request
pair is an exception from this.
* when using Ctrl-F5 in Firefox, requests on that page will never hit
the cache (even AJAX request fired after user activity; even if
two identical requests follow each other). When using clear cache
+ normal reload, this is not the case.
* if the image does not have an Allow-Origin header and is loaded
with crossOrigin=true, Firefox will refuse to load it. Chrome will
log an error in the console saying it refused to load it, but will
actually load it.
* Wireshark rocks.
Pushed some tech debt (browser + domain whitelist) into other tickets:
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/232https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/233
Reverted commits:
8a8d74f01d.
63021d0b0e.
Change-Id: I84ab2f3ac0a9706926adf7fe8726ecd9e9f843e0
Bug: 61542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
As suggested by Chrismcmahon, I confirmed that there is no need
to fire the onfocus event. We also remove the convenient functions
around this logic.
Change-Id: I00ce04c758e496f76bd5c2a43ad933c952acc5fb
fileUsage tests were applying styles to the fixture element, which
apparently does not get cleaned between tests. This was because
fileUsage.$container had different semantics from element.$container
(widget's own container div vs. parent container div). FileUsage
now inherits from Element to make sure behavior is consistent.
Change-Id: I8fab8bcf084d8b7e480655114506d9848e9d9a49
The first version of the e2e tests just checked the presence
of some DOM sections. This 2d version actually verifies the
values for most of the components in the viewer.
Change-Id: Iabfd544f05182e86a16cf6bda162bb0abc5cf260
We are using data:URIs to measure performace. This
change broke e2e tests that were trying to match plain urls.
Change-Id: I8220801472cde595dd6651ef2796468eba484071
* more robust method of obtaining URL
* decouple performance logging from providers (mostly)
* ignore fake XHR object which jQuery returns for JSONP requests
* guard for CORS requests - apparently Chrome refuses to return
certain information even with an Allow-Origin: * response header.
* Resource Timing is limited to 150 results, which causes fake
misses in debug mode. There is an API to increase the limit
but it is not implemented in Chrome. I am calling it nevertheless,
maybe IE understands it (it is present in the MSDN docs at least).
This seems to work for AJAX, CORS, JSONP, image AJAX; CORS requests
return 0 for a lot of values, per spec a Timing-Allow-Origin: *
header might help that.
Change-Id: I8353858022f51a7e70774e65513d0fa2554a5064
When the lightbox is opened, or prev/next pressed, preloads the
previous/next N images.
Technical debt introduced:
* initialization is a mess, with the viewer and the interface
randomly setting properties on each other in different phases of
execution. That got in the way and I shuffled things around
until they worked, which is obviously not the way to have a
robust system, but hopefully it will get scrapped soon anyway
in favor of a clean top-down dependency injection.
Change-Id: Idcb5c40de1ac0b3e482decd66e56c4de8ec71b6b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/155
A simple task queue which can be processed or cancelled.
Will be used to handle preloading in a more robust way.
Change-Id: Ib33f9b2d814a35538f9d4f3691fce5ba5cdc82c1
* moves generic logic into ThumbnailSizeCalculator class
* moves UI-specific logic into interface class
* fixes bug where non-bucketed sizes were served on devices with
non-standard pixel density
* fixes bug where bucketed size was compared to css size instead of screen size
for resizing
Change-Id: I8ba3380b74fcc8fb0a6ecc3f3140627411851ad0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/196
* userinfo api requests are cached now
* we use jsonp only if we have to (makes gender api calls measurable on WMF wikis)
* all API calls use providers now, provider.Api constructor can be used to
wrap mw.Api with metrics
Does not return a proper model, and gender API calls are not preloaded together
with the rest of the calls. Maybe next time.
Change-Id: I9b3ea73c65eef57e160ac8636d9e45d349150884
The code was incorrectly adding the link to the first section
no matter what. This wasn't caught by the existing assertions,
so these are being improved as well.
Change-Id: I4dcbf44b504bd4cb875b4058fe5604f2a3c871b7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/44
Interface code is its own class which does not depend on the main
interface class it can be unit tested (and eventually moved into its
own file to make browsing the code easier). IMO we should aim to
eventually break up the interface into similar classes (with a simple
init/empty/set interface + custom events where it makes sense).
Also, sneak-introducing LESS!
API usage could be more effective (globalusage is a separate API call;
it needn't be), but we will have to rewrite that part soon anyway, so
it should pass for now.
Bug: 60087
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/44
Change-Id: Ibe5c323cdeab4a378316925f0c3efb3dc7ef5997
The code to load and set the image was semi-duplicated and
scattered in various places. This was the source of defects
as this code is called asynchronously and was hard to debug.
This change attemps ot consolidate all the image load logic
in one place. It also adds sorely needed unit tests.
Change-Id: I92eb1c48e2ff0808134e56b4b150e22254eb2d6e
When the multimedia panel is closed, the chevron
points upwards, otherwise it points downwards
Pressing the up and down arrows on the keyboard
opens and closes the metadata panel
Change-Id: I7dd31f3cc3d90f9342845faea2c6cfea3b40e232
After checking all the code paths (phew !), it seems
this simple change takes care of the resolution issue
that surfaces mainly in iOS devices (see b/60388).
Bug: 60388
Change-Id: I867dd18f782126fb71eb52ec637a2b90b910050d
This is a big change, but should change nothing except the sizes of some
files and where they all are.
There are no more ext.multimediaViewer strings ANYWHERE, so let's keep
it that way. :)
Change-Id: Ic0892f5894700938bfa01f3f9bc8e5ab8276eb72
It seems the problem was iOS specific. In retina displays the devicePixelRatio
turns out to be 2. This was making the images twice as wide. This was introduced
as a way to fix the resolution problem with some Apple devices, I suppose? Since this is not
fixing the problem I am removing it for the moment. Fixing the resolution issue implies
more changes that will be addressed in another iteration.
Bug: 60173
Change-Id: Iaff2aa6ba13ae85f905ab6d1569572881d8b5990
* Move description and caption to both be in the bottom left
* Make empty description grey and italic
* Fix problem where description was sometimes appended twice
* Move description UI stuff into a separate file, and make it more MVCy
* Tests for description UI stuff
* General framework, to an extent, for UI classes
Change-Id: Ibc8c576cd8a41c2e3cf7e13f1b9e093384fb4655
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/120
