f39a3f028f
With these optimisations applied, there is no longer any need for the width value during most page views, and even for most resize operations. As such, eagerly computing it ahead of time, even from an idle callback, no longer makes sense. It is still memoised because it's worth avoiding a recalc during some of the code paths that need it. Also because this way the logic stays compatible. I don't know for sure if all involved logic would be able to handle the value changing over time. Optimisations: * Where possible, don't depend on jQuery width() working on invisible elements. Specifically, don't depend on it giving you the width of the element *as if* it were visible when it is invisible. When logged-out and, when navigating special pages (e.g. Special:Blankpage), the #p-cactions element is an emptyPortlet with `display: none;` set. The animation logic was depending on initialCactionsWidth() providing the width the element would have if it were visible. This is because jQuery width(), will actually change 'display: none' to 'display: block', force render virtually, compute the width, and then change back. Instead of depending on this discouraged feature [1], move this calculation to the code dealing with the animation and calculating it there, ourselves, right after making it visible for real (but before shrinking it for the hidden-to-visible growing expansion animation). * Document our reliance on this discouraged feature for the remaining two callers in expandCondition() and collapseCondition(). Both of those need the initial width as-if visible and generally are not in charge direclty of making it visible (so there's no better place to measure it), and are in fact almost always called when the element is invisible, thus pretty much exclusively depending on it, not even as an edge case. * In collapseCondition(), optimise the logic to remember whether collapsing is needed. This way, it won't need to call initialCactionsWidth() if the loop iterated zero times (turns out to be impossible, but not obvious from the code). Follows-up |
||
|---|---|---|
| .phan | ||
| components | ||
| i18n | ||
| images | ||
| includes | ||
| screenshots | ||
| skinStyles | ||
| .eslintrc.json | ||
| .gitignore | ||
| .gitreview | ||
| .phpcs.xml | ||
| .stylelintrc.json | ||
| CODE_OF_CONDUCT.md | ||
| COPYING | ||
| Gruntfile.js | ||
| README.md | ||
| collapsibleTabs.js | ||
| composer.json | ||
| hooks.txt | ||
| jsduck.json | ||
| package-lock.json | ||
| package.json | ||
| print.less | ||
| responsive.less | ||
| screen-hd.less | ||
| screen.less | ||
| skin.json | ||
| variables.less | ||
| vector.js | ||
README.md
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