Increasing the distance of the button slightly changes the position
from end, putting the icon in a more appropriate place (harmonized
whitespace of input value and icon).
Also simplifying `font-size` calculations readability and equalling
their values in search input and button.
Bug: T225331
Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
Reducing specificity, simplifying output and merging `padding`
in one place into one shorthand attribute.
Change-Id: Ida96f18e9d90d55492ea114a7b5e3e1b8020c71f
The debounce is trailing, not leading/throttled. This means
the value doesn't decide how often it runs while the user is
resizing. It decides how long after they stop resizing will
it first run.
Given the calculation isn't super expensive, a much lower value
should suffice. The main thing we want is that while the user
is actively resizing and 100s of events are queued up (faster than
JS can process), that we wait until the end of the chain before
computing it (once). If the user actually stops moving, even for
a little bit, that little bit however small should be more than
long enough for a repaint to take place.
Test Plan:
* Open two tabs, one after checking out master, and
one after checking out this patch. Make sure you are logged-in
on MW as an administrator user (to get more tabs).
* Verify that `mw.loader.getVersion('skins.vector.js')` returns
different values from the console for each.
* Resize the window from wide to very narrow and back.
Before, the tab bar updates relatively late it feels sluggish.
After, the tab bar appears to update as/while you let go.
Change-Id: If02338559abc71668d0655e8b3be1a5f73e646a9
requestAnimationFrame (rAF) is called before styles are computed.
Performing a style read there can require a forced style
recalcution which interrupts the browser's natural rendering
life cycle.
To gracefully observe layout of the page without inducing the
cost to render it, it should be accessed after rendering.
A suitable API to schedule time there is requestIdleCallback.
In any event, if the code that needs this measurement executes
very early for some reason, it is still computed on-demand which
means it can't cause any functional regression.
Change-Id: I0d8d3a0b158fa3d9e0895760d0691757f918d91d
It's not useful to mirror it for RTL languages, as it's a real world
object metaphor and is held in right hand for most users, no matter
what language. Sorry, left-hand users. Unify with Design Style Guide
search icon treatment.
Bug: T228435
Change-Id: I9ff688e4be801779a84b1026ca57cfb50209b53d
Unifying Vector input appearance to follow Design Style Guide and OOUI,
additionally:
- Simplifying LESS code, reducing specificity to minimum needed
- Providing fallbacks where necessary to a wide range of browsers including IE8
- Better positioning and larger click area of search button
Bug: T225331
Change-Id: Iafeddf670a9c087e66acf5463c99351fc2d5d78c
If RelatedArtcles uses the SkinAfterContent hook (depends-on patch)
and we move the hook out of the main content block (parent patch),
it needs some styles to remain consistent.
Bug: T181242
Change-Id: I2c5d4034890a5164896c1ef0570b31465a275890
Depeds-on: Iebd759c0d1a536768d18953f372664df762d9e04
