Custom Vector theme/skin for GolemWiki, our instance of MediaWiki
75af9ec9b5
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
|
||
|---|---|---|
| .phan | ||
| components | ||
| i18n | ||
| images | ||
| includes | ||
| screenshots | ||
| skinStyles | ||
| .eslintrc.json | ||
| .gitignore | ||
| .gitreview | ||
| .phpcs.xml | ||
| .stylelintrc.json | ||
| CODE_OF_CONDUCT.md | ||
| collapsibleTabs.js | ||
| composer.json | ||
| COPYING | ||
| Gruntfile.js | ||
| hooks.txt | ||
| jsduck.json | ||
| package-lock.json | ||
| package.json | ||
| print.less | ||
| README.md | ||
| responsive.less | ||
| screen-hd.less | ||
| screen.less | ||
| skin.json | ||
| variables.less | ||
| vector.js | ||
Vector Skin
Configuration options
$wgVectorPrintLogo
Logo used in print styles. Keys are url, width, and height (in
pixels). Note that this solution only works correctly if the image
pointed to by url is an SVG that does not specify width and height
attributes, or its width and height match the corresponding variables
below. Alternatively, a PNG or other type of image can be used, but
its dimensions also need to match the corresponding variable below.
That in turn may result in blurry images, though.
The URL can be absolute or relative.
Example configuration:
$wgVectorPrintLogo = [
'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 174,
'height' => 27
];
- Type:
Array - Default:
false