Commit graph

1676 commits

Author SHA1 Message Date
Jon Robson d708478752 [Technical] Remove common Menu styles
There are no longer any common menu styles. These are moved to the legacy
skin and new rules are added to the dedicated components.

Change-Id: I1bf26bfb29bb495ee65e983fad60122007f62698
2022-11-08 14:31:14 -06:00
Jon Robson bc56ba86df Allow dropdowns to contain .vector-menu-content elements
Currently you cannot have menus inside dropdowns. To support this
we should limit the selector to direct children nodes.

This will allow us to put the main menu into the main menu icon
dropdown.

Change-Id: Ibf304843a62d5269992a01eb826edf71ce8d3c35
2022-11-07 15:44:13 -08:00
bwang e09550b12f Update page tools feature flag class
Change-Id: Ib3013998543dfa7684635229361b0b346e745777
2022-11-04 13:36:17 -05:00
Jon Robson ea07136e73 Fix alignment between icons on left and right of screen
- Table of contents arrows are now aligned with sticky header search/hamburger
- The user menu dropdown now aligns with more and languages button

Bug: T321504
Change-Id: If3aed0ac401b0abc80c3ad52806eb85b33d43f06
2022-11-04 17:06:48 +00:00
bwang 099eed0487 Remove CSS classes and selectors from cached HTML
Bug: T316570
Depends-on: Ib4050768f20b1734d356104f18aa539f657099d8
Change-Id: I97f87b32402d7f4fd790f9a8b9abab42efd9d890
2022-11-03 11:12:39 -05:00
jenkins-bot e76948f4ed Merge "Disable new flushing rules with feature flag disabled" 2022-11-02 22:38:50 +00:00
Jon Robson 4ecf9219e0 Disable new flushing rules with feature flag disabled
This change should roll out with the featue flag to avoid
unexpected UI regressions

Follow up to  I9aba71ac4fff0d285676946acef8309b741ed1ad

Bug: T321504
Change-Id: I369e314bac31ea2eca3bff4e530e07c8bee325e2
2022-11-02 22:21:58 +00:00
Bernard Wang 15d95fc24a [Technical] Split up Menu.template, restrict decoratePortletData to legacy Vector
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up

* storybook no longer run on CI

Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
2022-11-02 21:22:50 +00:00
jenkins-bot 1b6033fc42 Merge "Finish moving to Page Tools naming convention" 2022-11-02 01:15:21 +00:00
bwang cc201a42d9 Finish moving to Page Tools naming convention
Change-Id: I8fcfac60b34a500e751cf10ca2ae5c26dd35881f
2022-11-02 00:59:16 +00:00
jenkins-bot 491519808f Merge "Limited width toggle" 2022-11-01 21:06:54 +00:00
jenkins-bot e857cfa9e1 Merge "Align text of main menu and ToC to main menu button" 2022-11-01 16:47:05 +00:00
jenkins-bot c12d8bb96e Merge "Add generic PinnableHeader template, CSS & JS" 2022-11-01 16:45:18 +00:00
Jan Drewniak 8c63ac7c55 Align text of main menu and ToC to main menu button
Instead of aligning the edge of the main menu and
ToC with the edge of the main menu button, this
aligns the text of those sidebar items with the
edge of the main menu button.

NOTE: Currently not working with the
vectorvisualenhancementnext feature flag enabled.
This will be addressed in If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T317583
Change-Id: I01f639c5ca63ac50235dc21ca5273c91213f041c
2022-11-01 16:30:01 +00:00
Jon Robson 0eb8811e7a Limited width toggle
* Introduce a generalized feature toggle system that uses user
preferences or localStorage for anons (right now the latter is out
of scope but will be explored in a follow up)
* Feature flagged to VisualEnhancementNext for now, given the dependency
on icon size

Bug: T319449
Change-Id: I7343a3f38b720411d5ef5f3414f25f475b0bb84a
2022-11-01 16:29:43 +00:00
bwang 2ac38f2f9a Add generic PinnableHeader template, CSS & JS
Bug: T317897
Change-Id: Iedc5e6f64e72a4d7762cb4f2fa834980d6757793
2022-11-01 11:12:15 -05:00
Jon Robson 31b0fd08d2 [Technical] Prepare for template rename
The user links and language button are SkinVector22 features but
they are buried inside SkinVector.

When we rename the templates this code will become problematic
as SkinVector22 requires these modifications

Bug: T319349
Change-Id: Id5e5b97af0ea020ef20565a7e1acc685d7be0892
2022-11-01 03:45:21 +00:00
Roan Kattouw 906825a774 search: Don't show results for stale search queries
Sometimes, especially on a slow connection, search results may arrive
for a search query that is no longer in the search input, because the
user has changed the search query since the request was sent. When that
happens, don't display those outdated results.

Bug: T321108
Change-Id: Idd515a679673a7ddef02950323311a56cd2e84e9
2022-10-28 21:25:25 +00:00
Jon Robson f37ff19f25 Codex search should respect autocapitalize value from $wgCapitalLinks
When $wgCapitalLinks = true, use sentences
When $wgCapitalLinks = false, use none

Bug: T251664
Change-Id: Ide4f48641619a4af94c40129ac28f63cb4bb30f9
2022-10-28 18:53:17 +00:00
jenkins-bot eb124e850b Merge "search: Fix loader alignment with search input" 2022-10-28 16:21:21 +00:00
Roan Kattouw f34f78313f search: Fix loader alignment with search input
The search input no longer expands to the left when focused, only when
there are search results. This meant the loader box was misaligned,
because it still expected the search input to expand.

To fix this misalignment, add the margin-left and width styles that
apply to the search input to the loader box as well.

Bug: T321009
Bug: T317902
Change-Id: Ic177b4cf56cb0a94850037a30db3001777dc52d2
2022-10-28 16:05:38 +00:00
Jon Robson 9c9c49d90f Remove duplicate styles
Follow up to
I51f8e31be6771a3fb32fb07dc22d0c2872b5706d

Bug: T321504
Change-Id: Ia3fe858f29836039fd7d621588715badf3298643
2022-10-27 10:34:15 -07:00
jenkins-bot 5112811e47 Merge "Use standard utility classes for flushing icons left and right" 2022-10-27 15:03:34 +00:00
jenkins-bot 702e585154 Merge "Limit user dropdown link to 48px" 2022-10-26 21:23:59 +00:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
jenkins-bot 598424b2e2 Merge "Replace incorrectly mw- prefixed classes Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"" 2022-10-25 22:32:06 +00:00
Nicholas Ray 6d62d71ee5 Remove login link quick fix styles
This removes the previously merged 835281 stopgap. Because of caching, this
should only be merged when the `emptyPortlet` class is not found on the user
menu container on anon officewiki.

Bug: I883926c36f59d446076f960ead31f82e51967e70
Change-Id: Ia1e9ba2b43186462b05f372368d5965fa0857657
2022-10-25 16:17:24 +00:00
bwang 51457a78e7 Replace incorrectly mw- prefixed classes
Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu"

Bug: T316570
Bug: T317437
Change-Id: Ib4050768f20b1734d356104f18aa539f657099d8
2022-10-25 10:28:31 -05:00
Lucas Werkmeister a01f839051 search: Make wprov value match non-Vue behavior
The legacy search wprov behavior, implemented in the WikimediaEvents
extension in searchSatisfaction.js, is to use acrw1_ as the prefix (i.e.
with an underscore before the index), and acrw1_-1 for user searches
that didn’t select a suggestion (not acrw1). Make the Vue search match
this in both cases.

Bug: T317682
Change-Id: I6c84533e1811233ff2727d501327471d73fc7b62
2022-10-25 10:38:44 +00:00
Jon Robson f94e386f85 Limit user dropdown link to 48px
Bug: T319070
Change-Id: I483e728870c059a1945d3dc4f395f04250b29cc7
2022-10-25 00:29:39 +00:00
Jon Robson 614da1dc5e Features: Make max width a feature
Making this a feature part of the feature management system is integral
to making this a toggle and will allow us to explore making this
persistent in future.

Bug: T319447
Bug: T319449
Change-Id: I80c7b892a6891094854b4154db90917b67986102
2022-10-24 13:12:06 -07:00
jenkins-bot 5da5190a9d Merge "search: Add wprov to result URLs" 2022-10-24 17:40:59 +00:00
Lucas Werkmeister d34fae74f1 search: Add wprov to result URLs
This ensures that the wprov parameter is included when users follow the
link as a link (click, middle-click, etc.), and also prepares us for a
future where pressing Enter after selecting a search result navigates to
that result’s URL instead of submitting the form. It also matches the
behavior of the legacy search form.

We put this in App.vue + instrumentation.js, not in urlGenerator.js,
because we also want wprov to be added when custom URL generators or
search clients are used. (The reason for instrumentation.js instead of
purely App.vue is just that it’s easier to test there.)

In the tests, we need to update @wikimedia/mw-node-qunit so that we have
a sufficiently functional mw.Uri() mock.

Bug: T317682
Change-Id: I765d3bbf89b2253add7b50305c362e4bbc9ecceb
2022-10-21 11:58:30 +02:00
Nicholas Ray 97147857b2 Add vector-tab-noicon class to tabbed menus when menu items are added by gadgets
* Removes server rendered vector-tab-noicon class from legacy Vector as it is
not currently used.

* Adds menuTabs.js responsible for adding the vector-tab-noicon class when menu
items are added to tabbed menus. This is only used in vector-22.

* Adds unit test

Bug: T320691
Change-Id: Iffad86125f8754305f592ddc19d894866bd6dedc
2022-10-20 18:21:58 -06:00
jenkins-bot 3f00191c85 Merge "Split MenuPortal.less into legacy and modern Vector" 2022-10-13 17:53:53 +00:00
jenkins-bot 74bdd375bb Merge "link.prepend is not a function in older browsers" 2022-10-09 09:33:52 +00:00
Jan Drewniak d2618e9428 Split MenuPortal.less into legacy and modern Vector
Removes the common MenuPortal.lesss code and splits it into
Vector 2022 and Vector legacy in anticipation of changes to
the sidebar in Vector 2022.

Bug: T317583
Bug: T319348
Change-Id: I57d3dc3458a7d6a4877170c26c88ca9222e00ff7
2022-10-07 17:40:49 +00:00
Jon Robson 8a54c0841b link.prepend is not a function in older browsers
Seen in logstash for Chrome 50.
Icons are not essentially, so gracefully degrade in these browsers
to items without icons.

Change-Id: I083c87c9bf5f256c8bcd2893e251571b97440ce1
2022-10-07 00:59:00 +00:00
Roan Kattouw 5693594bd1 Remove $wgVectorSearchHost, replace with $wgVectorSearchApiUrl
This allows the URL to the other wiki's rest.php to be configured
exactly, rather than assuming that it has the same wgScriptPath as the
current wiki. This is necessary to make this feature work on PatchDemo,
where wgScriptPath looks like '/123abc456/w'.

$wgVectorSearchHost is removed, since nothing uses it except PatchDemo
(where it's broken) and development setups.

Bug: T319494
Change-Id: Ife042f4f683d366a31a642723746d4aa80774c03
2022-10-07 00:57:58 +00:00
jenkins-bot 21a63b7c42 Merge "Restrict margin between arrow and icon to feature flag" 2022-10-05 21:11:50 +00:00
Jon Robson e62062631d Restrict margin between arrow and icon to feature flag
Follow up to 1bb0a0e8f

Bug: T319070
Change-Id: I850088abdf815c0c65a05aa2a7dfd9445aa688f6
2022-10-05 19:18:55 +00:00
jenkins-bot 9af2908bae Merge "Regression: Restore tab styles to legacy icons" 2022-10-05 19:07:27 +00:00
Jon Robson a36ec92a27 Regression: Restore tab styles to legacy icons
Follow up to d0775a2

Change-Id: I5c3e4ac2ca0ed457863b4e4dd3cc9ccc3dca86d0
2022-10-05 18:44:19 +00:00
jenkins-bot ca3fe05c5e Merge "Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles" 2022-10-05 17:06:12 +00:00
bwang 7c172531c2 Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports

Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
2022-10-05 10:30:12 -05:00
jenkins-bot 142aa4abcd Merge "Visual enhancements next: Fix alignments of icons" 2022-10-05 02:24:16 +00:00
Jdlrobson 1bb0a0e8fa Visual enhancements next: Fix alignments of icons
This reverts commit d1ef0d3aaf.

Reason for revert: Applying again without the impact on styles in
master.

Bug: T319070
Change-Id: I751168e1dc0f6235fd5ba881dc884941edbf4b77
2022-10-05 01:33:09 +00:00
jenkins-bot f8af368121 Merge "search: Reduce skins.vector.search module size" 2022-10-04 23:35:08 +00:00
bwang d0775a2af9 Technical: Cached HTML cleanup
Change-Id: I6638a816fba3002289236f50d3d0e976f478affe
2022-10-04 18:23:57 +00:00
Jon Robson cc9fc193f6 Adjust watchstar animation
Rather than infinitely spinning, spin it once 72deg to the right
hand side just how we do on mobile.

Bug: T317371
Change-Id: I1ed89e4ad2b54444f920d850bb4a17e9caa92dc5
2022-10-03 23:53:31 +00:00
Jan Drewniak 98068d9598 Restore navigation landmarks in page toolbar
Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation

Removes the "tools" landmark and associated
aria-label (and translation message).

Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.

Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
2022-10-03 10:39:39 -04:00
Jon Robson db08697b17 Prepare for icon touch area change
Should result in no visual changes with default Vector config (e.g.
Pixel)

Bug: T314323
Change-Id: Id1d72fdede3aabab630f9318516ef0f92b12e23b
2022-09-30 16:35:17 -07:00
bwang 76f73decca Fix page toolbar border
VISUAL CHANGES:
- Minor tweaks to border color

Bug: T318952
Change-Id: I887e9dc922828a64afe010c2c13912711fcfbaa1
2022-09-30 22:25:59 +00:00
Jon Robson 4b17edadd7 Fixes to addPortletLink hook handler
* Ensure addPortletLink hook is only run once
* Mark more menu as not supporting icons so icons are not added

Bug: T317491
Bug: T318495
Change-Id: I99450a5b0410e88cc7cdb2753b9b4256e3fe41db
2022-09-30 20:37:01 +00:00
Jon Robson 785926d8ba Technical: Generalize icon flushing
This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.

No expected visual changes.

Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
2022-09-30 20:12:14 +00:00
Lucas Werkmeister 86c9693693 search: Reduce skins.vector.search module size
Change I765d3bbf89 pushes the module over the configured maximum allowed
size (3 KiB, see bundlesize.config.json); shave off some bytes elsewhere
to bring it below the limit again. IMHO all of these changes should be
acceptable:

* arrow functions are already used elsewhere in this module;
* using the mw.config.get() fallback argument is normal (it slightly
  changes behavior, but I don’t think explicitly setting the search
  client or URL generator to a falsy value and expecting to get the
  default behavior should be considered supported);
* not quoting [name="search"] matches [name=title] immediately above;
* using forEach() with a function reference is still readable (initApp()
  is now called with extra arguments, but that doesn’t matter).

Change-Id: I45dda26cb59279d91804b0c2bbf12174fa78ee12
2022-09-30 19:05:03 +02:00
jenkins-bot a9a8663763 Merge "[Quick Fix] Fix Vector 2022 should display a "log in" link on private wikis" 2022-09-30 01:36:14 +00:00
Jon Robson 44ee12c717 [Visual enhancements next] Make the Echo buttons functional
This completes the changes to Echo inside the
vectorvisualenhancementnext=1 feature flag

Bug: T257143
Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
2022-09-28 17:06:20 -05:00
jenkins-bot 71bc90f225 Merge "Restore unconditional rendering of siteSub with styling modifications" 2022-09-28 03:38:13 +00:00
Jon Robson 330dc5f705 Restore unconditional rendering of siteSub with styling modifications
The margin is moved to non-empty elements to avoid extra whitespace
when it is empty

Bug: T315639
Change-Id: I22aa7dbbacc5bc4ac87cffa13113ced9c9400e0b
2022-09-27 15:10:26 -07:00
Nicholas Ray 3613a369eb [Quick Fix] Fix Vector 2022 should display a "log in" link on private wikis
This adds a bit of tech debt and should only be merged if we're looking for a
quick fix of T317789. It overrides the `.emptyPortlet` class that is currently
hiding the user menu on OfficeWiki et. al. to show the user menu  instead. It
also hides the learn more link since the presence of the `emptyPortlet` class
suggests that we do not have anon editor links in the menu.

Bug: T317789
Change-Id: I3deaf6b4896e9ec3a143c5909092caffc600da56
2022-09-26 15:54:29 -06:00
Volker E 4df2b12e31 mediawiki.skin.variables: Add border-style and border-width vars
Already covered in mediawiki.skin.defaults.less.

Change-Id: If57df6cbbbab29ed9775d8d6676bd94a3b4de549
2022-09-23 17:58:42 +00:00
bwang 4a115be7a8 Follow-up: remove redundant code in TableOfContents.js
Bug: T316032
Change-Id: Idb46b713c9df9fd1dd70a9955aa222f8b84ac813
2022-09-21 16:44:20 +00:00
bwang 600dd1496a Style active top level section differently than ordinary active TOC sections
Bug: T316032
Change-Id: I662a03f7f7b1e1fb65c365b3db6096cae75fdeb2
2022-09-20 16:57:53 -05:00
Jan Drewniak 06c243da35 Modify the sticky header offset styles
- Prevents the ToC in the sidebar from jumping down when the sticky
  header becomes visible
- Removes the `.sticky-header-element` class from the ToC since that
  only modifies the elements position when the sticky header becomes
  visible (whereas in this case, it should be modified when the sticky
  header is enabled, before it's visible).

Bug: T314330
Change-Id: Ic6f50b8dc4f1507d875825d23eb44c24a998eaf7
2022-09-20 10:34:09 -04:00
jenkins-bot 1352035534 Merge "Icons: Globally set icon colors to @opacity-icon-base" 2022-09-20 00:35:58 +00:00
jenkins-bot 3e5c89df2b Merge "Table of contents: Hide accessible label using color transparent" 2022-09-19 22:51:49 +00:00
jenkins-bot 635ae993ff Merge "Follow-up: Apply min-width to collapsed TOC" 2022-09-19 22:41:23 +00:00
jenkins-bot e9b79ee39f Merge "Fix border when title is hidden and when toolbar is empty" 2022-09-19 22:20:31 +00:00
bwang c4ec68b13c Fix border when title is hidden and when toolbar is empty
Bug: T317930
Change-Id: Iba89a2e642a8377c3603d099fb1157fc2df465d0
2022-09-19 21:37:27 +00:00
jenkins-bot 8f097163c2 Merge "[RTL, TOC] The arrow before collapsible sections in sidebar is clipped" 2022-09-19 20:11:13 +00:00
Jon Robson 5aadd9f578 Table of contents: Hide accessible label using color transparent
This is showing up in non-screen readers on Bengali wiki

Bug: T314652
Change-Id: I30ec573ae3de4811690183007282ef5f30c228b3
2022-09-19 12:56:19 -07:00
Moh'd Khier Abualruz 5a32955311 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
The table of contents has since been reflected to
not use calc statement anymore and pre-calculate the value,
cssjanus flips this value properly so this rule can safely be removed.

Bug: T314652
Related-To: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
Change-Id: Ibb390589f449bc20c6f38f66c1e617fa3fa82aab
2022-09-19 19:52:38 +00:00
Jon Robson 83458dd8dd Icons: Globally set icon colors to @opacity-icon-base
Also use other icon opacity variables where applicable.

Bug: T317800
Depends-On: If2f99124b01ce99b5131fdb960c60952075f6343
Change-Id: Ib8b3d11bd1bd6f902ff846eeb2a8f9cf3c7077b2
2022-09-19 19:28:19 +00:00
jenkins-bot 95dbf57db5 Merge "Remove unreachable code in tableOfContents.js" 2022-09-19 16:44:26 +00:00
Volker E ee24a19c8d mediawiki.skin.variables: Add Opacities to skin.defaults variables
Orienting on Codex Opacity tokens as defined in v10 of 2022-04-01 in
https://www.figma.com/file/h9pA2CCl2i0wtlTKNChaES/Opacities---Tokens?node-id=368%3A2139
Also adding legacy opacity icon tokens for use in all non-Codex
products.
Specifically the icon ones are already in use in Vector.

Bug: T317800
Change-Id: Ib699ccf0342030f521ad876d70974b8818f877cb
2022-09-16 22:37:23 -07:00
jenkins-bot 5e96b277a7 Merge "Follow-up: Clean up sticky header and collapsed TOC styles" 2022-09-17 00:11:40 +00:00
jenkins-bot e00603010b Merge "Sidebar: Collapses at lower resolutions, expands when resized" 2022-09-16 22:29:45 +00:00
bwang 88d4aef088 Follow-up: Clean up sticky header and collapsed TOC styles
Bug: T316056
Change-Id: I4c803bfd820aeb7270afa65cf8412415b437ff42
2022-09-16 14:25:02 -05:00
jenkins-bot aad1c4c836 Merge "Revert "Set top value for ToC when sticky header is enabled."" 2022-09-15 22:40:58 +00:00
bwang 0d7a8d751e Follow-up: Apply min-width to collapsed TOC
Bug: T316056
Change-Id: Ib9460cd5f5fa6d37a4aaf3c0dd583d9de46851ee
2022-09-15 20:27:24 +00:00
Bernard Wang 3bdcb4ae2a Revert "Set top value for ToC when sticky header is enabled."
This reverts commit 968787d692.

Reason for revert: Causes TOC visual regressions

Change-Id: I0bfe8ee1d1bc9d5a71d3abadb6636d8cc5d07668
2022-09-15 19:28:41 +00:00
bwang fd783b0499 Update collapsed TOC menu width
Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar

Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9
2022-09-15 17:37:28 +00:00
Jon Robson aa8d628e13 Sidebar: Collapses at lower resolutions, expands when resized
On resize, or when booted in a small window the sidebar will collapse
and remain collapsed for subsequent page views

Bug: T316191
Change-Id: I6625fc3b3f1015d74b484a2a3643def13467ddf5
2022-09-15 10:27:12 -07:00
jenkins-bot fbb283a315 Merge "Set top value for ToC when sticky header is enabled." 2022-09-15 16:57:39 +00:00
bwang e28e197f1f Prevent language button in sticky header from word breaking
Bug: T316609
Change-Id: Ie4d9efad0850dce52a6e383574b14d986a824d4a
2022-09-15 16:28:26 +00:00
Jan Drewniak 968787d692 Set top value for ToC when sticky header is enabled.
Prevents the ToC from jumping down when the sticky header
becomes visible.

Bug: T314330
Change-Id: I11450d9062445d357859c6e48972f2ba37e597c6
2022-09-15 11:04:23 -04:00
jenkins-bot e0042bceca Merge "Remove unneeded expansion styles from search box code" 2022-09-13 19:30:18 +00:00
Nicholas Ray f79e97cf6b Remove unreachable code in tableOfContents.js
AFAICT the `setInnerHTML` param that was part of the reloadPartialHTML
method was always true. Thus, much of the code contained in this method
can be removed and the `setInnerHTML` param can also be removed.

Bug: T316571
Change-Id: I82e99f902eadba8a9df2166c4f89ba1f1d747a47
2022-09-12 17:45:24 -06:00
bwang 6b7197cf95 Followup: Removed code for cached HTML from T313060
Bug: T313060
Depends-on: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
Change-Id: I0626f5c8d92836ecac961bbe213ffd8b0f0e2df5
2022-09-12 21:47:48 +00:00
jenkins-bot 5e02d2b7ea Merge "Minimize search icon" 2022-09-12 18:26:04 +00:00
Thiemo Kreuz 80a935cc9a Minimize search icon
Change-Id: I3f6084fc71930378ecb98180f4bd3d07478e9b4e
2022-09-12 18:53:31 +02:00
Volker E 2eeb9e45fc icons: Fix arrow stem to be perfectly 45 degrees
Following-up to further optimize icon SVG and provide arrow stem in
perfect 45 degrees angle.

Bug: T261391
Change-Id: I1fa7789182f0fffb7891205a9099884402d37b61
2022-09-11 23:24:29 -07:00
jenkins-bot 77877254da Merge "Revert "Sidebar: Collapses at lower resolutions"" 2022-09-10 00:34:13 +00:00
Jdlrobson 475c237a5e Revert "Sidebar: Collapses at lower resolutions"
This reverts commit 365d3902c9.

Reason for revert: Pixel is flagging the sidebar being closed
in cases where it shouldn't. Since I can't debug that I'm
reverting just to be cautious.

Change-Id: Ib88f61eb6a7fda8ce546a24c2d3dbbde836f2c40
2022-09-09 17:08:19 -07:00
jenkins-bot 2f25456534 Merge "Followup: clean up cached HTML code from T315595" 2022-09-09 22:32:55 +00:00
bwang d538835b5a Follow-up: Align sticky header with header and update collapsed TOC in page title padding
Visual changes:
- Sticky header padding will increase on desktop and desktop-wide viewports to match the header
- Padding on collapsed TOC button in page title is 2px wider on each side

Bug: T315261
Change-Id: I9d0df4f4d399fe120a4c1a5d2df610942cc70f02
2022-09-09 20:07:49 +00:00
jenkins-bot 9ac7a23234 Merge "Correct ContentHeader source order to match design" 2022-09-09 17:24:55 +00:00
bwang abad54d0ab Change article toolbar bottom border color
Bug: T311311
Change-Id: I1731510da0c956d0290508b9a2cef7558d3cde00
2022-09-08 23:54:13 +00:00
bwang fc9fe5e719 Add vector-toc-not-collapsed class serverside
Visual changes:
* No reflow on startup

Bug: T316964
Change-Id: I17f2699fec113d92b3f0f223c357654f52eb7eb3
2022-09-08 22:43:56 +00:00
jenkins-bot bcfc94090b Merge "Sidebar: Collapses at lower resolutions" 2022-09-08 20:50:17 +00:00
Jon Robson 97cf735de2 Icons: Watchstar and wikilove are upgraded
Can be tested by appending ?vectorvisualenhancementnext=1
to URL

Bug: T310838
Bug: T234990
Bug: T234550
Depends-On: I76d0d94c9006cc5f5680849ecdd1c382c16e34ba
Depends-On: Ib7c3021db014827b4b88cac855afc0b54a360f8c
Change-Id: Ie2ffa5c3ecf270c1bb1f315937023ae7ace5ed30
2022-09-08 19:43:35 +00:00
bwang 4c622fe8de Correct ContentHeader source order to match design
- Use flexbox instead of float

Visual changes:
- The title wraps differently when the title is very long

Bug: T313947
Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
2022-09-08 19:10:55 +00:00
Jon Robson 365d3902c9 Sidebar: Collapses at lower resolutions
On resize, or when booted in a small window the sidebar will collapse
and remain collapsed for subsequent page views

Bug: T316191
Change-Id: Ib4961975630871d6630cd747a78cc2ec4f1cdeeb
2022-09-08 08:22:20 -07:00
jenkins-bot e60716e63d Merge "Align language button" 2022-09-07 22:21:27 +00:00
jenkins-bot d4094ffa02 Merge "Align header icon buttons and main content" 2022-09-07 22:21:25 +00:00
bwang cdae8b1937 Align language button
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md

Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
2022-09-07 09:47:55 -05:00
jenkins-bot ddc3125f74 Merge "Remove dependency on .cdx-typeahead-search--active class" 2022-09-07 01:29:45 +00:00
Jon Robson 742f659b10 FeatureManagement: All features have an associated class on the body tag
This is a common need for features, and having these use a standardized
class name will make using them a lot easier.

Change-Id: I0e16c26878e7d4399d2bf57f236523d214951a27
2022-09-01 22:09:48 +00:00
Anne Tomasevich 8e04c79dba Remove dependency on .cdx-typeahead-search--active class
This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.

Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e
2022-09-01 16:42:11 -04:00
jenkins-bot d59885cf89 Merge "Enable related tabs on Vector" 2022-09-01 20:36:15 +00:00
Anne Tomasevich eec6d5f608 Remove unneeded expansion styles from search box code
Input expansion behavior has been changed in Codex to expand
the input when the menu opens, instead of when the input is
focused. This patch removes styles targeting the server-
rendered search box that mimicked the expansion behavior
on initial focus to ease the transition between the server-
rendered version and the Vue version.

Bug: T312594
Change-Id: Id716860f52df7585c068a7927bf799129faf4ad3
2022-09-01 15:43:31 -04:00
bwang 3bf377fa7e Followup: clean up cached HTML code from T315595
Bug: T315595
Depends-on: I39959f43f20880e83bef945a7535d58cfe0b6412
Change-Id: I7afb66d6ee2d67d824266ca7240618afdd200c7f
2022-09-01 18:25:39 +00:00
bwang d949621eb2 Align header icon buttons and main content
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles

Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated

Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
2022-09-01 12:42:07 -05:00
bwang 9c6f6709c6 Create new sticky toc container
Bug: T313060
Change-Id: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
2022-08-31 21:27:06 +00:00
jenkins-bot 990c7f72b9 Merge "Reduce specificity of siteSub" 2022-08-31 20:49:55 +00:00
jenkins-bot c701486aa2 Merge "Override visited link style in MenuTabs" 2022-08-31 20:38:00 +00:00
Jon Robson 69658483bd Reduce specificity of siteSub
Follow up to I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
It should be possible to enable the #siteSub element with
a simple #siteSub { display: block; }. When moving these styles
from core we have made them more specific and harder to override

Bug: T316027
Change-Id: I4009c67e97ed0e718c28a1fa18c0059075b7a8a7
2022-08-31 13:07:58 -07:00
bwang 900376f9e4 Override visited link style in MenuTabs
Bug: T316574
Change-Id: I55b6537df709204ff499aa18298721cbec1de405
2022-08-31 19:51:14 +00:00
bwang 1c8af16dfb Replace body:not( .vector-toc-collapsed ) with .vector-toc-not-collapsed class
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Change-Id: Ib50f6e4a61a09f54763a740bd12cdae3ee63abef
2022-08-31 19:05:50 +00:00
jenkins-bot b6a6296636 Merge "Reduce dependency on core styles" 2022-08-31 18:08:26 +00:00
Jon Robson 486748ac41 Enable related tabs on Vector
Depends-On: I861e8fe9c80569224548b8569452f8c57a446998
Bug: T313409
Change-Id: I871291c91dfe1f92c1131a2403695394ef3d0533
2022-08-30 14:20:11 -07:00
jenkins-bot 0d957abf77 Merge "Handle pages without ids in typeahead search" 2022-08-29 21:46:49 +00:00
bwang 659a5244ac Handle pages without ids in typeahead search
Bug: T313658
Change-Id: I6cba07e5e49d0593280017590dfd7cadb825095a
2022-08-29 11:09:28 -05:00
jenkins-bot 748723e417 Merge "[Regression] Restore show on hover behaviour for dropdowns" 2022-08-28 23:56:38 +00:00
jenkins-bot 46b4d86477 Merge "Fix site notice spacing" 2022-08-26 20:51:43 +00:00
jenkins-bot 9b7360c0a9 Merge "Table of contents doesn't respect NOTOC after an edit" 2022-08-26 18:59:37 +00:00
jenkins-bot b69cd0fe4a Merge "styles: Unify on standard external link icon (re-applying)" 2022-08-26 16:29:22 +00:00
Moh'd Khier Abualruz 4f47c744fd Table of contents doesn't respect NOTOC after an edit
* majorly done in VE by VE team by sending empty array,
since firing an event in beneficial for removing the TOC if needed

Bug: T315863
Bug: T315862
Change-Id: I128c550f039a812dde36fcefa56334842e36fbe2
2022-08-26 16:47:16 +02:00
jenkins-bot f8c9c46a52 Merge "Table of contents toggles don't work correctly after update" 2022-08-25 18:53:53 +00:00
bwang 8ad777b896 Fix site notice spacing
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing

Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
2022-08-25 11:13:57 -05:00
Jan Drewniak 934f65ab57 Add clearfix to .mw-body-subheader
Clears the indicators and subtitle in modern Vector.

Bug: T316134
Bug: T316095
Change-Id: I49a4801320f9680c75b2bdcb6e5704e3db70b38b
2022-08-25 13:34:43 +00:00
Moh'd Khier Abualruz 6b91d66eee Table of contents toggles don't work correctly after update
* This was fixed by removing the reattachment of `SubsectionToggleListeners`, as it seems to be already attached and was double toggling on click.
* This will not work with full TOC collapse `CollapseToggleListeners` it has to be reattached for it to work

Bug: T316033
Change-Id: I756b2a929fd94d9167a7b56df668b1202e695a38
2022-08-25 14:19:37 +02:00
jenkins-bot 0e7c32827d Merge "Revert "Remove grid row gap in favor of margins"" 2022-08-24 17:13:31 +00:00
Jdlrobson 3d719455c4 Revert "Remove grid row gap in favor of margins"
This reverts commit b63244f367.

Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.

Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
2022-08-24 16:54:31 +00:00
Jon Robson dfede899d6 Reduce dependency on core styles
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Depends-On: Ib5ae640bb260cee46e654228b785c776722c7003
Bug: T316027
Change-Id: I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
2022-08-24 16:16:01 +01:00
Jon Robson 2be7ce5c47 Vector legacy no longer imports variables from Vector modern
In f7f78023e we added new variables to the Vector 2022 variables
that overrode the defaults, but forgot to preserve the defaults
in Vector legacy. This resulted in changes documented in
T213778#8181795

Going forward it makes sense to separate these.

Bug: T213778
Change-Id: I5e4f1729fc0f41b21579807fc83a7dda9c3519ea
2022-08-24 15:08:35 +00:00
Jan Drewniak 5dbc96aaee [Regression] Restore show on hover behaviour for dropdowns
Due to recent updates that affected dropdowns in modern and
legacy Vector, the dropdowns in legacy Vector were not appearing
on hover as they were intended.

Bug: T315418
Change-Id: Iad3c3d89566f211d331233a752d67744d6522af0
2022-08-24 10:33:26 -04:00
Bartosz Dziewoński 2321eeb054 Vector 2022: Align #contentSub with page title (to the left)
(Visual change)

Bug: T307715
Change-Id: Ic4a8d4d55e132cec5df720fdb38eb47c37c8baf0
2022-08-23 20:51:27 +00:00
jenkins-bot 6e30fa2c00 Merge "TOC with bold text." 2022-08-23 12:47:58 +00:00
bwang b63244f367 Remove grid row gap in favor of margins
Bug: T315595
Change-Id: Ibf837775d972deb29e9619cc6c12c919aae5155a
2022-08-22 15:49:00 -05:00
jenkins-bot 943104ae5e Merge "Remove FIXME, add variables" 2022-08-22 19:06:07 +00:00
Jon Robson fc2a899b4d Remove FIXME, add variables
These overrides are now redundant now that Vector and Vector 2022
are separate skins.

This override was technical debt, but is now causing inconsistency
in styles as a result of T315321

These are now defined in the variables file instead.

Bug: T315662
Change-Id: I7cb3e7f439daa9d1974ec414ee4c8a905b5e513f
2022-08-22 19:26:09 +01:00
Jon Robson ecbe2c2855 Layout: Restore disabling of max width on certain pages
Bug: T315460
Change-Id: I9bad936c06150cd01d4e60f4a92a5c4d28b5fe16
2022-08-22 10:34:34 +00:00
jenkins-bot 0f4c36169f Merge "[RTL, TOC] The arrow before collapsible sections in sidebar is clipped" 2022-08-22 08:31:25 +00:00
Moh'd Khier Abualruz ff73b36780 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
* Temp solution for quick fix
* Full solution should be supplied by cssjanus PR shortly after

Bug: T314652
Change-Id: Ic3ac53f884bc1b9bc14c951b7348e2bf263065a2
2022-08-22 08:13:58 +00:00
jenkins-bot 758297c5ca Merge "Fix CSS selector for 'mw:tocplace' element" 2022-08-19 21:01:01 +00:00
Volker E 19ca22f424 styles: Unify on standard external link icon (re-applying)
Re-applying: Unify on using standard OOUI 'linkExternal' icon, which is
directly replacing Vector's image without relying on ResourceLoader.
This time we have lo- and hi-dpi optimized icon.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.

Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.

Replacing images and image names to make quicker lookup with icon
collection possible future-facing.

Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.

Bug: T261391
Change-Id: I1c3cfb4cd83fe4d5d08c06b84cdc192cb90c0dfe
2022-08-19 11:41:15 -07:00
bwang 0be4664c02 Add back fixed width to main content
Bug: T315653
Change-Id: Iffd3f219e756b82397264f62fb9f88fc82a92ba9
2022-08-19 13:20:20 +00:00
Bartosz Dziewoński 7107b9d72b Fix CSS selector for 'mw:tocplace' element
The colon needs to be escaped, otherwise it is treated as an invalid
pseudoclass.

Change-Id: I328851cfbd8ab3604b89a43bc5c854d1f90b306e
2022-08-18 23:52:45 +00:00
Jan Drewniak e3896ab96d TOC with bold text.
The width of the active link is increased via calc to reduce the
chances that the line will wrap because of the bold text.

Bug: T314670
Change-Id: I58aa72871b7d80c8342df60478894dafcf448ae7
2022-08-18 17:04:30 +00:00
jenkins-bot fd4c4f5c34 Merge "TOC: Prepare for upstream change to mw:tocplace element" 2022-08-18 14:03:27 +00:00
jenkins-bot b31bea7fd9 Merge "Remove gradient from modern Vector, align SidebarAction with portlet styles and classes" 2022-08-17 21:03:35 +00:00
jenkins-bot 1f5170238a Merge "Append icon to links created via mw.util.addPortletLink" 2022-08-17 20:50:43 +00:00
bwang 5f09892813 Remove gradient from modern Vector, align SidebarAction with portlet styles and classes
Bug: T307771
Change-Id: I92fd11b89d4afbf99dd7ab51990835b9754767a1
2022-08-17 20:41:15 +00:00
jenkins-bot 2f65c4f696 Merge "Follow-up: Clean up left over vector legacy classes" 2022-08-17 20:38:49 +00:00
bwang 81d9b28be1 Follow-up: Clean up left over vector legacy classes
Bug: T313559
Change-Id: I42610ef7ccaea0b7c818f66cfbe5a316d2a5566d
2022-08-17 20:18:37 +00:00
bwang 2d6be2e6f0 Clean up main menu selectors
Change-Id: Icb7595f2ef60108f6eaf6b953f37a291678f793e
2022-08-17 14:08:46 -05:00
jenkins-bot 2450fdeb99 Merge "Prevent dropdown arrow from flipping in modern Vector" 2022-08-17 07:59:36 +00:00
bwang 9546bd30c0 Prevent dropdown arrow from flipping in modern Vector
Bug: T314669
Change-Id: Icaae181cac1b399d9c0e90c55c7ee36982b638d3
2022-08-16 16:13:55 -05:00
Jan Drewniak 936bb1d739 Append icon to links created via mw.util.addPortletLink
For modern Vector, the preferred way to place an icon
beside a link is with a dedicated <span> element instead
of a `:before` pseudo-element.

This change appends a <span> element with an icon to
links created by mw.util.addPortletLink instead of
using the `.mw-ui-icon-before` class.

Bug: T314798
Change-Id: I019470d9ca38a6bd63a690882bed03b5f1ac03c4
2022-08-16 15:50:34 -04:00
Volker E f7f78023e9 styles: Update Vector 2022 link colors to conform to WCAG requirements
Follow Web Content Accessibility Guidelines and
use Wikimedia Design Style Guide colors with
at least 3:1 contrast with surrounding body text.

Also unify external and normal links as the color difference is
basically opaque to understand beyond a small group of power users.

Bug: T213778
Bug: T315321
Change-Id: I8a309eedd70b9a82fcca91c2cf9a30beea602b6b
2022-08-16 17:56:07 +00:00
jenkins-bot 8c3a4792e9 Merge "[ToC] Show new/modified sections after publishing an edit (new floating ToC)" 2022-08-16 08:37:30 +00:00
Jon Robson 6df60895ab TOC: Prepare for upstream change to mw:tocplace element
Bug: T311502
Change-Id: I1f607cf1ef1b61fb4d2e1880de756fb94d5a6b22
2022-08-16 07:04:27 +01:00
Moh'd Khier Abualruz 407046c759 [ToC] Show new/modified sections after publishing an edit (new floating ToC)
- All Frontend
- All in Skin

Bug: T307251
Change-Id: Icae2f03f0005b7607448127b793ff3c0010e5817
2022-08-15 20:02:49 +00:00
Jon Robson 6cd7098d05 [ToC] Content should be centered when TOC is collapsed
Bug: T314579
Change-Id: I8d182893267f740457b7233c38aa4615f08b814f
2022-08-15 14:53:54 -05:00
jenkins-bot 15ed1cf0e1 Merge "Prevent collapsed dropdowns from having height." 2022-08-15 19:31:24 +00:00
bwang 8eff2d0501 Follow up: Remove .vector-layout-grid, .mw-workspace-container classes
Bug: T313559
Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
2022-08-15 10:10:01 -05:00
jenkins-bot e367136406 Merge "Revert "styles: Set background-repeat: no-repeat for menu tabs"" 2022-08-11 13:11:06 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
jenkins-bot 310bf970bd Merge "Remove .mw-ui-button styles from user-links overflow menu" 2022-08-10 07:39:39 +00:00
jenkins-bot 177e57b794 Merge "Refactor TOC A/B test to bucket users on backend" 2022-08-09 10:28:39 +00:00
Jan Drewniak 5676097135 Remove .mw-ui-button styles from user-links overflow menu
Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
2022-08-08 22:12:07 -04:00
Clare Ming eb597645c3 Refactor TOC A/B test to bucket users on backend
- Include temporary feature requirement for TOC A/B test.
  - Assumes 100% of logged-in users with even/odd user ids
  being assigned to treatment/control buckets respectively.
  - Sampling rates passed in by config are not considered
  during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.

Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.

Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
2022-08-08 15:50:28 -06:00
Jan Drewniak 942cd5b0f6 Sticky header AB test bucketing for 2 treatment buckets
For idwiki/viwiki, we wish to run the sticky header edit button AB
test so that treatment1 group sees the sticky header without edit
buttons, treatment2 groups sees the sticky header with edit buttons,
and the control/unsampled groups see no sticky header at all.

This patch overrides the configuration to make the sticky header
w/o edit buttons for treatment1, sticky header w/ edit buttons for
treatment2, and hides sticky header for everyone else. This depends
on a configuration with the treatment groups having "treatment1"
and "treatment2" as substrings in their bucket names.

The full configuration for idwiki/viwiki would be something like
the following:

```
$wgVectorStickyHeader = [
	"logged_in" =>  true,
	"logged_out" => false,
];

$wgVectorStickyHeaderEdit = [
		"logged_in" => true,
		"logged_out" => false,
];

$wgVectorWebABTestEnrollment = [
	"name" => "vector.sticky_header_edit",
	"enabled" => true,
	"buckets" => [
		"unsampled" => [
			"samplingRate" => 0
		],
                "noStickyHeaderControl" => [
                        "samplingRate" => 0.34
                ],
		"stickyHeaderNoEditButtonTreatment1" => [
			"samplingRate" => 0.33
		],
		"stickyHeaderEditButtonTreatment2" => [
			"samplingRate" => 0.33
		]
	],
];
```

Bug: T312573
Change-Id: I15c360fdf5393f5594602acc33b5b916e904016d
2022-08-08 21:14:02 +00:00
bwang d4d50d2dc5 Fix grid blowout bug
Bug: T314756
Change-Id: If1a84f5c3606dab7195a9b0a320e416fba702027
2022-08-08 18:19:23 +00:00
jenkins-bot 0a7588f55b Merge "Remove vector-layout-legacy styles and grid feature flag" 2022-08-08 17:13:42 +00:00
Jan Drewniak 4bafaa2453 Prevent collapsed dropdowns from having height.
Collapsed dropdowns are hidden via `opacity:0;` and
`visiblility:hidden;`. This doesn't prevent them from having a
height, which can be an issue when the language selector is
at the bottom of the page, producing a large gap near the footer.

Bug: T314546
Change-Id: Iec5d78469c8d5e10bd78e5d062f9e46a54fb3a98
2022-08-08 10:39:29 -04:00
Jon Robson 8a46797eec Express sidebar width in pixel for font size
Bug: T313817
Change-Id: Ic8917bf14eb688f84ca8dfbaea055f93fe829469
2022-08-08 08:25:21 +00:00
bwang ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +00:00
jenkins-bot f366c2ad9c Merge "Fix collapsible user links issue on tablet breakpoint" 2022-08-08 08:20:21 +00:00
bwang 64566249a3 Fix collapsible user links issue on tablet breakpoint
Bug: T314757
Change-Id: I595d27a03bd607f5b2ab8230e4931a1124222312
2022-08-08 07:59:50 +00:00
Clare Ming 5b55a2f894 Minor fixes to TOC hide/show buttons
Bug: T307901
Change-Id: I37c6b3b4c5c20e914423c311795dbccce2a7b3fd
2022-08-04 15:20:58 -06:00
Jdlrobson 86f39007fb Revert "styles: Set background-repeat: no-repeat for menu tabs"
This reverts commit 1f94104cdf.

Reason for revert: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7 would
be a more future proof solution to this problem.

Depends-On: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7
Change-Id: Ie09ccad772e25689c89608bba73c5248a55b4a7d
2022-08-04 17:29:56 +00:00
jenkins-bot 1a2b6d59a5 Merge "UserLinksLegacy: Move layout rule into UserLinks rule" 2022-08-04 12:14:43 +00:00
jenkins-bot 6a92bad382 Merge "styles: Set background-repeat: no-repeat for menu tabs" 2022-08-04 12:10:25 +00:00
Jon Robson 0be8fe1534 UserLinksLegacy: Move layout rule into UserLinks rule
This is component CSS, not a general layout rule

Change-Id: I3b49989b3265b336810beca2e07f68020600f888
2022-08-04 11:54:44 +00:00
jenkins-bot 4f4317c708 Merge "Only apply sticky header offset if it is showing sticky" 2022-08-04 08:08:46 +00:00
bwang e1e9552bf3 Followup contentSub contentSub2 styling
Bug: T311421
Change-Id: I4319142361b83758bbbe3c1a22e9b6ccab47352d
2022-08-03 20:57:35 +00:00
jenkins-bot a4949503f6 Merge "Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2" 2022-08-03 20:16:51 +00:00
jenkins-bot c71bd6a27b Merge "Followup to ce007e0 - Unify dropdown styles" 2022-08-03 19:04:52 +00:00
Andre Klapper 1f94104cdf styles: Set background-repeat: no-repeat for menu tabs
Images are used e.g. by the ProofreadPage extension.

Bug: T314028
Change-Id: I278fff4f02dd91effe5d8ace2f4a21a437a5114b
2022-08-03 19:00:01 +00:00
jenkins-bot 4aeaf4a428 Merge "Ensure collapsible TOC is closed when links are clicked" 2022-08-03 03:15:25 +00:00
bwang b89307c6bb Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2
Visual changes:
- Reduced spacing above #siteSub
- Updated spacing from #contentSub and #contentSub2

Bug: T311421
Change-Id: I7fd78d2c92007b231cfc49af0fbd02a4f74f3901
2022-08-03 01:14:30 +00:00
Jan Drewniak 4aa5602c52 Followup to ce007e0 - Unify dropdown styles
Provide better compatibility with gadgets that create dropdowns
like Twinkle by explicitly setting the font-weight and font-size
on `.vector-menu-heading`.

This is needed because in legacy Vector, menu headings
were <H3>'s, which have bold text and a larger font size.

Bug: T312157
Change-Id: Ic414cef4c7145740812e590f431294bc85a405b4
2022-08-02 16:57:02 -04:00
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

Bug: T306662
Change-Id: I371bb11903d8cdd8f0da89266fcf549050c0da8c
2022-08-01 20:18:46 +00:00
Clare Ming 1d1585d214 Add feature to hide/show collapsible TOC above desktop
- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
jenkins-bot 9e0d9ebcd4 Merge "Unify dropdown styles" 2022-07-28 21:26:23 +00:00
Jan Drewniak ce007e059e Unify dropdown styles
This affects all dropdowns in Vector 2022, including the
user menu in the header and the language variants and
"more" menu in the article toolbar.

By relying on shared styles instead of separate implementations,
this change also reduces the size of the skins.vector.styles
module by 1.6kB (uncompressed).

Visual changes:
- The links in the user menu are now blue
- Dropdown links in the user menu and tabs are blue
- The dropdown labels in the tabs are black not dark gray.

Bug: T312157
Bug: T308344
Change-Id: I002d5454838a5516b6ee6c7c38721209ed28508b
2022-07-28 16:41:39 -04:00
Jdrewniak c035d8babd Revert "styles: Unify on standard external link icon"
This reverts commit cffd494107.

Reason for revert: Reverting due to how the new icon doesn't scale well at 2x resolution. https://phabricator.wikimedia.org/T261391#8111726

Bug: T261391
Change-Id: I6d49fed2b9e249de15cf40216c01153c7b793ee2
2022-07-28 14:43:51 +00:00
jenkins-bot ee91a813d3 Merge "styles: Replace LanguageButton variable nomenclature" 2022-07-27 20:28:18 +00:00
jenkins-bot e4b4f5bf9f Merge "Show ULS button when article exist only in single language" 2022-07-27 20:22:02 +00:00
jenkins-bot 225efaaabb Merge "Page toolbar visual tweaks and code clean up" 2022-07-27 19:40:17 +00:00
jenkins-bot 3fb45cfc14 Merge "Hide TOC button on print" 2022-07-27 17:33:28 +00:00
bwang 7b34e14d25 Page toolbar visual tweaks and code clean up
Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content

Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
2022-07-27 17:10:22 +00:00
jenkins-bot 54ac78bba0 Merge "Make site banner full width in grid layout" 2022-07-27 16:57:05 +00:00
Clare Ming 7a63671b51 Hide TOC button on print
Bug: T313298
Change-Id: Ibf5281ce9deabc32f59df9c088af6dcb29b86ddf
2022-07-27 10:24:19 -06:00
bwang 320175d22c Make site banner full width in grid layout
Bug: T312749
Change-Id: Ia888615762a641f98409b11c6448a32897c4c835
2022-07-27 10:01:49 -05:00
jenkins-bot 8e36c72144 Merge "Add "Add topic" button to sticky header" 2022-07-26 22:36:04 +00:00
jenkins-bot 77bd2e5fbd Merge "Sticky header: Add a link to the 'subject' page when on talk pages" 2022-07-26 22:36:01 +00:00
Ed Sanders 23a5261ef6 Add "Add topic" button to sticky header
Bug: T304187
Change-Id: Ib497eb91ec7548e2ba6d1d474a196ada770f955d
2022-07-26 22:15:02 +00:00
jenkins-bot aa925d01d9 Merge "Define non-standard colors for legacy Vector" 2022-07-26 21:27:45 +00:00
bwang e5251a1448 Ensure collapsible TOC is closed when links are clicked
Bug: T310828
Depends-on: I2783928740e6a0684476a642f812cc6647be8e3f
Change-Id: I0bab194465f89637eecb43590eb8d29b5f2fd7d2
2022-07-26 19:03:16 +00:00
Derk-Jan Hartman e7f0106917 Only apply sticky header offset if it is showing sticky
Only apply sticky header offset to mw-sticky-header-element if the
header is actually sticky, currently at min-desktop-width of 1000px

Bug: T313187
Bug: T313619
Change-Id: I081c694b263a68498468b837cffa1cbea136d36f
2022-07-26 17:57:46 +00:00
Volker E ee7f59171f styles: Replace LanguageButton variable nomenclature
`height-lang-button` => `height-button-lang`
First component, then subtype.

Bug: T313243
Change-Id: Icd053cb64ef0af84b37e27b0dbfc0e8ceb521863
2022-07-26 07:46:42 -07:00
Volker E 23b1fb3b45 icons: Amend external link icon for lo-dpi screens
Following-up I05b832a36e8, which has seen the right canvas of 12x12, but
an older, incorrect version of the icon not perfectly optimized for
the lo-dpi screens.

Bug: T261391
Change-Id: Ia0054372c4d3bd5bb7e4b24a8f412bcaf6bcd80b
2022-07-25 16:09:09 -07:00
jenkins-bot 9fc2f4403e Merge "Update CSS to allow TOC to be collapsed at larger viewports using grid" 2022-07-25 21:41:42 +00:00
jenkins-bot a32a2cc322 Merge "[Refactor] Split MenuDropdown.less for modern and legacy" 2022-07-25 20:39:05 +00:00
Jan Drewniak 697b5deeda [Refactor] Split MenuDropdown.less for modern and legacy
Splits MenuDropdown styles into modern and legacy styles.

Leaves a common MenuDropdownCheckbox.less file (for lack
of a better name) for common styles related to the checkbox
behaviour and dropdown menu resets.

Adds a new file in common/mixins.less for a shared
dropdown mixin.

Bug: T312157
Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
2022-07-25 20:20:18 +00:00
Ed Sanders c9a04099d0 Sticky header: Add a link to the 'subject' page when on talk pages
The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
2022-07-22 22:24:38 +01:00
jenkins-bot 95ce5900bf Merge "Enable sticky header on article and user talk pages" 2022-07-22 21:16:41 +00:00
bwang 4511b94b21 Update CSS to allow TOC to be collapsed at larger viewports using grid
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.

Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)

Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
2022-07-22 20:59:14 +00:00
Jan Drewniak 34a8bc6690 [Regression] Restore proper watchstar icons in Vector 2022
Wrong watchstar icons were specified when splitting the watchstar
into modern and legacy Vector in 3c0559a7.

Change-Id: Ice369f5d81818b093014cf508c2d4336c66368ed
2022-07-22 15:29:04 -04:00
Ed Sanders acc4b3c413 Enable sticky header on article and user talk pages
Don't show the talk page link on talk pages themselves.

Bug: T304188
Bug: T309424
Change-Id: I5f4c9373c18d65245416cc3f5b603381abc3de1c
2022-07-22 17:22:24 +01:00
Santhosh Thottingal 40f6c5e29d Show ULS button when article exist only in single language
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.

Show the language selector so that options like translate, interlanguage
links, language settings can be shown.

Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
2022-07-21 16:28:22 -07:00
bwang 2d9585c8e3 Table of contents: Update TOC styles
Visual changes:
* Changes to table of contents text alignment and padding

Bug: T312156
Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
2022-07-21 22:30:35 +00:00
jenkins-bot 6ecbd5e970 Merge "Refactor chevron across components + separate watchstar" 2022-07-21 22:01:49 +00:00
Jon Robson 96a12622c2 Define non-standard colors for legacy Vector
Bug: T213778
Change-Id: I7e350c1d6d6c584ce97d210a9d62190a453693c4
2022-07-21 21:31:31 +00:00
jenkins-bot 64f724903e Merge "Remove Table of Contents feature flag" 2022-07-21 20:06:45 +00:00
Volker E 3315b33217 styles: Make external icon indicator size for lo-dpi environments
Using indicator 12x12 canvas, following up Ibd15517f3adf, to cater to
lo-dpi screens.
We've already had that canvas in the original patch, but in the first
new patch left it behind.

Bug: T261391
Change-Id: I05b832a36e89f6d75ab4f620b8db60b6eb578f73
2022-07-21 12:25:29 -07:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.

Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
2022-07-21 12:41:39 -06:00
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:

- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header

Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.

The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.

This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.

NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.

Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
2022-07-21 10:14:21 -04:00
jenkins-bot e83ca244af Merge "styles: Unify on standard external link icon" 2022-07-21 00:07:17 +00:00
jenkins-bot 0bb47ce2e2 Merge "styles: Remove linear-gradient hack for non-supported browsers" 2022-07-20 23:40:23 +00:00
jenkins-bot 966975ea2c Merge "styles: Replace IE hack list-style: none none" 2022-07-20 23:36:07 +00:00
Volker E d365148f8d styles: Replace IE hack list-style: none none
Hack has first been introduced in I7d4b075ac90 more than 4 years ago.
It has been introduced to tackle IE <=8.

Bug: T306486
Bug: T308344
Change-Id: Ie84a177f79d226be98298a42ebfdd447e33a1372
2022-07-20 22:20:15 +00:00
Volker E 46514f2d2e styles: Remove linear-gradient hack for non-supported browsers
`linear-gradient` hack was necessary for browsers, that weren't
supporting SVGs.

Bug: T306486
Bug: T308344
Change-Id: Ie61ba7955ece62015436d2aee44a66bacf42e552
2022-07-20 12:40:41 -07:00
jenkins-bot 22969cb39d Merge "styles: Remove IE9 Flexbox fallback" 2022-07-20 16:45:37 +00:00
jenkins-bot 02451be660 Merge "search: Mark App.vue as being compatible with Vue 3" 2022-07-20 16:38:34 +00:00
jenkins-bot caf0221164 Merge "styles: Replace @top-margin… with @margin-top… variable names" 2022-07-20 16:38:32 +00:00
Volker E 2d0428b02a styles: Remove IE9 Flexbox fallback
IE9 is out of basic supported browsers, so removing this fallback.
Also using “Flexbox” as standard term in comment.

Bug: T306486
Bug: T308344
Change-Id: I6fcb0c4b54fea3d05593ae294c05e046131c93d2
2022-07-20 08:13:00 -07:00
Volker E cffd494107 styles: Unify on standard external link icon
Unify on using standard OOUI 'linkExternal' icon, which is directly
replacing Vector's image without relying on ResourceLoader.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.

Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.

Replacing images and image names to make quicker lookup with icon
collection possible future-facing.

Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.

Bug: T261391
Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473
2022-07-20 04:41:14 -07:00
Roan Kattouw 21b9dda2a2 search: Mark App.vue as being compatible with Vue 3
This doesn't change any behavior, it just suppresses a compatibility
warning and ensures that future changes to this file won't introduce
code that relies on Vue 2 compatibility features.

Change-Id: Id15af7d5d5035f59dc8f402f00d8f7f0d73a77f7
2022-07-19 16:23:06 -07:00
Jan Drewniak d709bb5606 Update to 4ab2b1bf: Refactor Vector tabs layout
Removes a height:100% rule that was causing a shift in layout.

Change-Id: I7b29ba201e9937174852ba0d7919fd65e530851f
2022-07-19 17:24:05 -04:00
Volker E 0c7cc69e30 styles: Replace @top-margin… with @margin-top… variable names
Bug: T313243
Change-Id: Ibdcc50d2a67074bc7b3f28c58baf73ad39db922d
2022-07-19 12:16:28 -07:00
Volker E 048e40d0bf styles: Remove divider image fallbacks for now non-basic support browsers
Removing old PNG divider fallbacks, which were included for IE9, old
Firefox and Chrome browsers and are not mission critical even when not
rendered to unknown browsers.

Bug: T306486
Bug: T308344
Change-Id: I8a6622237a1cbb8116930a12e632329618d5c291
2022-07-19 18:29:09 +00:00
Jan Drewniak 4ab2b1bff1 Refactor Vector tabs layout for reduced size & complexity
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
  and #left-navigation tab elements with floats.
  Then for vertical alignment, sets the child <li> elements and
  <a> elements to inline block.

Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
  but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
  Vector 2022, which previously applied to H3 labels in the
  sidebar, which are no longer targeted by the styles in
  MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
  ArticleToolbar.less

This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.

Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right

Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]

NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.

NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.

Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
2022-07-19 13:26:49 -04:00
jenkins-bot 1ebf8c148d Merge "styles: Use default border-width and border-style vars" 2022-07-19 16:46:31 +00:00
jenkins-bot f7979192a8 Merge "styles: Apply @background var to Sidebar background" 2022-07-19 16:45:21 +00:00
jenkins-bot 9f7f292a6f Merge "styles: Rename border-tabs to border-bottom-tabs" 2022-07-19 16:45:17 +00:00
jenkins-bot 9a177a2f8f Merge "styles: Use mediawiki.skin.variables transition-duration vars" 2022-07-19 16:43:32 +00:00
jenkins-bot 22b4e4f31a Merge "styles: Replace distinct color var with standard variable" 2022-07-19 16:43:30 +00:00
jenkins-bot 3c8796ee04 Merge "Search: Use Codex and Vue 3 instead of WVUI and Vue 2." 2022-07-19 15:18:29 +00:00
Volker E 8d21f557c1 styles: Use default border-width and border-style vars
Bug: T313243
Change-Id: I8e40fbcff3d739318f6a53104128ed52ef8f294f
2022-07-19 05:11:39 -07:00
Volker E fca7726a17 styles: Apply @background var to Sidebar background
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.

Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
2022-07-19 04:35:09 -07:00
Volker E b62f7fa4dd styles: Rename border-tabs to border-bottom-tabs
And use `@border-width-base` var.

Bug: T313243
Change-Id: Ic5febd54a6f28ef8998f4278589b08c6e5977d9f
2022-07-19 04:24:33 -07:00
Volker E 026b19925e styles: Use mediawiki.skin.variables transition-duration vars
Bug: T313243
Change-Id: Ic592dfe0a8711f33196d84a222ffa1d6214545e8
2022-07-19 04:19:08 -07:00
Jdlrobson 5599cf23af Revert "Refactor Vector tabs layout for reduced size & complexity"
This reverts commit 0c5e6ed9fe.

Reason for revert:  I was so focused on testing the current layout
I forgot to test the more important grid layout, which is being
deployed this week. The "from mediawiki" tagline is overlapping
with the tabs.

Change-Id: I3c53a8d243caf84e5c2766d730ced3d7da345026
2022-07-18 23:28:01 +00:00
Jan Drewniak 0c5e6ed9fe Refactor Vector tabs layout for reduced size & complexity
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.

Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
  and #left-navigation tab elements with floats.
  Then for vertical alignment, sets the child <li> elements and
  <a> elements to inline block.

Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
  but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
  Vector 2022, which previously applied to H3 labels in the
  sidebar, which are no longer targeted by the styles in
  MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
  ArticleToolbar.less

This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.

Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right

Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]

Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I77f3dd8e8ccfe3a1d9693746106d9783cc0d38b9
2022-07-18 22:34:11 +00:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar

[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
  accordingly
- Remove dependence on WVUI and use Codex instead, via the special
  `@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
  takes in props related to the search client or fetch start/end
  instrumentation. Instead, directly use the restSearchClient
  and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
  code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
  included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
  searchBox styling to prevent jankiness when the searchBox is replaced
  with the Codex TypeaheadSearch component

The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.

Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
2022-07-18 12:54:47 -07:00
Volker E d4b205e149 styles: Replace distinct color var with standard variable
To safely looking forward to standard Codex tokens.

Bug: T313243
Change-Id: I3ed5dedab2b5f2edc2b1da13d07e21b77791f08a
2022-07-18 11:17:16 -07:00
Volker E a651d5e86b styles: Remove obsolete variable
Following-up Idf943449b5e4.

Bug: T308344
Change-Id: I06588d42e3e5c95248886df33ddda45d4f1eaf1f
2022-07-14 07:21:12 -07:00
jenkins-bot 1be236aa5a Merge "TOC: CSS clean up and spacing fix" 2022-07-11 21:05:05 +00:00
Jon Robson a3905e9acd CSS cleanup: Revise CSS that is no longer needed per FIXME guidelines
Bug: T311773
Bug: T308344
Change-Id: Idf943449b5e4358749be47435b3032215e533353
2022-07-11 15:43:44 +00:00
jenkins-bot 4df9e30757 Merge "Restore #siteSub font size" 2022-07-08 21:35:22 +00:00
bwang 42f863a936 TOC: CSS clean up and spacing fix
- Update TOC bottom padding to match spec in T304166.
  Before (30px): https://phabricator.wikimedia.org/F35312302
  After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less

Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
2022-07-08 19:36:19 +00:00
bwang f0955e8ae3 Restore #siteSub font size
Bug: T311421
Change-Id: I9c6d66f91c071a23e02d646ace143f9605354eae
2022-07-08 19:26:03 +00:00
Clare Ming c18c9856b5 TOC scrollbar should not fade
Bug: T311436
Change-Id: I50e2d82982515f045596c1a19dd7f9932cde25ef
2022-07-08 13:03:39 -05:00
Jon Robson e8130d6628 Layout: Fixes table of contents alignment issues
This patch also adds some grid variables to be reused

Bug: T311793
Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
2022-07-05 21:11:47 +00:00
jenkins-bot 197fab6905 Merge "Remove tablet specific styles for collapsed TOC, and misc CSS clean up" 2022-07-01 17:53:35 +00:00
bwang a84549f243 Remove tablet specific styles for collapsed TOC, and misc CSS clean up
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open
https://jmp.sh/xZhkU6q

No pixel regressions

Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
2022-07-01 15:25:34 +00:00
Jon Robson d8a66f0d49 Layout: Fixes content alignment issues
Bug: T311793
Change-Id: I256750d546e2ab818bca1f153a2b6a675db79a54
2022-07-01 14:54:10 +00:00
Jon Robson bcb6ca36ba Layout: Fixes header margin between search and user links
Restore header margin between search and user links, as its
still needed for grid (Fixes F35282398)

Bug: T303484
Change-Id: Ie8cf4adcadff430ebfc675029635e6c22061b238
2022-06-30 16:03:28 -07:00
Jdlrobson e16a8e4775 Revert "Layout: restore sticky toc behavior by adding additional TOC container"
This reverts commit 3a26cc220c.

Reason for revert: Pixel flagged a UI regression relating to this change https://phabricator.wikimedia.org/F35291665

Change-Id: Id0b3d13da7dfbd8a55605e9f1fae157fe45abd2f
2022-06-30 22:53:19 +00:00
bwang 3a26cc220c Layout: restore sticky toc behavior by adding additional TOC container
Fix sticky behavior changed by impacted by e23fc1f

Change-Id: I7ead5e1d5954f772a533e1116f8c55d2d9cfd143
2022-06-30 21:40:14 +00:00
Jon Robson 615181154c Layout: Grid columns are restricted to desktop views
On tablet, where the table of contents is hidden, the
sidebar should take up the full screen when open.

Fixes Pixel regression
MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png

Bug: T303484
Change-Id: Ie0aa9f661a652e137d691a1fa4b05e69f0c5f8ab
2022-06-30 20:30:20 +00:00
bwang e23fc1fe11 Grid: fix footer styles
Fixes https://phabricator.wikimedia.org/F35289862

Change-Id: If14bfb357d077ebd3886ce7290f0d46d19588dc6
2022-06-30 13:34:25 -05:00
jenkins-bot 9d7b62b85d Merge "Layout: Use sibling selectors rather than adjacent sibling" 2022-06-30 15:10:58 +00:00
Jon Robson 79403a87e3 Fixes Content sub unreadable in Vector 22
Bug: T311564
Change-Id: Id9c3693796a197f4cacf6fee902b553ba077dc71
2022-06-30 00:52:24 +00:00
Jon Robson 9ac4fbb165 Layout: Use sibling selectors rather than adjacent sibling
Fixes MediaWiki_Main_Page_vector-2022_0_viewport_1_tablet.png
UI regression

Additional change:
- Remove inactive selector - nothing matches this media query

Bug: T303484
Change-Id: I25a21ed54189dd1ca371a0755eb4d726b20f965f
2022-06-29 23:12:42 +00:00
bwang 73ecf0f4f3 Refactor some max-width media queries to use min width
Bug: T310536
Change-Id: I900c2446b64533775b37d6e0a0ce781ab0ff890a
2022-06-29 18:09:19 +00:00
jenkins-bot e952a051c3 Merge "Cleanup ArticleToolbar grid styles" 2022-06-29 17:34:00 +00:00
bwang fabd2d6579 Cleanup ArticleToolbar grid styles
Change-Id: I0a0444cbbd460340b7bf000535d4cca252e58f2f
2022-06-29 11:19:38 -05:00
Jon Robson 257430ec13 Layout: Fix footer margin
Since CSS grid uses row-gap we need to decrease
the margin we used in the legacy layout to keep these
the same

Bug: T303484
Change-Id: Ib28f0d5ee0afbb809591c99ef18cd3cbecf1f800
2022-06-29 08:33:36 -07:00
Jon Robson 11618b5d81 Grid: Add table of contents to grid
Bug: T303484
Change-Id: Ic854b34b739b59e2d1efd864a711c961548f079f
2022-06-29 00:00:06 +00:00
bwang 8a88f61e89 Introduce media query breakpoint variables and replace all media query usage with new variables
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:

[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)

[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)

Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
2022-06-28 23:19:52 +00:00
bwang 4ab798441e Refactor SkinVector to use Hooks::updateMenuItems code to process menu data
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.

Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
2022-06-28 21:53:51 +00:00
Jon Robson 82f0433a11 Layout: Align content with hamburger icon
Content should always be aligned with the hamburger icon in the
new design between the tablet and desktop breakpoints.

Fixes: F35282438

Bug: T303484
Change-Id: I15215703d6392cd69ec57212d25c9a52149a6ac0
2022-06-28 00:07:34 +00:00
jenkins-bot 63e6daeb53 Merge "Fix table of contents when sidebar is open" 2022-06-27 23:36:00 +00:00
Jon Robson 89d9cf76b0 Remove hover and focus states on article toolbar links
Bug: T310886
Change-Id: I3b75d461ff0298e1ca3707e2cf4e79fd3db6497a
2022-06-27 22:26:03 +00:00
Jon Robson 393928a280 Fix table of contents when sidebar is open
Bug: T309807
Change-Id: If370246d13984981f4c3477fda2b2dce45337d91
2022-06-27 15:01:18 -07:00
Jon Robson 5beadc4bc2 Layout: Don't hide footer < 1000px when sidebar closed
The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.

When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.

Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
2022-06-25 00:03:41 +00:00
bwang 61e723c541 TOC: Ensure TOC spacing is correct when grid is enabled
Fix usage of CSS calc

Change-Id: I6dcf3751a4b478a14d8052a70720e138238203d3
2022-06-24 23:09:50 +00:00
Jon Robson ec6b6ebd9a Revise margin collapsing rules with new layout
Follow up to 97783e5

Bug: T311283
Change-Id: Ia0581713fd182b9236e398a2453efd06ce8b9f1f
2022-06-24 15:55:08 +00:00
Jon Robson 49c8b5f514 [Fix] Adjustment to legacy menu templates
Follow up to c5cfd4d

1) Partial paths are incorrect
These are not a problem with our current Mustache template
parser but could break with any changes in our PHP implementation

2) Add dedicated class to legacy menus

On the longer term this will allow us to further separate the
old and new CSS.

Change-Id: I056b033855c28f919a4af99784620503f10b9dcb
2022-06-22 22:42:39 +00:00
jenkins-bot bf117d1fc8 Merge "Restore sticky header class and update TOC styles" 2022-06-22 20:34:07 +00:00
Clare Ming 75cc9bdcd9 Restore sticky header class and update TOC styles
Bug: T311170
Change-Id: Ib12b6f79a20b2a25b49110e5a7de59d199917dc9
2022-06-22 14:46:07 -05:00
Jon Robson 25c3fc1863 Table of contents: Cached HTML is no longer a problem
Bug: T307900
Change-Id: Ic03bc15b8a15d6d095130c8346c399a2ac93d955
2022-06-22 18:17:52 +00:00
Jon Robson e1942cec4e Fix sticky header edit icons during A/B test init
- Add test case for T310750

Bug: T310750
Change-Id: Ie52a7227f337dd6cdb0ab441986aa2be6139f949
2022-06-22 09:38:19 -06:00
bwang f473129485 Add support for floating TOC lower down the page
This patch only handles the first case listed in the task description

Bug: T308689
Change-Id: I4e7dbded7a8206633a98653aaf4ced3fd2b6f69d
2022-06-21 16:02:11 +00:00
jenkins-bot 42127622dc Merge "Show scrollbars in sticky TOC" 2022-06-17 15:57:37 +00:00
jenkins-bot 0fff66b638 Merge "Add a URL parameter to edit links in the sticky header" 2022-06-16 18:00:37 +00:00
Clare Ming b6e76eb797 Show scrollbars in sticky TOC
Bug: T310540
Change-Id: I36af416901f9fde268f59a3e3fd690b743748514
2022-06-16 10:19:04 -06:00
David Lynch 734902811a Add a URL parameter to edit links in the sticky header
Briefly add it onto the originals when the click is being proxied so
that VE can pick up on it.

Bug: T309364
Change-Id: I871494b6e783018b1433f294e09b0d53dded6c3d
2022-06-15 18:20:59 -05:00
Clare Ming 536e53af7a Minor adjustments to collapsible TOC
Bug: T307900
Change-Id: Iec0c5c6e3dbede85e549fc9558b9d5c7be4fa10d
2022-06-15 09:56:27 -05:00
jenkins-bot def2a366bc Merge "[Regression] Revert border color of page title." 2022-06-14 22:20:23 +00:00
jenkins-bot 27a23465da Merge "Fix sticky header searchbox width and misc searchbox CSS cleanup" 2022-06-14 22:01:52 +00:00
bwang b6e7b5e880 Fix sticky header searchbox width and misc searchbox CSS cleanup
Bug: T310366
Change-Id: Id403f818b19747e3279df3112d93301f31323f9d
2022-06-14 15:58:53 -05:00
jenkins-bot 8d41918b6d Merge "Update checkbox.js comments" 2022-06-14 16:49:56 +00:00
Jan Drewniak 011a7b273b [Regression] Revert border color of page title.
Reverts the border color of the page title introduced in
I5d807f09bfbbceaded756daa78dbb023efcc91dc

Bug: T310533
Change-Id: I877f91bcd4c0915cc495b5237a53bda6ad971497
2022-06-13 14:38:09 -04:00
bwang 61c571ffb5 Update checkbox.js comments
Change-Id: I44d2087fefb28adf20c7ff938cff411cb0678a7e
2022-06-13 11:32:34 -05:00
Jon Robson 5fdd66fa3b Disable table of contents toggle on VE activation
While the table of contents is not updated by VisualEditor
we should hide it.

Bug: T307900
Change-Id: I246fbe0069329ef78735147b8d3f280433155158
2022-06-10 15:39:21 -07:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
jenkins-bot 98cffb3f19 Merge "[Refactor] Generalize checkbox hack code" 2022-06-10 21:39:05 +00:00
jenkins-bot 677684d839 Merge "[Refactor] Separate sidebar persistence code from checkbox hack code" 2022-06-10 21:37:49 +00:00
Jon Robson 10810ec1da [Refactor] Generalize checkbox hack code
Allow it to apply to any appropriately marked up checkbox hack
element.

Change-Id: Ic3770877ee8e92574900715413a51acc964741be
2022-06-10 13:56:56 -07:00
Jon Robson de0729e604 [Refactor] Separate sidebar persistence code from checkbox hack code
Change-Id: I5d7d8897f656419a71b1327c37e88c9dd7f0767c
2022-06-10 13:55:22 -07:00
bwang e9ea4cee29 Hide TOC in print mode and clean up other print styles
Bug: T306719
Change-Id: I706225e01d1cc09bd387a008b56d9c2dcf8bdf4f
2022-06-09 19:15:27 +00:00
bwang d6e1dbd843 Move menu border style to legacy
Bug: T309398
Change-Id: Idfd88d98cb51ee35a359eef90ed54bc0a9feea87
2022-06-08 21:23:23 +00:00
jenkins-bot d91c921daa Merge "Make footer take up full width" 2022-06-08 19:33:12 +00:00
Jan Drewniak c5cfd4dce8 Restyle Vector tabs in modern Vector
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.

Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
2022-06-08 11:26:17 -07:00
Jon Robson c9fe4e83a1 Make footer take up full width
Bug: T293443
Change-Id: I0cea23fc6f7e013900211f10cc3da4066acf4d0c
2022-06-08 14:48:40 +00:00
Jon Robson 664b6c5cc5 [Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-07 17:23:08 +00:00
Jon Robson e4aaf02ce8 [Grid] Move header rule into search rules
This will also apply to the grid layout so this seems a more
appropriate place, given the class relates to search.

Bug: T303484
Change-Id: Ib5b57fd948ecb5eefbf1d66e0e71045aed6e3102
2022-06-06 19:24:09 +00:00
jenkins-bot 3bc8b3a40e Merge "[Grid] Remove vector-layout-legacy selector from sidebar rules" 2022-06-03 22:05:34 +00:00
Jon Robson e801f917ae [Grid] Remove vector-layout-legacy selector from sidebar rules
These should actually be retained in the new design.

Bug: T303484
Change-Id: Ie1755e3cf5dec5da64615084ddc815fab7eb8bb1
2022-06-03 21:29:55 +00:00
bwang c45a4dd1e1 Add back search title to WVUI component
Bug: T291671
Change-Id: I30a917b4392256c0d23e57da882e0a1dc7b59562
2022-06-03 19:08:47 +00:00
Jon Robson deb54f9452 Correctly hide the sticky header when it is not in use
When the  vector-sticky-header-enabled class is removed from the body
it means the feature is not enabled, it doesn't mean the sticky header
should be invisible.

Call the hide method instead, and move it out of the function given
its a side effect

Bug: T308343
Change-Id: I4ecd6524146f203af926847812e20275c9573cab
2022-06-01 19:07:49 +00:00
Jon Robson b8701a3b58 [Grid preparation] Restrict certain rules to old layout
Having a clean slate to work from will help with the development of
introducing the grid

Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
2022-06-01 17:24:47 +00:00
jenkins-bot 5bf70d7fbb Merge "Sticky header edit button A/B test bucketing (updated)" 2022-06-01 16:20:33 +00:00
jenkins-bot 1f8a3c5318 Merge "i18n: Use correct direction for collapse Table of Contents" 2022-06-01 08:17:54 +00:00
Jan Drewniak d7e6690b52 Sticky header edit button A/B test bucketing (updated)
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.

This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:

    $wgVectorStickyHeaderEdit = [
        "logged_in" => true,
        "logged_out" => false
    ];

as well as an AB test configured with the following buckets:

    $wgVectorWebABTestEnrollment = [
        'name' => 'vector.sticky_header_edit',
        'enabled' => true,
        'buckets' => [
            'unsampled' => [
                'samplingRate' => 0
            ],
            'stickyHeaderEditButtonControl' => [
                'samplingRate' => 0
            ],
            'stickyHeaderEditButtonTreatment' => [
                'samplingRate' => 1
            ]
        ]
    ];

With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.

NOTE: This patch address the sticky header being visible on incorrect
namespaces when the AB test is enabled and the revert of
42b808738a.

Bug: T299959
Bug: T309370
Change-Id: I3effbb3e5f0bb1c8663255936458e3849511dfca
2022-05-31 15:58:35 -07:00
Jan Drewniak a3cef30154 Move page title above article toolbar menus
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.

Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.

Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
2022-05-31 18:06:11 -04:00
jenkins-bot a6f5acd9de Merge "In max-width mode, constrain the width of page previews" 2022-05-31 15:29:26 +00:00
Sam Wilson 0ebae6c4ef In max-width mode, constrain the width of page previews
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.

Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
2022-05-30 11:52:59 +08:00
Ebrahim Byagowi aebd782d75 i18n: Use correct direction for collapse Table of Contents
Collapse Table of Contents has incorrect direction for RTL, this fixes it.

Bug: T309478
Change-Id: I43f2d225aed7c3a74e35f8e72c1e261b39af9737
2022-05-30 02:37:10 +04:30
Ed Sanders 72d2653f59 Follow-up I1dee51009: Add url() to list-style-image
Bug: T309374
Change-Id: I91d690700cf82e315e98be7bfcadd8bdb4cc3450
2022-05-28 23:00:49 +01:00
Jdlrobson 0df8d35b43 Revert "Sticky header edit button A/B test bucketing"
This reverts commit 42b808738a.

Reason for revert: The sticky header is now showing up in unexpected
places e.g. special pages.

Bug: T299959
Bug: T309370
Change-Id: Ie7f224d84440279ba28e031e13d05984c81a3ad4
2022-05-27 18:10:29 +00:00
Jan Drewniak 42b808738a Sticky header edit button A/B test bucketing
Adds behaviour for conditionally adding the edit button
to the sticky-header based on A/B test bucketing.

This behaviour depends on having the `$wgVectorStickyHeaderEdit` config
set to true for logged-in users:

    $wgVectorStickyHeaderEdit = [
        "logged_in" => true,
        "logged_out" => false
    ];

as well as an AB test configured with the following buckets:

    $wgVectorWebABTestEnrollment = [
        'name' => 'vector.sticky_header_edit',
        'enabled' => true,
        'buckets' => [
            'unsampled' => [
                'samplingRate' => 0
            ],
            'stickyHeaderEditButtonControl' => [
                'samplingRate' => 0
            ],
            'stickyHeaderEditButtonTreatment' => [
                'samplingRate' => 1
            ]
        ]
    ];

With that config, this change hides the sticky header for all users
except those in the stickyHeaderEditButtonTreatment bucket.

Bug: T299959
Change-Id: If252956bc530d8ce54eeda61f42a93ffa48255cb
2022-05-25 10:15:47 -04:00
Jon Robson 4e67384131 Fixes Vector 2022 sidebar overlap when table of contents disabled
Bug: T308130
Change-Id: Ieec44e8f1657319962e2a7922d04186c260123fe
2022-05-23 23:13:29 +00:00
jenkins-bot e9cb96cde2 Merge "styles: Replace more deprecated mixins" 2022-05-19 23:27:07 +00:00
Jon Robson f91c3cd5a8 Use upstream reduces motion skin option
The new accessibility rules default to on, so no need to list
it in skin.json but we need to remove the now duplicated style.

Depends-On: Ie1c6c1ba7263c232d874263fdae7427a5ec489f6
Change-Id: I92f622b92adb8735c38a4ebe56eaf5bfc4ae37bf
2022-05-18 14:29:05 -07:00
jenkins-bot 7761ed4aff Merge "Revert "Move a max-width Less variable up into variables.less"" 2022-05-18 18:50:50 +00:00
Jdlrobson 55b5283148 Revert "Move a max-width Less variable up into variables.less"
This reverts commit bf4d843d97.

Reason for revert: These variables were intended as local to layout.
Only layout stylesheet should have access to layout variables. The
risk of having this in the global variables file is that non-layout
rules can be added to components.

Change-Id: I91fd01ed5333555052c243e25d37cd30d6d9bef6
2022-05-18 15:12:59 +00:00
jenkins-bot ce8ddbe0ea Merge "build: Update eslint-config-wikimedia to 0.22.1" 2022-05-18 00:41:00 +00:00
jenkins-bot 336b8eefb7 Merge "build: Update stylelint-config-wikimedia to 0.13.0" 2022-05-18 00:40:09 +00:00
Ed Sanders bf494b89fd build: Update eslint-config-wikimedia to 0.22.1
Change-Id: I25e0cf131c7d2ea53d362f4836a451b68cd31366
2022-05-17 23:40:46 +01:00
Ed Sanders 4a8eba29df styles: Replace more deprecated mixins
* .transform-origin
* .list-style-image

Change-Id: I1dee510097c179d23c5cc2192c70ca006869f5d0
2022-05-16 23:25:44 +01:00
Volker E 7eb818543e styles: Replace deprecated Less .transform() mixin with standard CSS
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.

Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
2022-05-16 23:24:53 +01:00
Ed Sanders 7f7d5c4ae5 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I122005b6817cf1997002dbe7a1bcbd249c9842cb
2022-05-16 17:44:12 +01:00
Sam Wilson bf4d843d97 Move a max-width Less variable up into variables.less
This makes it accessible elsewhere (such as within WikiEditor; see
the dependent patch) without having to include
all of screen.less.

Bug: T307725
Change-Id: I3fda9886c27fe0b78cf5bd5647d7e497a3aaba0e
2022-05-16 13:15:00 +08:00
Volker E 2adab440a5 styles: Replace deprecated Less .transition() mixin with standard CSS
Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.

Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
2022-05-13 20:37:22 +00:00
jenkins-bot 2cbb390edd Merge "styles: Replace deprecated Less .box-sizing() mixin with standard CSS" 2022-05-13 15:42:11 +00:00
Volker E e4d8c573a9 styles: Replace deprecated Less .box-sizing() mixin with standard CSS
Bug: T306488
Change-Id: I299e50397c4bf6f99b9892e83c966fffadd24048
2022-05-12 13:41:30 -07:00
Jon Robson 2213963241 [Grid preparation] Use variables for selectors with state
The checkbox hack adds complexity to our layout rules as we must
describe elements based on their siblings. To make these long selectors
easier to reason with and reduce the risk of rebase conflicts as these
shift I'd like to make these variables.

Change-Id: Ie5ff163d0449778a7d343870187da7703d20b754
2022-05-12 20:26:46 +00:00
bwang 91e2e55a10 Simplify TOC spacing styles/logic by reusing the visible sticky header class
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled

Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
2022-05-10 11:39:05 -05:00
bwang 94be7578f5 Factor out a separate scroll observer for the TOC A/B test, which should be fired separately from the page title observer used by the sticky header and TOC
Bug: T307952
Bug: T307345
Change-Id: I3f247730fa1c399e6d2e4d866677703fc24e8c58
2022-05-09 20:44:54 +00:00
jenkins-bot b6847038f8 Merge "[HTML] Refactor Content header templates" 2022-05-06 18:43:34 +00:00
Jan Drewniak 1288c97179 [HTML] Refactor Content header templates
Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators

This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
  including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
  `<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.

This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.

The clearfix ensures that the height between the page title and content is consistent across all pages.

Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
2022-05-06 15:37:04 +00:00
Jon Robson 305fbdacf8 [Grid preparation] ArticleToolbar component
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar

UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.

Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML

Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
2022-05-05 21:13:01 +00:00
Jon Robson 9a2b3d6275 [Grid preparation] Structure the header
Restructure the header to have two child elements

Change-Id: Ib5b7f31419ae6b62f62878947651b8ab843a3955
2022-05-05 17:54:28 +00:00
Jon Robson 3b4b101459 Disable max width on article toolbar container
Bug: T306353
Change-Id: I1c9e223ebc22cf0e0a337856041f34449e6c483b
2022-05-05 02:21:17 +00:00
bwang cdc46e70da Fix TOC fadeout placement
Bug: T306893
Change-Id: Ib6fa8836948b6d6f202eb5365ae660acf210b473
2022-05-04 23:37:43 +00:00
jenkins-bot 3373d065c7 Merge "Fix Sidebar.less auto merge commit" 2022-05-04 20:19:12 +00:00
jenkins-bot a68409d262 Merge "[TOC] Remove pointer-events:none on .sidebar-toc-link" 2022-05-04 19:38:32 +00:00
bwang 6cc98aa449 Fix Sidebar.less auto merge commit
Auto merge commit for the 'Adjust table of contents margins at 1000-1200 breakpoint' patch incorrectly deleted a line from Sidebar.less. I need that deletion in 789210, because it will be backported later today
https://phabricator.wikimedia.org/F35103224

Change-Id: I0404c02d71160ec4537e49fc77489a8a5027a183
2022-05-04 17:05:42 +00:00
jenkins-bot 8a2f61ee02 Merge "Adjust table of contents margins at 1000-1200 breakpoint" 2022-05-04 16:49:53 +00:00
Jon Robson 9c26833af6 Adjust table of contents margins at 1000-1200 breakpoint
Bug: T307004
Change-Id: Ibb7be459305eaee57503d4efd67e19cd0f00046b
2022-05-04 16:04:33 +00:00
bwang 0b27b29475 Hide navigation menu label and remove legacy sidebar styles from modern styles
Change-Id: I701860ce0bf5f34c8318a999cddd7eede94aee3a
2022-05-03 16:50:58 -05:00
Jon Robson a1e5fd5fcc On special page do not show empty more menu to low resolutions
This is a follow up to I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
On Special:Userlogin a "more" menu appears that's visible but empty
that should not

 Bug: T306229
Change-Id: I9384b3015de9991db41bde8ccc8f404ac533f198
2022-05-02 20:22:44 +00:00
Jan Drewniak 7e81c26712 [TOC] Remove pointer-events:none on .sidebar-toc-link
Previously, we relied on setting pointer-events:none on all child
elements of ToC links.

This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.

Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.

Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).

Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
2022-05-02 19:48:30 +00:00
Tim Starling 8d0659b1e6 Updates for core temp user autocreation feature
* Use pt-tmpuserpage for the temp user name.
* Use the userAnonymous icon for the temp user personal tools menu.
* Suppress the logout menu item for temp users.

Depends-On: Ib14a352490fc42039106523118e8d021844e3dfb
Bug: T300263
Change-Id: I8ac5de82f76a9ec58b0fbef85546bc7fd5b793d2
2022-04-28 20:32:53 +00:00
bwang b075c90f60 Update TOC heading and link styles
Bug: T306562
Change-Id: Iafe335547a1e3c432efce303b5c0e5f8f5a23a15
2022-04-28 13:32:59 -05:00
Jon Robson 64df4fde20 Remove dancing tabs with CSS only solution
Remove JavaScript that collapses tabs and replace with an easier
to maintain breakpoint based solution.

Tabs will now collapse below the tablet breakpoint

Note: In the case of mw.util.addPortletLink, to add items to the
`views` menu, these will not be collapsed into the more menu and
must now be explicitly added to both menus, ie. if the window is
resized these will hide and not appear in the more menu.

However, when mw.util.addPortletLink attempts to add to `views` menu
when there is not available space, we will redirect those links to
the more (`cactions`) dropdown menu.

Bug: T306229
Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
2022-04-28 17:57:10 +00:00
jenkins-bot 0f31961e35 Merge "Add word-break CSS to TOC links" 2022-04-27 22:21:17 +00:00
bwang 61eec96090 Add word-break CSS to TOC links
Bug: T306913
Change-Id: I95420c837a779a85e55c20c7a9d1ae74b632c6cf
2022-04-27 19:24:18 +00:00
bwang af8cf470fd Fix TOC bottom fade
Additional change: Fixes an eslint warning

Bug: T306893
Change-Id: I778470ec5fa2081e4412f40b0180efbff7013d1b
2022-04-27 19:07:17 +00:00
bwang ea64b86f33 Enable collapsible TOC sections for user with preferred reduced motion
Bug: T306652
Change-Id: Ia94b9dd32484f5f8b4c8bfe28d7c5b1f303855bf
2022-04-26 23:38:14 +00:00
Jon Robson c269419af3 Disable animations when user prefers reduced motion
When browser preference for reduced motion is enabled:
* Disables bolding of table of contents
* Disables sticky header transition

Bug: T254399
Change-Id: I8ef9e59b258fed977ce370da352b1924832d842b
2022-04-26 23:31:38 +00:00
Jon Robson 7d75bb37ad [ToC] Increase threshold for ToC collapsing to 1000px
Bug: T306904
Change-Id: Ib3ad66a8f4ccf9c5ba323031821d6e681069bde5
2022-04-26 17:46:51 +00:00
Nicholas Ray 718bcef6f9 Fix empty space on left when bucketed in the control/unsampled group
When the AB test is enabled both the old and new TOC's are in the page's
html but only one is visible. The `.vector-toc-visible` class is also
present and will try to apply a left margin even if the page has been
bucketed into the control or unsampled group.

This patch takes the simplest approach to fix this problem with CSS only
especially given the transient nature of this code (will be removed when
AB test is finished):

* When the page bucketed in the control or unsampled group, prevent
  .vector-toc-visible from applying a left-margin through the use of
  `:not` selectors.

Additionally:

* Remove unnecessary `margin-left` rule that used to apply to the
  mw-workspace-container. Due to the work done in
  I2f95d5938674bb8263b6203c5f6a469762bf0cc2, the workspace container
  will now always have a computed left margin of zero because it is the
  same width as the page container.

Bug: T306366
Change-Id: Icd9572353bb5e29cfda91b095ceb8c2e652864e7
2022-04-19 14:35:49 -06:00
Clare Ming 5800b80596 Adjust alignment of searchbox in header
Per T305069#7832390, left edge of searchbox input should line up with
the left edge of the main content area.

Bug: T305069
Change-Id: I737c3cac09ae18c598164b232b6461f72451b3e3
2022-04-15 13:56:32 -06:00
Clare Ming f12659fff6 Layout + visual style changes for sticky TOC
- Layout updates per design review.
- Visual updates per design review.

Bug: T304166
Bug: T305069
Change-Id: I2f95d5938674bb8263b6203c5f6a469762bf0cc2
2022-04-15 10:24:46 -06:00
jenkins-bot b7268dd661 Merge "Fix position of search box in vector-22" 2022-04-12 00:41:52 +00:00
Nicholas Ray 5eacd5e629 Fix position of search box in vector-22
Looks like the selector for `vector-search-box-show-thumbnail` needs to
be adjusted as it is on the same element as the `vector-search-box-vue`
class.

Change-Id: Ief1dadddc082add65ae4bf29c951f2ddefb15d5b
2022-04-11 18:01:19 -06:00
jenkins-bot 107abe79a0 Merge "Scope ULS styles to when language button is in header" 2022-04-09 00:07:09 +00:00
jenkins-bot e527168978 Merge "Force legacy TOC to render at lower resolutions" 2022-04-07 23:39:14 +00:00
Clare Ming b24cf900fe Force legacy TOC to render at lower resolutions
- If TOC A/B test is enabled, page is in treatment group, and
viewport is below tablet, force legacy TOC to render.
- If TOC A/B test is disabled and new TOC feature is enabled,
and viewport is below tablet, neither TOC should render.

Bug: T300975
Change-Id: Ib30c3473eb47d6ac60924f40ccd0e42d29625407
2022-04-07 15:06:30 -06:00
bwang 40045c6e0e Scope ULS styles to when language button is in header
Bug: T304468
Change-Id: Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
2022-04-07 14:47:44 -05:00
Clare Ming 805c6c97c2 Remove TOC margin to not always show fade out
Bug: T302076
Change-Id: I06dd5fc56c30299aceeae46b16d3ebd3e3cf11aa
2022-04-07 11:49:47 -06:00
jenkins-bot a56698c706 Merge "Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons" 2022-04-07 15:51:56 +00:00
Clare Ming a0b1b5b056 Fix TOC fadeout proper
Bug: T302076
Change-Id: I247a1a92e6eaa3413053514866966393ff3c1964
2022-04-06 16:25:07 -06:00
bwang f1c70e99b7 Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons
Bug: T303766
Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-04-06 17:24:34 -05:00
Ed Sanders f04f62ec05 Update debounce param order
Parameter order was changed in
I2ef1c949d68c5642943a614e2cb3f2f0a4cb140c

Change-Id: Iefc61dd84e53de60a95a69275d5c5619b0db25ff
2022-04-06 17:15:20 +01:00
jenkins-bot ec3b66e0ed Merge "Only track headings that are included in the table of contents" 2022-04-05 22:10:33 +00:00
Clare Ming 83f324e863 Add fixes for sticky TOC fade out
Bug: T302076
Change-Id: I9fffb17e60182ef2d667ed86218b8f24e1d76f5c
2022-04-05 13:52:40 -06:00
Nicholas Ray 6fbf08a198 Build A/B test bucketing infrastructure for the table of contents.
* Bucket and sample on server by using the
  `WikimediaEvents.WebABTestArticleIdFactory` service from
  WikimediaEvents (soft dependency)
* Add linkHijack.js so that users bucketed in one group have the
  possibility of remaining in that group if they click a link to another
  page.

Bug: T302046
Depends-On: Ie6627de98effb3d37a3bedda5023d08af319837f
Change-Id: Iff231a976c473217b0fa4da1aa9a8d1c2a1a19f2
2022-04-04 17:06:29 -06:00
bwang 4a81d0e4eb Scroll active TOC links to midpoint when past threshold
Bug: T301150
Change-Id: I282dbeab8e0b121b71c04f921ab11311f1514da7
2022-03-31 15:50:54 -05:00
Jon Robson 94c7f31082 Only track headings that are included in the table of contents
Headings can also appear in templates inside divs and subtitles.
These do not
get rendered in the table of contents and should not be tracked.

This also excludes headings from the legacy table of contents which
may be in the article during the A/B test

See English Wikipedia examples [[Portal:Biography]] and [[Main page]]

Change-Id: I4ca8933a0e7736157f80e5e68077b153e5bfc81d
2022-03-31 17:35:00 +00:00
bwang 607f3279bd Move sticky header DOM queries into main.js
- Remove isStickyHeaderAllowed() from stickyHeader.js, move to main.js
- Rename variables in stickyHeader.js to be consistent

Bug: T301429
Change-Id: Ib445a19cbfab52a008b749ea63cef178d6288e6a
2022-03-30 09:21:25 -05:00
Clare Ming 2bfdbe74b6 Do not show footer menu in print mode
Bug: T300178
Change-Id: I48df6c39019dc0551ffb0ee559c51d5f6b31c825
2022-03-29 17:24:18 -06:00
jenkins-bot 0529f8cb26 Merge "Update scroll instrument for TOC" 2022-03-29 21:43:41 +00:00
jenkins-bot 056b242682 Merge "Make beginning bold on scroll" 2022-03-29 16:05:39 +00:00
Clare Ming f2c60983bb Update scroll instrument for TOC
- Leverage scrollObserver to use for TOC scroll events.
- Add new hooks to target legacy TOC intersection.
- See corresponding changes (not strict dependency) in related
WME patch 773628 for capturing scroll events from Vector TOC:
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikimediaEvents/+/773628
- Dependency on https://github.com/wikimedia/typescript-types/pull/30
which updates mwHookInstance interface with fire property to prevent
TS error on fire method of mw.hook in scrollObserver.

Bug: T303297
Change-Id: I5c2dd5f3a25ffcb0ed03b76ae28e65eb18ad8d33
2022-03-29 09:45:30 -06:00
jenkins-bot cda8df1cb2 Merge "Add fade to indicate scrollability in TOC" 2022-03-29 15:17:10 +00:00
Clare Ming ccdfbf2e58 Update @wikimedia/types-wikimedia to latest version
- Remove some @ts-ignore statements.
- Update invocation of mw.util.debounce to have correct order of
parameters.

Bug: T303297
Change-Id: I4bb795fbd4d026c21c66e9a3d161afff4d7ef09f
2022-03-28 23:33:50 +00:00
Clare Ming 1d574b86f1 Add fade to indicate scrollability in TOC
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
2022-03-28 15:58:26 -06:00
Jon Robson a2c7c024df Make beginning bold on scroll
Bug: T301254
Change-Id: I4469575ea8590ae22023b98c3dbd31bc672d5766
2022-03-25 01:13:42 +00:00
jenkins-bot 1b8ee10357 Merge "Add data-event-name attributes to legacy and sidebar TOC" 2022-03-23 22:00:45 +00:00
Jon Robson c73e551d49 Pass script path to URL generator
Bug: T288686
Change-Id: I4d4d27de2d52f3486e01c8c70bda1b9c03178a24
2022-03-23 10:37:39 -07:00
jenkins-bot b3f19854b6 Merge "Revise AB.js to handle other features + server sampling/bucketing" 2022-03-22 22:53:30 +00:00
Nicholas Ray d01dead5a7 Revise AB.js to handle other features + server sampling/bucketing
* Eliminates AB.js dependency on sticky header
* Code coverage has been raised to 100%
* Instead of importing ABTestConfig, these props are now passed into the
  function along with a token.
* WikimediaEvents hook is now fired when experiment is initialized. The
  experiment should not be initialized if it is not enabled.
* Removes several methods (e.g. initAB, getEnabledExperiment) due to the
  preceeding changes.
* Adds `isInSample` and `isInTreatmentBucket` methods so that the client
  has less work.

Treatment buckets now follow a naming convention so that the client can
do less work querying if the subject is part of the treatment:

* Treatment buckets should have the case-insensitive `treatment`
  substring somewhere in their name (e.g. 'treatment',
  'stickyHeaderTreatment', 'sticky-header-treatment' )

Bug: T302046
Change-Id: I4febec42b4c471b2f2ef02be2e334bd6d2c31eec
2022-03-22 11:58:48 -06:00
bwang ac54984d75 Add data-event-name attributes to legacy and sidebar TOC
Bug: T302934
Depends-on: I5ef98d5f5713d3d99bc5f7f8112ba2d1e0f62e22
Change-Id: I5806c346abf0375c85248659c636ae3b2d73f661
2022-03-21 22:32:56 +00:00
Jon Robson 826a97db0e Table of contents should be hidden at lower resolutions
There should be no left margin on article content.

Bug: T298898
Change-Id: I92dafcc8f1bbd0dc4a21c20035b829198c18e8cb
2022-03-21 21:17:21 +00:00
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
jenkins-bot 08efa139be Merge "Remove custom handling of aria-expanded in Vector checkbox hack buttons" 2022-03-21 18:03:14 +00:00
Mortal303 ae50914d4e Remove custom handling of aria-expanded in Vector checkbox hack buttons
Removed class "vector-menu-checkbox-expanded" and "vector-menu-checkbox-collapsed" in
includes/templates/Menu.mustache and deleted the necessary lines in
resources/common/components/MenuDropdown.less, tests/jest/stickyHeader.test.js,
includes/templates/skin.mustache, skin.json, i18n/en.json and i18n/qqq.json.

Bug: T299173
Change-Id: Ibf8a08e6e5d1a6c607abf170c030a0285e84ad74
2022-03-21 23:14:51 +05:30
jenkins-bot 822d1957f1 Merge "Revert "build: Update eslint-config-wikimedia to 0.22.1"" 2022-03-17 00:18:36 +00:00
Jdlrobson f7a859bac5 Revert "build: Update eslint-config-wikimedia to 0.22.1"
This reverts commit b72c648d21.

Reason for revert: Causes an issue with the search
(See https://phabricator.wikimedia.org/F35009362)

Change-Id: I09f7e5c9eab677bfd5a92cf2d8389d20a2d6e87a
2022-03-16 23:40:42 +00:00
jenkins-bot 0b3d452083 Merge "build: Update eslint-config-wikimedia to 0.22.1" 2022-03-16 17:04:23 +00:00
jenkins-bot 4bb95af10c Merge "Set position and z-index for mw-page-container" 2022-03-16 16:21:20 +00:00
Ed Sanders b72c648d21 build: Update eslint-config-wikimedia to 0.22.1
Change-Id: If632697f7c3bb3fad6668d791d9408f7b7a3590b
2022-03-16 15:42:07 +00:00
Abijeet 3a39708163 Set position and z-index for mw-page-container
This forms a stacking context inside mw-page-container. It allows
overlays appended to the body tag to position themselves over the
Vector interface.

Bug: T301452
Change-Id: Ie187fde43dd8e7f108388c848438545c75d19b09
2022-03-16 13:29:07 +05:30
Jon Robson 1113492383 Update Node version
Change-Id: Ib0f2fcb372e2d89450c26beca691bc7060f11718
2022-03-15 14:26:04 -07:00
jenkins-bot fc897266bc Merge "Use explicit line height for user menu items" 2022-03-03 17:47:44 +00:00
jenkins-bot 9205554552 Merge "Render sidebar menu above TOC" 2022-03-03 00:26:38 +00:00
bwang 9fb8af8ae8 Render sidebar menu above TOC
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days

Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
2022-03-02 17:04:47 -06:00
jenkins-bot 288c8b95b2 Merge "Update Vector menu CSS to use vector-menu-heading instead of h3" 2022-03-02 19:21:10 +00:00
Mortal303 ab11cc9adb Update Vector menu CSS to use vector-menu-heading instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.

Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
2022-03-02 20:05:36 +05:30
jenkins-bot 9c9d8693c5 Merge "Only show scrollbars when needed in language menu" 2022-03-01 20:20:09 +00:00
jenkins-bot 5dccb7ec04 Merge "Hide sticky header and ULS button in print mode" 2022-02-28 23:00:40 +00:00
Volker E f2d7158616 build: Update 'svgo' to latest v2.8.0 & re-crush images
Updating 'svgo' to v2.8.0 and newest Wikimedia SVG guidelines –
mainly around new whitespace features of SVGO.

Change-Id: Ie48f5e78b3f9b6e7f01b65618c1d6089fa4a2f54
2022-02-28 00:00:05 +00:00
bwang be2abb581c Hide sticky header and ULS button in print mode
Bug: T300178
Change-Id: Ie1eb02530ec62fa011da4be45a61d26522c1650b
2022-02-25 17:32:35 +00:00
BrandonXLF 1b0af9022b Add icon classes to portlet links without IDs
Only limit the mw-ui-icon-vector-gadget-ID class to portlet links with
IDs.

Bug: T301012
Change-Id: Ib69957b8d44d9b2a02df9f453de262beb8740799
2022-02-23 16:23:58 +00:00
jenkins-bot 11b968cf18 Merge "Clean up: Remove ts-ignores in stickyheader.js" 2022-02-23 16:18:06 +00:00
jenkins-bot d93f9e9bed Merge "Use TOC template data for showing collapsible section arrows" 2022-02-22 22:16:18 +00:00
bwang 5f0c0cb294 Use TOC template data for showing collapsible section arrows
Bug: T299361
Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd
Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-22 15:47:23 -06:00
Nicholas Ray 27939ac6c9 Revert "Improve jsdoc for tableOfContents.js and sectionObserver.js"
This mostly reverts commit f5ad6fe78a but
keeps the SectionObserverProps typedef.

Instead, we will use @module introduced in
Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e.

Change-Id: I7aff49a3d922889cc99bc4313a6cb416410a7a0d
2022-02-22 12:36:35 -07:00
Nicholas Ray f5ad6fe78a Improve jsdoc for tableOfContents.js and sectionObserver.js
Switch to using @namespace which seems to have the best jsdoc support
for the revealing module pattern [1] that these two files use.

Additionally:

* Add typedef for section observer props

[1] https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s03.html

Change-Id: I3eeda191e5da0294ad40533053adb57e1fc9c8e9
2022-02-21 17:40:10 -07:00
Nicholas Ray 6e9506dcad Dynamically expand/collapse sub-sections in ToC based on # of headings
Server render the table of contents in a collapsed state when the total
number of headings is equal or greater than the value of
`$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of
contents will be server rendered in its "expanded" state.

In addition:

* Revise table of contents tests to call one `assertion` per element so
  that it is easier to see the exact element that may fail an assertion.
* Revise table of contents tests to call a mount function that can merge
  props to allow for a more flexible set of tests.
* Revise table of contents tests by wrapping a `describe` around tests
  that expect the same prop state.
* Adds typedef for table of sections props

Bug: T300973
Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6
Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-21 14:58:51 -07:00
bwang 48f1f1355b Clean up: Remove ts-ignores in stickyheader.js
From what I could tell, most instances of `toHTMLElement` or @ts-ignore could be fixed by using typeguards or using Element over HTMLElement.
Element is a looser typing than HTMLElement, but given `querySelector` returns `Element|null` and the fact that we were already inconsistently using both Element and HTMLElement in this file, I feel it was a worthwhile tradeoff

Change-Id: I3512a98fa67c13a4383b9497e8588960259b5b68
2022-02-21 11:41:12 -06:00
jenkins-bot 8dde172451 Merge "Sticky header dropdown should not contain gadgets in personal menu" 2022-02-21 17:35:41 +00:00
jenkins-bot db902a3250 Merge "Offset the TableOfContents top property only when the sticky header is shown" 2022-02-19 01:32:03 +00:00
Clare Ming 098f65712e Fix long titles with wbr tags in sticky header
Bug: T300134
Change-Id: Ice45acf026e4ef0deee9c6d6f905634cad59c2e3
2022-02-18 17:14:15 -07:00
Jon Robson 2dcd99ed21 Sticky header dropdown should not contain gadgets in personal menu
Bug: T302087
Change-Id: Iae1f42c3c526398d7dea038786ae9001e118307b
2022-02-18 21:30:29 +00:00
Nicholas Ray 29e40714bc Offset the TableOfContents top property only when the sticky header is shown
This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.

Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447
2022-02-17 12:20:15 -06:00
jenkins-bot 9b7d5ad473 Merge "Toggle ToC sections when clicking toggle button" 2022-02-16 22:30:25 +00:00
jenkins-bot 914e3d55e6 Merge "Add fetch tests from WVUI" 2022-02-16 22:07:18 +00:00
bwang 301e09916d Toggle ToC sections when clicking toggle button
Bug: T300167
Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-16 15:48:28 -06:00
bwang a560fb814a Add fetch tests from WVUI
Bug: T288686
Change-Id: Ifeb2e355482d3d5920c2535c89193cc4f36a13c9
2022-02-15 14:00:40 -06:00
jenkins-bot 0f49a257d1 Merge "Collapse ToC by default & expand sections when clicking section headings" 2022-02-15 19:31:18 +00:00
jenkins-bot 45badb5127 Merge "Revert "Add fetch tests from WVUI"" 2022-02-15 19:16:06 +00:00
Bernard Wang 3c161cf49e Revert "Add fetch tests from WVUI"
This reverts commit 7e79ad5686.

Bug: T301810
Change-Id: Icc8ecf6b0f8b1106e0a69364da251ff52161f523
2022-02-15 18:47:37 +00:00
Jan Drewniak 7d32ec80d3 Collapse ToC by default & expand sections when clicking section headings
Collapses sub-sections in the new table of contents by default
(except for non-js and reduced-motion users) and expands the
sections when the top-level section link has been clicked.

Refactors the `activateSection` TableOfContents methods into separate
`activateSection` and `deactivateSection` functions.
Adds `expandSection` and `collapseSection` methods.

Adds triangle icon as a visual expand/collapsed indicator
next to all ToC section headings and are hidden via CSS based on
whether or not the section contains subsections.

Adds test for tableOfContents.

Bug: T299361
Change-Id: I36b3ae7f9f633877683bc17a9444c970d7fa7293
2022-02-15 00:09:50 -05:00
jenkins-bot bdef6990fb Merge "Add fetch tests from WVUI" 2022-02-14 22:08:04 +00:00
bwang 7e79ad5686 Add fetch tests from WVUI
Bug: T288686
Change-Id: Ic95b620087fc14b055a3108999540769ac123ec8
2022-02-14 13:52:16 -08:00
jenkins-bot 97f231d0fb Merge "Trigger a window resize event when toggling sidebar state" 2022-02-14 21:06:39 +00:00
bwang 2a83dad477 Add back flex-grow for sticky header search bar
Change-Id: Id503163d85dfc519d4c47f95e4567dcacfa7458e
2022-02-14 13:08:07 -06:00
jenkins-bot 4557c0910b Merge "Use new ve.activationStart hook to hide header earlier when loading editor" 2022-02-14 18:33:19 +00:00
jenkins-bot a541859743 Merge "[eslint] Disable mediawiki/class-doc" 2022-02-14 16:15:34 +00:00
Nicholas Ray 6b73bd2b41 Fix jsdoc comments for sectionObserver.js
Move jsdoc comment closer to the methods they are describing. This also
enables better typehint support.

I36b3ae7f9f633877683bc17a9444c970d7fa7293 will handle revising tableOfContents.js.

Change-Id: Ifcac7cfd88cd3f1c0405611c880a0d101d2aed3b
2022-02-11 12:17:38 -07:00
bwang 52c7c2ee75 [eslint] Disable mediawiki/class-doc
Given our use of constants for tracking classes this eslint rule
is more an annoyance than helpful.

Change-Id: I37570e3e851997d058f2d93777990dddb3d04089
2022-02-11 16:31:33 +00:00
bwang 3e92800bd6 Move REST search client out of WVUI into Vector
Bug: T288686
Depends-on: I4afc8c38dc9c51d55b46b766a1417b1266963482
Change-Id: Iac6023bb6edca5c8dddc3bfd362db727b2534946
2022-02-10 10:17:10 -06:00
jenkins-bot 5ac2b88293 Merge "Move #mw-sidebar-button layout styles to Header.less" 2022-02-09 23:11:56 +00:00
jenkins-bot 306dc89bf8 Merge "Limit WVUI search to ES6 browsers" 2022-02-09 23:01:03 +00:00
Jon Robson 0c2981d772 Limit WVUI search to ES6 browsers
Rather than test for fetch, limit the code to ES6 browsers.

Depends-On: I96a03796628a74ace93579d45a582711400c09c1
Change-Id: I4ca10182491118e61e155f99c713d4cb1b4fc7f0
2022-02-09 22:10:11 +00:00
Nicholas Ray 390155c67f Move #mw-sidebar-button layout styles to Header.less
Given that these styles deal with the layout of the sidebar button in
the main header and don't make sense in any other context (at least
currently), I think they belong in Header.less.

Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944
2022-02-09 09:29:47 -06:00
Nicholas Ray 80a111d0e4 Fix TOC section activation on link click bug
We want the link that the user has clicked inside the TOC to be "active"
(e.g. bolded) regardless of whether the browser's scroll position
corresponds to that section. Therefore, we need to temporarily ignore
section observer until the browser has finished scrolling to the section
(if needed).

However, because the scroll event happens asyncronously after the user
clicks on a link and may not even happen at all (e.g. the user has
scrolled all the way to the bottom and clicks a section that is already
in the viewport), determining when we should resume section observer is
a bit tricky.

Because a scroll event may not even be triggered after clicking the
link, we instead allow the browser to perform a maximum number of
repaints before resuming sectionObserver. Per T297614#7687656, Firefox
wasn't consistently activating the table of contents section that the
user clicked even after waiting 2 frames. After further investigation,
it sometimes waits up to 3 frames before painting the new scroll
position so we have that as the limit.

Bug: T297614
Change-Id: If3632529f58c15348a7200258f4f5999ea0dadc4
2022-02-08 14:45:16 -07:00
jenkins-bot bcd4ee0ee1 Merge "Fixes for sticky header:" 2022-02-07 16:16:47 +00:00
BrandonXLF 936bbc427a Only show scrollbars when needed in language menu
Bug: T301058
Change-Id: I19af6c27b7adf8a35ccbc4163c585e338240eb72
2022-02-05 21:24:47 -05:00
Clare Ming 19e5d2885a Fixes for sticky header:
- Make page title width fill container.
- Remove page title fadeout, replace with ellipsis.
- Prevent language button contents from wrapping.

Bug: T298885
Bug: T300036
Bug: T298887
Change-Id: I6b09f89ed89a9da7406cdf8b3a00698a9dd66d10
2022-02-04 15:36:35 -07:00
Nicholas Ray 4d2ad52374 Remove getElementsByClassName usage from sectionObserver
Based on prior discussion [1], using getElementsByClassName probably
isn't worth it.

[1] https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/756675/8..13/resources/skins.vector.es6/main.js#104

Change-Id: Id7f8aff73a1d2082ebfeaa9488a815d96317c156
2022-02-03 17:33:42 -07:00
Clare Ming 4d8b548f5f Hide sticky header below 1000px port width
Bug: T298836
Change-Id: Ie524f997d2f9847252afc215d3ac589e511ace07
2022-02-03 13:54:16 -07:00
David Lynch 19edeeabe0 Trigger a window resize event when toggling sidebar state
Other page elements outside of Vector should be notified that the
content area is changing size, in case they need to adjust the size of
fixed elements. Triggering window.resize should allow them to adapt
without needing to write Vector-specific code.

A specific case of this: the floating edit toolbar when VisualEditor is
open would be incorrectly sized / aligned if you toggled the sidebar in
edit mode.

Bug: T300826
Change-Id: I79e0fc67b5e35c2fb975a0a3048184de0d63813e
2022-02-03 12:18:42 -06:00
jenkins-bot 63b1bdbb2b Merge "Drop search related feature flags" 2022-01-31 22:05:45 +00:00
jdlrobson d8382ec96b Drop search related feature flags
Given Wikidata is the only project using modern Vector,
and the only project where the search API is not applicable,
this will result in a loss of autocomplete on Wikidata.org
which will fall back to the non-JS mode.

Bug: T290688
Change-Id: Iece5a4efd43e09cd90c842c9c134ca115b35f2b2
2022-01-31 21:00:22 +00:00
bwang 66359e8fa5 Setup jest unit tests and add basic test cases for AB.js and App.vue
Bug: T300561
Change-Id: Ib7c314b094bd823ae233374f63c9094724d6c06f
2022-01-31 20:50:33 +00:00
Ed Sanders 1cd5bf4d41 Use new ve.activationStart hook to hide header earlier when loading editor
Bug: T299907
Depends-On: I0eaeb98719bf7a43e4a87366cfcd204f35b74650
Change-Id: I8e8b635b46e79c63c4dafbd2418c9be94528ec06
2022-01-31 18:32:55 +00:00
Jon Robson 029110810e Language alert box should use Html::noticeBox
Html::noticeBox doesn't output any deprecated classes so
will not conflict with any user gadgets now.

Bug: T299625
Change-Id: Ic9aef5c8ff3fae6a79c7cf82cc3c97714cf40b3d
2022-01-27 15:35:38 -08:00
Nicholas Ray 3c433a5315 Add sectionObserver and tableOfContents component JS to respond to intersection changes
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.

Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.

The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:

master: https://phabricator.wikimedia.org/F34930737
this patch:  https://phabricator.wikimedia.org/F34930738

Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
2022-01-26 14:11:43 -07:00
Nicholas Ray 76eb7caa2f Update typescript to latest (v4.5.5)
Vector's tsc version is currently reporting errors that the latest
typescript version doesn't report and vice versa. Upgrade to the latest
version to avoid these discrepancies.

Additionally:

Fix tsc errors that are now reported by updated version

Bug: T297614
Change-Id: I0eb67bcc1a5ce214fcf2d6f6433a5de3a845b6a6
2022-01-24 16:35:45 -07:00
bwang 8a957c0163 Use 'toc' skin option and render with new TableOfContents mustache template
Bug: T297611
Change-Id: I8332f7b9c9574d8dece4f7111b299b95533cf386
2022-01-19 14:38:51 -06:00
Ed Sanders da1fb74554 Sticky header: Wait for some repainting to happen after VE teardown
Waiting for one animation frame seems to make the sticky header
re-appear consistently.

Bug: T299114
Change-Id: Ie1230bf861f12e4e18a6adb0f6779c199d6954a1
2022-01-14 14:41:36 +00:00
Jon Robson 5a0932835a Cleanup: Only need to import one variable file
Change-Id: I120a66ec7013d249e8c42e6e631ae568effaa925
2022-01-12 20:58:16 +00:00
jenkins-bot 68b2bb23d1 Merge "Use .vector-search-box-auto-expand-width class to style intermediate search components" 2022-01-11 19:42:02 +00:00
Nicholas Ray 72120a36a0 Use .vector-search-box-auto-expand-width class to style intermediate search components
Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.

Additionaly:

* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
  `.vector-search-box-auto-expand-width` class in Header.less now that
  the class has been cached in the HTML.

Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
2022-01-10 23:35:45 +00:00
Nicholas Ray d9ef1ad66d Fix TypeError: document.querySelectorAll(...).forEach is not a function
Bug: T298910
Change-Id: Iaa67f36278af7805c5d915737d6b30e98b3f8484
2022-01-10 13:34:01 -07:00
jenkins-bot 97c3674d22 Merge "Reset scroll position when sticky header search input receives focus to fix Safari bug" 2022-01-07 01:30:45 +00:00
Nicholas Ray 416f4c3284 Use explicit line height for user menu items
IE11 doesn't support the `initial` value which results in hidden user
menu item text. Instead set an explicit value.

Bug: T298746
Change-Id: I89511419b2d2c753be96f9c1eb842ef80623bce7
2022-01-06 17:52:15 -07:00
Nicholas Ray 17e742e2ab Reset scroll position when sticky header search input receives focus to fix Safari bug
I haven't found any code responsible for making the scroll position
jump. It looks like Safari is doing this on its own. Looking at the
focus event in detail [1], it looks like there is an `preventScroll`
option you can pass to .focus() which might help in this situation, but
unfortunately, Safari doesn't seem to support this. Therfore, a hack
like this may be necessary.

[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Bug: T297636
Change-Id: I90651293b7dd0f7f2970ba06255a12617b43661f
2022-01-06 15:30:21 -07:00
bwang dca94de026 Fix caction menu button from having a width that's 1px too small
Bug: T294883
Change-Id: Ibda07f60d8e94305d36a6bdc2c095b1a93dd6cba
2022-01-05 20:55:43 +00:00
Nicholas Ray 3028a4f9d8 Refactor search component expand behavior and add auto-expand-width prop to search component
In preparation for I30c670e3f195f77a27715c6b494a3088b7a55712, refactor
the search component expand behavior so that it can accomodate the new
changes in WVUI while maintaining backwards compatibility with the
status quo.

Additionally, pass/enable the `auto-expand-width` prop to the main
header's search. This will be inert until the new changes in WVUI have
landed.

Bug: T297531
Change-Id: Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
2022-01-04 15:14:49 -07:00
bwang 80141b61c9 Use core checkbox hack consistently for all dropdown and provide custom JS enhancements for the sidebar button
Depends-on: Id74a80cda6cf460cc2b579269b8d5b2ce81c8ca5
Change-Id: Ibd9518dab78d1d9a541b501d920fe3bd4d362093
2021-12-21 23:33:59 +00:00
bwang bd799ecc2e Add watchstar to sticky header (alternative)
Bug: T294759
Depends-on: I88af8585e8fc75f77ebef867d267199aeb2c6592
Change-Id: I15c409830ef8970ff7319b4dd447904443949b8d
2021-12-21 09:40:48 -08:00
jdlrobson d79dbf37c9 Don't use ts-ignore. It is hiding real errors
We are passing the wrong arguments to
addVisualEditorHooks

Bug: T297119
Change-Id: I2f8ced4513a1e5fcca2a2a2393cbb8fd7a3db388
2021-12-16 10:27:42 +00:00
jenkins-bot b538d23c57 Merge "Close .vector-menu-dropdown menus in modern Vector beforeunload" 2021-12-14 22:53:54 +00:00
Clare Ming 60553ff324 Prevent A/B test enrollment hook from firing for unsampled
Bug: T297662
Change-Id: Ibeca32a3c0fab7de403d69ea274c653cf4bd6c0e
2021-12-13 17:31:17 -07:00
Nicholas Ray 3187fa41ad Close .vector-menu-dropdown menus in modern Vector beforeunload
Per T295085, because of the checkbox hack, these menu would stay open
when navigating back to a page.

Bug: T295085
Change-Id: Ief9523030384b4bcaa00379988e2042b4d177dcc
2021-12-13 17:24:44 -07:00
jenkins-bot dc6bd9af95 Merge "Remove need for html-class template property" 2021-12-10 18:03:22 +00:00
jenkins-bot 2e492515b3 Merge "Add language switching alert in sidebar for language in header" 2021-12-10 17:04:06 +00:00
jdlrobson ca501bb581 Remove need for html-class template property
Follow up to 9dcfc1f

This simplifies the template by removing the need for the html-class.
The font-size can be provided to the entire content area meaning we don't
need the link-only class

Change-Id: Id5c49358f6ec007b3205ee390cf68334a1e56de5
2021-12-10 08:40:01 -08:00
Clare Ming 9dcfc1ff27 Add language switching alert in sidebar for language in header
- Add i18n messages.
- Update relevant data methods in Vector.
- Update sidebar template + styles.
- Add new template partial for sidebar actions.
- Add feature flag to turn on/off alert.

Bug: T295555
Change-Id: I232ce13770917d51495391f4b8d8d1a3a8a7afb8
2021-12-09 16:37:36 -07:00
jenkins-bot cc44e46229 Merge "Define sticky header ULS behaviour" 2021-12-09 23:15:05 +00:00
jdlrobson 51cce2d0d4 Define sticky header ULS behaviour
* It sticks to the header on scroll
* It hides when the sticky header hides

Bug: T296680
Change-Id: I5a4e2ba42e172ea55fbdac8f35ec895f6b2756cd
2021-12-09 22:18:35 +00:00
Clare Ming 454a2845b4 Update A/B test enrollment name
Bug: T292587
Change-Id: Ib4174119e18496139bb942032a2401ebc4d1849f
2021-12-09 13:16:54 -07:00
bwang b79290f5c9 Make ULS in header quiet progressive button
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
2021-12-09 15:27:04 +00:00
jenkins-bot 662fa2a013 Merge "Align mw.notify() alerts to avoid overlapping sticky header" 2021-12-07 22:38:02 +00:00
jenkins-bot fa5cf0890a Merge "Use sans-serif for figures" 2021-12-07 22:12:00 +00:00
Arlo Breault 4df9857726 Use sans-serif for figures
This matches the .thumb class for the new media structure.

Bug: T287965
Change-Id: I55c2f8fdc6c1b882bd1c7b8411e7aa5c475ead3c
2021-12-07 21:44:21 +00:00
Jan Drewniak aa44696222 Align mw.notify() alerts to avoid overlapping sticky header
Aligns the notifications produced by `mw.notify` so that they don't
obstruct the sticky header or usage of elements inside the sticky header.

Bug: T260338
Change-Id: If00f27ec19e71f6803231678fbb733ffaa6c6aaf
2021-12-07 14:41:46 -05:00
jdlrobson fbc5241c45 [Documentation] Document decision in T293441 in code
Not 100% clear why it works this way so recording.

Change-Id: I8c6eb4c1e17916fe06b071dfc98f1c0d4529731d
2021-12-07 18:48:45 +00:00
jdlrobson bb0b3373c7 Mount search to parent node of search form
Follow up to 5dee570cb2.

It seems the mount works slightly different in that it creates a div,
appends by the App element to the element you give it, after
clearing all it's child nodes.

The previous behaviour was that the old element was /replaced/
by the App element.

Bug: T296889
Change-Id: Iee7493c032f4de5389207bba288a1a70e4cd14f3
2021-12-06 22:42:31 +00:00
jdlrobson d834329e15 [Sticky header refactor] Separate responsibilities
Move A/B test code to AB.js
Consolidate the show/hide code spread across scrollObserver
and stickyHeader by adding a show and hide function.

This is needed to fix T296680

Change-Id: Ia2e0c50278df0dfc1600610f281be20f4cc755c2
2021-12-03 14:30:10 -07:00
jenkins-bot 23ac01428b Merge "Update search box margin in sticky header." 2021-12-02 22:37:36 +00:00
Clare Ming 37c9a24f75 Update scroll observer to allow event logging
- Permits logging for scroll events without sticky header.
- Update function name to be more precise.

Bug: T292586
Change-Id: I441b4bf81bc4a36a03f0f1c215d86b01dce2911d
2021-12-01 16:12:06 -07:00
Clare Ming f45cd69381 Update search box margin in sticky header.
Bug: T296318
Change-Id: Icc70723a79ca9b2632229226ef43a1d29d025d09
2021-12-01 22:52:30 +00:00
jdlrobson f0ed70d709 Restores language button icon font size
The font size of icons should never be changed. Since it's also a span

Bug: T296212
Change-Id: I8bf4e9a7d43a9e5206d3ff6d89e2c3f74fa0d25a
2021-12-01 01:08:49 +00:00
jenkins-bot 8c19f565d1 Merge "Update style for page title in sticky header" 2021-11-29 23:11:58 +00:00
Clare Ming d8eff021e1 Update sticky header height.
Bug: T296321
Change-Id: Ic8efa9404282a98aee37dcf9ba33a0b26d6abaff
2021-11-24 14:20:31 -07:00
Clare Ming 101c438c02 Update style for page title in sticky header
Bug: T296320
Change-Id: I0deabfb598e92f07296824c94a9c7c81daefe486
2021-11-24 13:59:16 -07:00
bwang 54639c4af3 Fix icon button spacing, make it consistent with margin defined in core
Since a margin was added to adjacent sibling spans of icons (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/736919), Vector icon buttons have had too much spacing. This patch removes the extra spacing defined in Vector CSS and the accidental whitespace that was included in the ULS buttons..

Change-Id: I308d1941c5f82cb144c2a9d233fbf44c730413a7
2021-11-18 18:55:00 +00:00
jenkins-bot 611af67401 Merge "Revert "Fix font size in editor preview"" 2021-11-15 20:11:19 +00:00
Esanders ad9492896d Revert "Fix font size in editor preview"
This reverts commit 058551e9b9.

Bug: T287733
Bug: T295712
Change-Id: Ic239d1334f09d2a1ecbb7f28d69abd0a349128e5
2021-11-15 18:03:50 +00:00
jenkins-bot 4982868628 Merge "search: Prepare for Vue 3 migration" 2021-11-13 00:09:18 +00:00
jdlrobson 058551e9b9 Fix font size in editor preview
Depends-On: I7eaef3ef89a23932edd5abdd74703eb3297ee061
Bug: T287733
Change-Id: I42c6a8da06d1ab9c4d546b940bc4d627b118e2a6
2021-11-12 17:50:31 +00:00
bwang b196d68326 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: I8fb7761e60be330e58cd017872318fe3675c0be1
Change-Id: I9c946f85c3e4a603c362c3ea4b8016c585cdd212
2021-11-12 10:47:55 -06:00
jenkins-bot 39ffd2c8e3 Merge "Revert "Apply typography rules to .mw-body-content elements outside .vector-body"" 2021-11-10 20:58:37 +00:00
Jdlrobson 0b6636d587 Revert "Apply typography rules to .mw-body-content elements outside .vector-body"
This reverts commit da832cc53d.

Reason for revert: Bartosz reports this made
things worse, so probably best to go with
the VisualEditor selector approach.

Change-Id: Ifcb18c7a388986df44424f9a58be35314c3d3e2c
2021-11-10 15:07:19 +00:00
jenkins-bot e95e48ce51 Merge "Add scroll event + init A/B test logging to sticky header, AB js" 2021-11-09 23:26:17 +00:00
Clare Ming 457dcfc472 Add scroll event + init A/B test logging to sticky header, AB js
- Pull IntersectionObserver into new file to share observer with different callbacks:
  - Wrap show/hide functionality of sticky header in conditionals based on user test group or by default.
  - Fire hooks for scroll event tracking in WME.
- Add new js for A/B test functions and variables:
  - Fire hook to send data for A/B test initialization.
- Update main js to include scrollObserver, A/B test init functionality.
- Add A/B test config.
- Update ResourceLoader package dependencies for sticky header.
- Though not a strict dependency, see I42e3e7c2084c1e88363d5d1662630ed23a28c4d2 in WME repo which uses these hooks to log scroll events.
- This patch includes changes from I56f40e706f8706fde1c0891a0561dd32c5e02bfc which were consolidated here for simplicity and ease of review - related to T292587 which calls for logging an init event for bucketing of users during A/B testing.

Bug: T292586
Change-Id: If6446e1e84cea3649905808c4f0e9f6862255fa3
2021-11-09 15:00:25 -07:00
jenkins-bot e3b5356aab Merge "Apply typography rules to .mw-body-content elements outside .vector-body" 2021-11-09 21:38:11 +00:00
jdlrobson da832cc53d Apply typography rules to .mw-body-content elements outside .vector-body
Bug: T287733
Change-Id: Ib737f215104b2aa234bf694e734de12fccff2fc3
2021-11-09 06:32:01 +00:00
Volker E 2ba2af97cf Fix specificity of widespread .external selector
Returning to `a.external` over only `.external` as it's used widely
within MediaWiki and skins and it needs to kick in in appropriate
places.
`.external` is besides one false positive only for anchor elements,
nonetheless more specific is simpler and more fail-safe than the
other way round.

Change-Id: I3e2fec26d1f835b11f9a66fdf4ba7faeca12d9d2
2021-11-08 21:58:57 -08:00
Roan Kattouw 5dee570cb2 search: Prepare for Vue 3 migration
Port the initialization code for the Vue search to use Vue.createMwApp()
instead of new Vue( ... ). The former mimicks Vue 3's API for mounting
components.

Without this change, this code breaks in Vue 3 (even in compatibility
mode) because the compat support for new Vue(...) is imperfect. By the
time renderFn is called, the searchForm container has already been
emptied by Vue's internal mounting code.

Instead, inspect searchForm and generate the prop list before mounting,
then pass the props to createMwApp() and mount the component.

Bug: T294476
Depends-On: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23
Change-Id: I5b6e66051d97e75f8f03b8258894daba22525797
2021-11-05 15:53:34 -07:00
jenkins-bot 04ff34bd0c Merge "Initialize the skins.vector.es6 module before the skins.vector.js module" 2021-11-04 18:11:29 +00:00
Nicholas Ray c741759cab Initialize the skins.vector.es6 module before the skins.vector.js module
stickyHeader.js, a file in the "skins.vector.es6" module, clones the
user menu. Because of this, it must initialize before dropdownMenu.js, a
file in the "skins.vector.js" module, in order for dropdownMenu.js to
bind the correct checkboxHack event listeners to the user menu in the
sticky header.

Therefore, change the es6 module to export its main method. The
skins.vector.js module can then use mw.loader.using to ensure the
skins.vector.es6 module initialization happens first in browsers that
support es6. Browsers that don't support es6 will continue to initialize
the skins.vector.js module.

Bug: T291096
Change-Id: I1bb6f2da9703ed2679eacfdb42b9818efe614ab9
2021-11-03 11:03:18 -06:00
Nicholas Ray 7f58c88934 Add comment to dropdownMenus.js regarding the CHECKBOX_HACK_BUTTON_SELECTOR
Per request [1], a clarifying comment was added explaining that our
checkbox hack implementation has drifted from the core's recommendation.

[1] https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/732732/2/resources/skins.vector.js/dropdownMenus.js#7

Bug: T291096
Change-Id: I3a5bc9d463bace11185affbb21320d86fc1c5d99
2021-11-02 17:58:52 -06:00
jdlrobson 768a07ec6c Add sticky header edit feature flag
Can be disabled via &vectorstickyheaderedit=0 or configuration
change.

This will allow us to fine tune the edit features without blocking
deploying the existing feature.

Bug: T294383
Change-Id: Ic282ea4f2ff0108eeaa154c8a77e4e5fd30daeae
2021-10-26 21:59:29 +00:00
jenkins-bot 34d77d5e41 Merge "Sticky header edit icons trigger via JavaScript" 2021-10-26 17:32:50 +00:00
Clare Ming 741d59df06 Fix title getting cut off in sticky header.
- Add padding to title class selector.

Bug: T289814
Change-Id: Iab167414d10ce256be8e966f115ae164c1bd3331
2021-10-25 20:51:43 -06:00
jdlrobson 0663087dd5 Sticky header edit icons trigger via JavaScript
Current expected behaviour: the editor experience will
load and the user will be thrown to the top of the page.

Bug: T293158
Change-Id: I3585616c2244a6b91ef5f160beb1cf51af3599aa
2021-10-25 22:35:13 +00:00
Fomafix 574bbfd549 Combine return paths in getLanguagesCached
Also use single quotes instead of double quotes and fix typos.

Change-Id: Ibfd855f55f38ea824d38ad858b654d8229838cd1
2021-10-23 12:55:37 +00:00
jdlrobson ca0401789d ES6-ify sticky header code
- Can now use const/let
- No need for feature detection for things like fetch and closest
as we can assume they exist if ES6 support is available

Change-Id: I85b01add13fd74e1514119498815403e42a09af0
2021-10-21 23:44:30 +00:00
jdlrobson b8122cc40b Separate code from ES6 browsers from ES5 code
This will allow us to write ES6 code for the new features which
is limited to those browsers.

For browsers that do not support ES6, the code will not execute
because of the "es6" flag. Doing this will help us avoid issues
like T293402

Change-Id: Iffb7098cb22395e33b87352fb4f08516f6f25e6f
2021-10-21 15:55:04 -07:00
jenkins-bot 62347f0a74 Merge "Make dropdown menus toggle with enter key" 2021-10-21 20:22:41 +00:00
Nicholas Ray 876d3ddf39 Make dropdown menus toggle with enter key
Bug: T291096
Change-Id: Ia5d1a33aa04dab09f1454ade4816fdb9d48f1eca
2021-10-21 09:59:58 -06:00
jdlrobson c16fa80006 Sticky header: Add user page link to user menu in sticky header
Bug: T292557
Change-Id: Ia72c214ef6384dfeae21556aa4007eb6075f0057
2021-10-21 15:15:51 +00:00
jdlrobson ae28c427d6 Vector should be notified by addPortletLink to collapsible where needed
Bug: T139830
Change-Id: Ibf17a3df7f9409a02f1a316d5da16b32fabcc5a2
2021-10-19 23:24:28 +00:00
jdlrobson 358d81ddce [a11y] Add title attributes to logout, talk and history and DRY up code.
* Addresses feedback in:
** T289816#7440605
** T283505#7440585
Change-Id: I98abdab8c3eb20567af527e6a8bf75faa5670d6b
2021-10-19 08:47:00 -07:00
bwang a1b523a9d5 Avoid calling forEach on searchbox NodeList for older browsers
Bug: T293402
Change-Id: Ic2d10ca9c664c284fc9b5433b5ff1cc32d98c960
2021-10-18 17:56:05 +00:00
jenkins-bot 041496585b Merge "Revert "Use searchFooterText slot in typeahead search component"" 2021-10-13 15:01:39 +00:00
Bernard Wang 7575cf97a5 Revert "Use searchFooterText slot in typeahead search component"
This reverts commit b7728ddda5.

Reason for revert: Depends on WVUI release

Change-Id: If97551a8609433b569fbc88800a7bf9ffc137587
2021-10-13 14:34:08 +00:00
jenkins-bot 529ccd1a86 Merge "Use searchFooterText slot in typeahead search component" 2021-10-12 21:34:45 +00:00
bwang b7728ddda5 Use searchFooterText slot in typeahead search component
- Create new 'vector-searchsuggest-containing' translation for WVUI search footer text
- Use 'search-footer-text' slot in WVUI typeahead search
- Remove instances of old 'footerSearchText' prop

Bug: T290392
Depends-on: Ic92721d5aaf6b833c882a26e9a60b42ab91546fa
Change-Id: I34a184cc8f10172a7ebf67981731c3694d008446
2021-10-06 11:37:26 -05:00
jenkins-bot 06475e55e7 Merge "Remove @min-width-logo, @margin-top-sidebar variables from screen.less" 2021-10-05 23:59:41 +00:00
jenkins-bot 29b35c25ac Merge "Add edit icons to sticky header" 2021-10-05 23:49:35 +00:00
Clare Ming 67e7eab714 Add edit icons to sticky header
- Add edit icons.
- Update data passed to sticky header, button templates.
- Show/hide edit icons client-side based on ids in fixed header.
- Disable sticky header when in Visual Editor mode.
- Use Visual Editor hooks to toggle IntersectionObserver.
- Remove extraneous js for setting offsets for other sticky elements (simplify by moving known sticky element th to css - follow up to https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/722475/comment/7b8ab2db_cd5c7e78/).

Bug: T289723
Change-Id: Ifbab2f1c4d716f8fc261e3d7fa35fc71c6065ec5
2021-10-05 23:31:19 +00:00
Nicholas Ray 87b565a5f0 Remove @min-width-logo, @margin-top-sidebar variables from screen.less
AFAICT these variables are unused.

Change-Id: I675de18cf4b2bb0b7aa913d4ad5801ca0e7eb155
2021-10-05 16:53:52 -06:00
jenkins-bot a2a6aabb6c Merge "Address cache related FIXMEs" 2021-10-05 22:20:12 +00:00
jdlrobson 95e3271e79 Address cache related FIXMEs
Follows up the sticky header search refactors
in caed16e

Change-Id: I5832bc04f0c675ff8bc1a00fff17b6b9f8399e6e
2021-10-05 21:53:09 +00:00
jenkins-bot ba00180eed Merge "Logo scales with font-size" 2021-10-05 19:21:04 +00:00
bwang 8758f87c4b Replace getVectorMenu function with jQuery equivalent
Bug: T292319
Change-Id: I9c9a179b3bcce9eccdf7037818823568f77f2b35
2021-10-04 17:55:49 +00:00
jenkins-bot 17ccb9ab3a Merge "Accommodate other sticky elements with sticky header" 2021-09-30 23:17:26 +00:00
Clare Ming e30c3408cf Accommodate other sticky elements with sticky header
- Update sticky header js to apply top offsets.

Bug: T289817
Change-Id: Id0e7bf7b018fbbfb2a9c1932314bf67f245b465d
2021-09-30 16:35:55 -06:00
bwang 405b52054f Update sticky header to be hidden to screen readers and not tabbable
- Adds aria-hidden="true" to the sticky header
- Adds tabindex="-1" support to Button.mustache and update sticky header button data
- Add tabindex to cloned user menu

Bug: T290201
Change-Id: I270db0485f08af310fb40365703da1efc07d3cb9
2021-09-30 09:47:57 -05:00
jenkins-bot 8419d063cc Merge "Restore original more menu padding in legacy Vector" 2021-09-29 22:20:59 +00:00
jdlrobson 4e8a3186a6 Restore original more menu padding in legacy Vector
One of the goals with desktop improvements is to not make any
visible changes to the original Vector skin.

In T289163 we wrapped links in a span, and moved the font-size
declaration to the span. The padding of the link is now applying
with font-size 16px.

Bug: T289163
Change-Id: Ifbf6f7a4c5cb6fda6389b33fc9962bdb03dd1f43
2021-09-29 21:33:38 +00:00
Nicholas Ray 1209b388e9 Add scroll padding to the root element when the sticky header is enabled
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)

Known limitations:

* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.

[1] https://caniuse.com/mdn-css_properties_scroll-padding-top

Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
2021-09-29 14:25:26 -06:00
jdlrobson e12fe1dbb0 Logo scales with font-size
Bug: T291895
Depends-On: Ie86a5b59fbf93a400796a4cac3724207830092b5
Change-Id: I194a11316e8ac68319f41c6a79b2c9cd081a4b66
2021-09-28 21:44:53 +00:00
jenkins-bot 20135a348e Merge "Wire up sticky header search feature" 2021-09-27 22:58:34 +00:00
jdlrobson 125ea5dea9 Wire up sticky header search feature
Bug: T289724
Change-Id: I784ea5eb12b6f43d19769ff48a14d3fd4627853c
2021-09-27 14:47:58 -07:00
jenkins-bot f9405739ed Merge "Vector menu items are wrapped in spans + improve Vector addPortletLink support" 2021-09-27 19:38:36 +00:00
jdlrobson a6c0b21044 Vector menu items are wrapped in spans + improve Vector addPortletLink support
* In legacy Vector, menu items are now wrapped with spans. This
  consistency in HTML is required for splitting Vector into two
  different skins.
* Vector's portlet link items now support icons

Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
2021-09-25 05:01:55 +00:00
jenkins-bot 84023ff39c Merge "Allow multiple search components on the same page" 2021-09-24 17:04:14 +00:00
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
bwang a1f9122eed Prevent gadgets from adding to the sticky header user menu via addPortletLink
Bug: T291426
Change-Id: Ibe8837111011179245745c7b645f046efdbc6ee5
2021-09-23 12:17:55 -05:00
bwang 809a972676 Fix sticky header language button
- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button

Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
2021-09-21 19:59:16 +00:00
jenkins-bot 5eea8cff03 Merge "Restore legacy new (red) link in legacy Vector to #ba0000 & #a55858 for visited" 2021-09-20 15:58:43 +00:00
jdlrobson 5919a26949 Restore legacy new (red) link in legacy Vector to #ba0000 & #a55858 for visited
Given we don't want to change the color in modern Vector we must rely on this
ugly hack to change the link color.

This can be revisited when Vector has been split into two skins
which can use 'mediawiki.skin.variables.less'.

Bug: T288739
Change-Id: I17401f897dce4e6adca9d05008899d28ff02517c
2021-09-20 13:13:48 +00:00
jenkins-bot 2f02c28258 Merge "Restrict sticky header to specified namespaces" 2021-09-17 19:27:25 +00:00
jenkins-bot fe953ae505 Merge "Fix aria-expanded status for user menu" 2021-09-17 19:27:22 +00:00
Clare Ming bdad84a7c9 Restrict sticky header to specified namespaces
- Hardcode allowable namespaces, actions for now in relevant js.

Bug: T290347
Change-Id: If482505be5de4b3e5bf130530f27f0d917ecaaa0
2021-09-17 19:07:04 +00:00
bwang d9a002574c Fix navigation menu h2 from showing in legacy Vector
Restores code removed in 50d866dc

Bug: T291264
Change-Id: Ibcdcd0a2dc31a0cdcfa570901765207dc729af6e
2021-09-17 15:03:21 +00:00
bwang b295ccc931 Fix aria-expanded status for user menu
The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly

Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
2021-09-16 13:48:26 -05:00
jenkins-bot 3c894154df Merge "Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector" 2021-09-15 16:43:41 +00:00
Nicholas Ray 93745e4800 Add search to sticky header
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.

In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.

* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).

* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.

* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.

* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
jdlrobson f271c86238 [refactor] DRY up attribute suffixing
This makes the code more readable and allows us to apply
the suffixing in other places in the sticky header.

Change-Id: I44008c18a3faea2089bc93eb5ce7fea1cad1aaec
2021-09-14 23:34:48 +00:00
jdlrobson 21a21f7e93 [refactor] reduce usages of typescript type declarations
While needed for cloned elements, others can be avoided by
using more general Element class

Change-Id: Iaee121a9f746e9729b5ecbdec80915bf05c11655
2021-09-14 23:34:36 +00:00
jenkins-bot 8f2a5c58f2 Merge "Add history and talk page icons to sticky header" 2021-09-14 23:26:06 +00:00
jenkins-bot 056ec56208 Merge "Clean up for adding title to sticky header" 2021-09-14 22:22:01 +00:00
jenkins-bot bd1dab6bb8 Merge "[Storybook] Add Header component" 2021-09-14 21:45:53 +00:00
Clare Ming 5ec728ec60 Clean up for adding title to sticky header
- Update styles for fade out.
- Remove unused styles.

Bug: T289814
Change-Id: I0bdbaf1a1f0306d47df83f61811b0c85056415e0
2021-09-14 15:10:46 -06:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
jenkins-bot b7ef3d9a0e Merge "Add page title to sticky header" 2021-09-14 19:31:33 +00:00
jenkins-bot 53d1508f62 Merge "Add user menu to sticky header" 2021-09-14 19:23:13 +00:00
Clare Ming 3362e62ef2 Add page title to sticky header
- Fade out after 500px.

Bug: T289814
Bug: T290596
Change-Id: Ice3054f417707261d7c06769cb92aa170cfadba1
2021-09-14 19:12:29 +00:00
Clare Ming 755f10cd0b Add user menu to sticky header
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.

Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
2021-09-14 12:57:08 -06:00
jdlrobson ad5c127239 [Storybook] Add Header component
* Moves screen variables relating to Header to Header
* Adds a Header storybook entry
* Moves data-logo from Logo template to Header.mustache
* Updates UserLinks to use USER_LINK_PARTIALS
* Renames confusing SearchBox story names
* Updates package.json to use a static folder.
* Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles
since deploys there come earlier
* Removes usages of ID selectors

Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
2021-09-14 18:33:10 +00:00
bwang 687c6a50d8 Improve heading structure and heading semantics by removing redundant headings and labels for modern Vector
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector

Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
2021-09-14 10:47:05 -05:00
Nicholas Ray 326e11dfbf Scope styles that should only apply to the main header to Header.less
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.

Additional changes:

* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.

* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.

Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
2021-09-14 15:34:05 +00:00
jenkins-bot 6a0607afdf Merge "Inherit link colors from core variables and override @color-link-new" 2021-09-13 18:23:06 +00:00
jdlrobson 0238078aaf Inherit link colors from core variables and override @color-link-new
Vector should use the variables defined in core for red links

Bug: T288739
Depends-On: I799b46664f01c5631fb9d1ae4f5c43caeeaac818
Change-Id: Idcf5a54d76a1343d3407821b8a5b8d8ece8af9d0
2021-09-13 17:56:26 +00:00
jenkins-bot 82832b137a Merge "Remove disable dropdown behavior" 2021-09-13 07:05:25 +00:00
Clare Ming e639c9287d Make sticky header functional/visible
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.

Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
2021-09-07 16:10:21 -06:00
jenkins-bot 9e9f3ec0cd Merge "[refactor] Remove common UserLinks code" 2021-09-07 16:31:18 +00:00
jdlrobson ff8e29d240 [refactor] Remove common UserLinks code
There is no common UserLinks code. These styles serve
legacy only.

Bug: T288852
Change-Id: Ied191bc1bc5dbd48491fa285b5def265c7d5262d
2021-09-07 15:37:13 +00:00
jenkins-bot 9ffb6cb044 Merge "Restrict sticky heaader visibility" 2021-09-03 21:05:17 +00:00
Clare Ming af317dbc58 Restrict sticky heaader visibility
- Hide if javascript disabled.
- Hide at lower resolutions.

Bug: T289714
Change-Id: I0c669c7fc46fda7bf5055d20cc1cd54d472a9330
2021-09-03 14:19:24 -06:00
jenkins-bot fed987d079 Merge "Simplify how we generate icons and button classes in Vector" 2021-09-03 19:54:03 +00:00
jdlrobson b88f2970f7 Simplify how we generate icons and button classes in Vector
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS

Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
2021-09-03 19:25:31 +00:00
jdlrobson 520dfd2260 Do not hard code Special:Search
Bug: T287540
Change-Id: I234acbaa2cce8f43653507b4298090c50451699d
2021-09-02 20:20:56 +00:00
Clare Ming 21c45837ef Spoof aria-expanded for dropdown menus using checkbox hack
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
2021-09-01 16:12:26 -06:00
jenkins-bot 94d135ecfa Merge "Build the sticky header skeleton" 2021-09-01 20:35:21 +00:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00
Nicholas Ray 5ca9d00d55 Set responsive max-width on username in header
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.

Additional changes:

* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.

* Use core's text-overflow mixin for both the username and the usermenu
items

* Change the user menu's max-width to use relative units

Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
2021-08-31 17:06:35 -06:00
jdlrobson c8dd4e9ed1 Remove disable dropdown behavior
Now that we bind the ULS dialog to the checkbox element,
(see c08ae11) the default behaviour of the checkbos is prevented,
so it is impossible for the dropdown to ever
be shown when ULS is enabled and clicked so this code no longer
serves any purpose.

Depends-On: I97a69c30b27cb1ded06451389e086229561c3589
Change-Id: Ic9d03dea12ee8bb2d7430eccd70e4343e3805d36
2021-08-31 20:53:41 +00:00
jenkins-bot 3ff5e1b6a4 Merge "Update ULS button states to be consistent with other quiet buttons" 2021-08-31 19:44:15 +00:00
bwang c08ae1152e Update ULS button states to be consistent with other quiet buttons
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed

Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
2021-08-31 10:59:59 -05:00
Nicholas Ray a35b21d2cf Correct positioning of search icon before WVUI loads
WVUI sets the icon as `left: -11px` [1]. Vector should do the same to
ensure the icon doesn't move when WVUI loads. Also set top and bottom
properties to zero so that the height of the icon's container is the
same as in WVUI (32 px).

[1] https://phabricator.wikimedia.org/F34622194

Change-Id: I73fa55f9013dc1bdd51581d357109d4817638d91
2021-08-30 16:59:12 -06:00
jenkins-bot fef51f9023 Merge "Improve readability of anon user menu for screenreaders" 2021-08-27 20:36:16 +00:00
bwang d15005408f Improve readability of anon user menu for screenreaders
Bug: T288293
Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-26 12:58:10 -05:00
Clare Ming 1efe0a4203 Remove user links feature flag
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.

Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
2021-08-26 10:07:15 -06:00
Clare Ming 129bf5c350 Update vector menu hide dropdown class to use BEMish convention.
- Keep double-dash class name for cached HTML.
- Update instances of renamed class in less + js.

Bug: T253671
Change-Id: Ieb1ce630e8fa84167e2ca8497f66a20183fdaf90
2021-08-24 15:33:41 +00:00
jenkins-bot 040cbb7dc4 Merge "Use the search title if configured" 2021-08-13 18:11:07 +00:00
jenkins-bot 1c93c90902 Merge "Use centralized MediaWiki typescript definition" 2021-08-13 17:23:44 +00:00
bwang 21c273af1f Override user menu line height
Bug: T288540
Change-Id: I30810de5ba36e082a4e8a1f6f93f34c99344dae8
2021-08-12 19:56:05 +00:00
jdlrobson 5a0214afc9 Copy class across to new language link item
If the Vector code runs before the Wikibase code,
the Wikibase code will not work as the CSS selector
will no longer match.

Bug: T287206
Change-Id: I8555b60f2463ad19efadd57bccbb91ae4e2cc528
2021-08-10 13:17:30 -07:00
jenkins-bot aec29ebc2d Merge "Update UserLinks and SearchBox storybook stories to match prod" 2021-08-06 22:49:34 +00:00
bwang 7aeda662a5 Ensure emptyPortlet class cannot hide user links menu
Bug: T28819
Change-Id: Ia477439f28d5a3ac98cfc28385f179ca72946c26
2021-08-05 13:38:17 -05:00
jdlrobson aebb3fb522 Use the search title if configured
Allow commons to use Special:MediaSearch

Depends-On: 	I37b9d3a2b263f496a283f4bfdc769b7dc880ab06
Bug: T287540
Change-Id: I2a2463d704ef5b2264574cdf186836ba00a639f5
2021-08-05 15:45:41 +00:00
bwang d1f1f32418 Update UserLinks and SearchBox storybook stories to match prod
- Update UserLinks data to wrap link content with spans and other markup changes
- Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories
- Add new SearchBox story to account for search collapse behavior in modern Vector

Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5
2021-08-05 10:08:31 -05:00
jenkins-bot 78223873e3 Merge "Add sticky header feature flag, query param, and class" 2021-08-04 20:02:09 +00:00
bwang 46d98c90f4 Add sticky header feature flag, query param, and class
Bug: T284463
Change-Id: I520832fa1e0a66bb24479e47c8e8f8011e514299
2021-08-04 18:49:56 +00:00
jenkins-bot 100e8281d0 Merge "Add max-width to user menu and text-overflow: ellipsis" 2021-08-04 16:15:45 +00:00
Nicholas Ray 8c36871f1b Add max-width to user menu and text-overflow: ellipsis
When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.

Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]

[1] https://phabricator.wikimedia.org/T287522#7255400

Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
2021-08-03 16:59:52 -06:00
jenkins-bot 65ea203549 Merge "Remove 'legacy' feature" 2021-08-03 18:28:28 +00:00
bwang 58c87018b2 Remove 'legacy' feature
Bug: T287410
Change-Id: Ibf8c20cfb1c3adb262224a28488c03c64323f509
2021-08-03 11:06:36 -07:00
jdlrobson 85ffc0805e Do not rely on load order for disabling language button fallback
Some code disables the dropdown behaviour when ULS is loaded, however
it does not always appear to be working as the `ext.uls.interface`
module may be loaded for other things unrelated to the compact
languages link button.

The safest thing to do for now seems to be to check the configuration
flag wgULSisCompactLinksEnabled. In future, perhaps a hook event could
be added to ULS and that could be subscribed to instead.

Bug: T287191
Change-Id: I0cf8d387919078aabc9e77a0a452f8b3364016ee
2021-07-28 16:59:48 -07:00
Nicholas Ray f62e1997f5 Fix padding/positioning of the user menu orange talk message notification
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.

This commit:

* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.

* The padding-top previously in UserLinks is no longer needed as a
result of the above point.

* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).

Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
2021-07-28 16:35:08 -06:00
Nicholas Ray 7205a0b8e3 Fix user menu "learn more" link spacing
Per the design spec of T287523 and T285786.

Bug: T287523
Change-Id: Icdfc6dca19b83fcc54352c9f4a8c15e1f1bd640f
2021-07-28 09:52:45 -06:00
jenkins-bot 7881d8e651 Merge "Restore print, links, table and message box styles" 2021-07-27 21:45:16 +00:00
jenkins-bot 63dcfb720d Merge "Copy interwiki links into sidebar" 2021-07-27 21:21:20 +00:00
jdlrobson 722b5fbf80 Restore print, links, table and message box styles
These should have been added in the migration.
Follow up to 4a93c70

Bug: T278896
Change-Id: I089077d7ff7a9daf0e98b4dc40f04a11b4764277
2021-07-27 21:18:03 +00:00
Nicholas Ray d8f62f780c User menu design tweaks
* Revises UserLinks.less according to the T285786 spec.

* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.

* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.

* Places an end margin on the search box to add space between the user
links and the search box.

Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
2021-07-27 14:25:32 -06:00
bwang a27b6f7096 Copy interwiki links into sidebar
Bug: T287206
Change-Id: I951b2a277f9484f8e2735951d85c0766098607b5
2021-07-27 12:08:11 -05:00
jdlrobson a46e790187 Use centralized MediaWiki typescript definition
Use @wikimedia/types-wikimedia rather than maintaining our own.

Bug: T263914
Change-Id: I5319f422b85a772c248f2114a75f906a1aff6251
2021-07-26 21:27:12 +00:00
jdlrobson e96cce7207 Restore the true height of the language button
Drop the override, now that the skinStyles have been identified
that were causing this irregularity.

Depends-On:   I9d62ad8a79168bdaebace07fb82f22da4c534b5c
Bug: T191021
Change-Id: Ic5bc639186477570028efa1cb2a09cd64a5aaca1
2021-07-22 16:27:48 -07:00
jdlrobson 83e63d3e99 Sidebar hover background should be consistent with mw-ui-icon
Remove override now it's a default.

Addresses Alex's feedback item 1 in
T191021#7231088

Bug: T191021
Change-Id: I2702ffb9cbee2dfc841b3f03638fdfd24a128493
2021-07-22 22:07:09 +00:00
jenkins-bot accb2892ad Merge "Correct the user icon padding" 2021-07-22 19:53:36 +00:00
jdlrobson 628c436f15 Correct the user icon padding
Addresses topic 3 from Alex's feedback in:
    T191021#7228591

Bug: T191021
Change-Id: I12e5fea3f1893b94e520bcec91d52af9596a2fd4
2021-07-22 19:21:48 +00:00
jenkins-bot 2b93a50fe2 Merge "Remove margin-left: auto on search box to prevent it from switching sides" 2021-07-22 18:49:41 +00:00
bwang 589bb21d1c Remove margin-left: auto on search box to prevent it from switching sides
- Scopes margin-left: auto style to vector with user links off only

Bug: T286733
Change-Id: If5dbdd89c2f773d6a98bf4ffa76f64409c11fd8d
2021-07-22 13:22:40 -05:00
jdlrobson 68e55542af Drop redundant border
This was increasing the icon size from 44x44 to 46x46

Addresses topic 1 from Alex's feedback in:
T191021#7228591

Bug: T191021
Change-Id: I03c80b5ceda9b23dfa53a245bed820ca22a1d95a
2021-07-21 21:50:04 +00:00
jenkins-bot 364c35dcdf Merge "Remove Vector skinStyles for icons and fix language button" 2021-07-21 18:44:37 +00:00
jdlrobson 96136a0e2d Remove Vector skinStyles for icons and fix language button
Depends-On:  Id08590f6a3fbbfda8226f2899f50f0b64cbb1481
Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa
Bug: T191021
2021-07-21 11:02:42 -07:00
bwang 14e9d6ba9f Fix dropdown font sizing in legacy vector
Bug: T287052
Change-Id: I5ec4fb0dc61ed8913debc85061421f567c8cd824
2021-07-21 14:29:37 +00:00
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.

This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.

Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
2021-07-20 18:52:40 +00:00
jdlrobson 60923c6ddb Collapse search below desktop breakpoint
The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.

Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
2021-07-15 22:02:55 +00:00
jenkins-bot 297322f810 Merge "Remove caching FIXMEs" 2021-07-15 21:12:00 +00:00
jdlrobson dd73491331 Remove caching FIXMEs
Code here has been in production a week now, so we no longer need to support
the old HTML structure.

Change-Id: I508dec3294588c9fc7f86958c47a3e5b52493df9
2021-07-15 20:28:48 +00:00
jdlrobson 276738b620 Consolidate user links outside of the user menu dropdown into a single new menu
- Adds UserLinks__more template to process the list of user links.
- Simplifies styles in UserLinks.less, and namespace them under .vector-user-menu-more
- Add i18n for the label of the new navigation menu
- Update storybook and typing

Bug: T284584
Change-Id: I92290815869dcb939f01d9aff4aa202f6f004894
2021-07-15 20:27:54 +00:00
Nicholas Ray ca22b84df4 Make #p-search's start margin dependent on .vector-search-box-show-thumbnail
Before this commit, the following config would result in the search box
not lining up vertically with the tabs:

$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```

This commit fixes that by making the start margin dependent on the
`showThumbnail` option.

Bug: T284242
Change-Id: I0132ef8afb3206836d9f16771cbefda5b8bfa3ec
2021-07-14 13:40:54 -06:00
Nicholas Ray 7d917c8dbb Widen WVUI search suggestions to edge of search button when search is toggled
Per T284242#7206507, the width of the search suggestions should be
increased at small resolutions.

Bug: T284242
Change-Id: I16ac7c4174c427d340dc16b0b56221ff7b6e1016
2021-07-14 13:36:35 -06:00
Nicholas Ray 91af0e098d Make search toggleable at smaller screen widths
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.

* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet

Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
2021-07-14 00:14:45 +00:00
jdlrobson 91e07c6b9a Fix collapsible item behaviour
the user-links-collapsible-item class now applies to list items
not links

Follow up to 05a02a39fb59117c522678001d79b0d9dfdf63ca

Bug: T285960
Bug: T276566
Change-Id: I04fa303c4e95373fdf5ff090de1bba030386c286
2021-07-13 23:42:34 +00:00
bwang 0a75e2e627 Ensure userAvatar icon is only used in logged in users
Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
2021-06-30 22:41:47 +00:00
jdlrobson 6777c5b1fe Collapse header at lower resolutions
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile

Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
2021-06-30 21:43:35 +00:00
jdlrobson a220e553eb Fixes transition from input focus state to WVUI focus state
VueEnhancedSearchBox tries to mimic the styles of WVUI to get a
seamless transition however doesn't account for the focus state that
shows briefly while this occurs.

This was leading to the icon jumping as it transitioned.

Bug: T279015
Change-Id: I10a4ec5d64bb58e2f21506c8a09a1bb6c34ecd65
2021-06-29 14:39:10 -07:00
bwang 0c8154f1bd Update search loading animation delay to 500ms
Bug: T273093
Change-Id: I517bb80a9557c85607ae3588bb44dc83cbeb1dc0
2021-06-24 17:18:16 +00:00
bwang 8389de9cb9 Update user menu icon and storybook
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
2021-06-18 20:30:55 +00:00
jenkins-bot b54b85753b Merge "Move "logout" button to bottom of user links menu in modern Vector" 2021-06-14 23:02:46 +00:00
Jan Drewniak c26ae0f965 Move "logout" button to bottom of user links menu in modern Vector
For modern Vector, removes the logout link in the user menu and places it
below that menu by appending it to the html-after-portal property of the
skin data.

Also modifies the `.vector-user-menu-login` style to accommodate both the
login and logout button.

bug: T281791
Depends-On: If82a736e37174aaadd0ff07019a1fae3759a9e51
Change-Id: I7675230e09a50eaeab448182329f850ad2689514
2021-06-14 23:40:19 +02:00
jdlrobson 0b024a4a4d Allow disabling of the new compact languages button
Depends-On: I726c61d4c6895a28b999781752535e0ddc961744
Bug: T282149
Change-Id: I436554d9d51470d277d59c2c71e08124735e12fd
2021-06-14 15:49:43 +00:00
Clare Ming 9ec5d6ded0 Hide language links on print version
Add selector to hide language links for print version of pages.

Bug: T282304
Change-Id: I6b17676e7491863e684c1704d0a849f0ba3827f5
2021-06-10 16:35:28 -06:00
Clare Ming 06d0afbcb3 Update styles for user-interface-preferences in user links menu.
- Add new menu to UserLinks template.
- Fix styles for user links toolbar.

Bug: T282196
Change-Id: I42d6e6e11d76b2d25b2720a617f2fb2e545eb4b6
2021-06-05 02:01:17 +00:00
jenkins-bot 8021270bce Merge "Update UserLinks styles to use classes instead of ids" 2021-06-02 22:38:04 +00:00
bwang b5aa055900 Update UserLinks styles to use classes instead of ids
Follow up to: 298f945983

Change-Id: I5bc28501d0ae4c2597796dbf1ed9c10eacadad62
2021-06-02 22:16:59 +00:00
Roan Kattouw 02638ff59d Use the new wvui-search module from MW core
Depends-On: Ifa3abeab2a929e15597fa51b95b4442fe818ef31
Change-Id: I24712ca8e4d9558a17c029a4c59484dc0f5b8fad
2021-06-02 13:40:20 -07:00
jenkins-bot a15fd2eb80 Merge "search: Add option to disable highlighting query" 2021-06-02 19:21:30 +00:00
jenkins-bot 0141be5080 Merge "Create new user menu template for consolidated user links in logged out users" 2021-06-02 19:09:54 +00:00
Sam Smith 2b05a6a203 search: Add option to disable highlighting query
... for the WVUI search autocomplete widget.

The VectorWvuiSearchOptions object is sent to the client whole and
already used as the base props for the app component constructed in the
skins.vector.search RL module. We also define the highlightQuery prop on
that component so that its value can be passed to the WVUI
typeahead-search component.

Bug: T281797
Depends-On: I142810c177b850ecd7015f835bb6630bae00a6ea
Depends-On: Ia5e14fb9d0073a5126a0918f7a94213c671e773a
Change-Id: I551414b111226e690f6a2bc69dabf5edc6fb0a96
2021-06-02 18:51:01 +00:00
bwang 298f945983 Create new user menu template for consolidated user links in logged out users
- Adds mustache template for the new user menu
- Uses new functions for getting user link data that have been factored out of SkinTemplate in the dependent patch
- Refactor new user menu styles to be namespaced inside UserMenu.less

Notes:
- Originally this patch included more storybook changes, but I removed them in favor of this follow up patch: 696651

Bug: T276564
Depends-On: Ia841f92c626ca32a9ad437b3d1cff78309c83ed8
Change-Id: Ib15752428265fdc06a3000f62bdca44c67648974
2021-06-02 09:23:22 -05:00
jenkins-bot 56916a17d1 Merge "Change search button msg key to searchbutton" 2021-06-02 10:06:24 +00:00
Volker E 42216de481 Change search button msg key to searchbutton
Bug: T280405
Change-Id: Iea3bf40be029eaa330101b7b9a1bdea191d71416
2021-06-01 15:48:09 -07:00
jdlrobson 6300923601 Storybook should include UserLinks
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu

Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)

Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
2021-05-27 19:27:27 +00:00
jdlrobson 96bf1e8276 Refactor: Create UserLinks component
Have a single template for the UserLinks component, with a single
element wrapping all its subcomponents as discussed.

Change-Id: I35936a6fa1ba335639ca3f47fd439a3662268fca
2021-05-25 16:57:35 +00:00
jdlrobson 3306124038 Introduce the vector-body class
This follows up I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83
In that change, a new class for Vector specific styles should have
been added and the existing CSS referenced. I could have sworn I did
this, but obviously not (perhaps a git rebase or unstage change problem).
We did it for the other skins e.g. Monobook (I90d85c21f4a62e6697f24e3ce388445a0a53c2b0)
but evidently not Vector.

We also have to worry about cached HTML now, the #bodyContent is
the most reliable selector to use for before and after
I4c1b15d90bacbc9b13782a1d8f52e838ce8ecd83

Additional:
Remove the mixin-clearfix rule on bodyContent - this is now
redundant with the changes in T279388 and should have been
removed.

Bug: T283206
Change-Id: I15103cea72c793589a03ab1a3e7f3b377acb287f
2021-05-21 13:50:31 -07:00
jdlrobson 6998c536d4 Both UserMenu stylesheets should be shipped in modern
Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.

To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.

This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.

Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
2021-05-14 10:13:09 -07:00
Clare Ming 63f9dd81e3 Cleanup styles for personal user dropdown menu.
Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component.

Bug: T276561
Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
2021-05-13 23:19:54 +00:00
Sam Smith 7f780961a6 search: Wire up submit event handler
Bug: T274869
Change-Id: I5fab22564fa2fe140858cc214aac017d7bd6c68e
2021-05-13 15:29:18 +01:00
jenkins-bot 50430ea06a Merge "search: Update styling for the search loading state" 2021-05-10 20:55:31 +00:00
bwang 964e214e87 search: Update styling for the search loading state
Bug: T273093
Change-Id: Ifd7f07411597be844cb7de79e416975261069506
2021-05-07 17:04:42 -05:00
Jan Drewniak 9027d57804 Fix: update to 80d734b4, hide language dropdown when ULS loads
Bug: T276140
Change-Id: I70997fbc54554b8d1b9c271a5ca93f2a47f1ee92
2021-05-07 12:24:30 +02:00
jenkins-bot 840bc5b0cd Merge "Consolidate user links into personal dropdown menu for logged users." 2021-05-06 20:17:33 +00:00
Clare Ming dc0b679bfa Consolidate user links into personal dropdown menu for logged users.
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.

Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
2021-05-06 12:49:39 -07:00
Nicholas Ray 8eba1da250 Silence eslint compat/compat for search performance instrumentation
Eslint is throwing compat warnings on every commit in Vector. This
commit silences those warnings.

Change-Id: I0e914c6179745415e916fadd382d86baa72e3e63
2021-05-05 14:37:35 -06:00
Jan Drewniak 80d734b4d2 Place language button near bottom of Main page.
In modern Vector, the language button that is placed inside
the page header should appear near the footer, if the page is a
Main page.

This changes some CSS selectors to not depend on the language
button having the `.mw-body-header` parent element.

Bug: T276140
Change-Id: I97bf0c11d0321752d472ac4988618a1db92b7271
2021-05-05 13:42:19 +02:00
Roan Kattouw 402b01e0ca search: Prevent double-escaping of messages passed to typeahead-search
The parameters passed to the typeahead-search Vue component don't need
to be escaped, they're already escaped by the Vue implementation. Use
.text() instead of .escaped() for the i18n messages passed to this
component, to prevent them from being escaped twice.

Change-Id: I5dcf442f6af181a99123bf7426743af01b097729
2021-04-29 11:34:48 -07:00
jenkins-bot 2acf0694c9 Merge "[search] Don't destroy #p-search element" 2021-04-22 20:14:21 +00:00
jenkins-bot 5820fa0b18 Merge "Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang" 2021-04-21 19:15:27 +00:00
Sam Smith 9914d813d6 [search] Don't destroy #p-search element
The #p-search element is present in at least the Vector, Vector V2,
Timeless, and Monobook skins. This is because the HTML for the element
is generated in MediaWiki Core. At the very least, the
SearchSatisfaction instrument relies on the element always being
present.

Update the skins.vector.search module to simplify the App component
template so that it doesn't render a div#p-search element and mount that
component on the #searchform element instead.

Bug: T274869
Change-Id: Ifde679b62484fda7661fded2d978b78adac9f5da
2021-04-21 14:01:56 +01:00
jdlrobson afaa02ae42 Adjust floating override
Follow up to I3234e7712b8c111b070c35e38425c865ff7213f9
Do not disable the feature entirely as it has other purposes.

Bug: T280260
Change-Id: I47d16eb8186efa83e158713d852b443bce9aee1c
2021-04-15 17:18:29 +00:00
Jan Drewniak f52c2f8a4a Scope right-aligned dropdown menus to #right-navigation & .mw-portlet-lang
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.

Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
2021-04-14 23:31:59 +02:00
Jan Drewniak edd2f4ff85 Reorganize LESS files to match ResourceLoader conventions
Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-04-08 15:47:56 +01:00
jenkins-bot 2e8f193072 Merge "Remove redundant mw-indicator styles from layout-default.less and layout.less" 2021-04-06 21:25:04 +00:00
jdlrobson bdd7eaacf1 [legacy] Restore old floating style inside Vector
This is a modified revert of Ia1eec412111e8f6af3b45affdc186d9eafd4262c.
This is not applied to modern Vector, for reasons given on ticket.

Bug: T279008
Change-Id: I3234e7712b8c111b070c35e38425c865ff7213f9
2021-04-05 15:07:07 -07:00
Bernard Wang 55fdf38714 Remove redundant mw-indicator styles from layout-default.less and layout.less
Bug: T278362
Change-Id: I76f39a9f4cf7404e7d50a272ebce08d53594ef5f
2021-04-05 16:58:41 +00:00
jenkins-bot 1b42cd8dd4 Merge "[styles] LanguageButton: Amend icon color by setting opacity" 2021-03-30 23:10:51 +00:00
Volker E 5a1a382c17 [styles] LanguageButton: Amend icon color by setting opacity
Amending icon color by setting `opacity` accordingly to Design Style
Guide requirements.
Also using `em` base sizing for accessibility reasons in order to
make icon resizable on user text zoom preferences. And adding some
comments and mediawiki mixin usage.

Bug: T277660
Change-Id: Ia226857a38d3b3d5b4583e95905ef55e406c5cb2
2021-03-30 22:13:50 +00:00
jenkins-bot d29bdb86bd Merge "build: Update SVGO to latest v2.2.2 and re-crush SVGs" 2021-03-25 23:17:31 +00:00
Ammarpad b7bf9a88a3 Use content-parser-output RL SkinModule feature
Require MW 1.36

Bug: T277218
Depends-On: I52f752aa782b09a51e2165300cc75d0e47fa3351
Change-Id: Ia1eec412111e8f6af3b45affdc186d9eafd4262c
2021-03-25 17:34:28 +00:00
Volker E 5734191840 build: Update SVGO to latest v2.2.2 and re-crush SVGs
SVGO v2.x changed configuration to JS, amending configuration.
Also re-crushing SVGs.

Change-Id: Id6379e06e6aa1c25760f8489166d354fca25cd52
2021-03-25 09:19:42 -07:00
jenkins-bot 734ced999b Merge "[styles] Remove margin normalization already covered in 'normalize' module" 2021-03-24 21:55:36 +00:00
Volker E e5b652852e [styles] Remove deprecated .box-shadow() mixin calls and cleanup vars
Removing calls to deprecated `.box-shadow()` as basic browser support
is now given unprefixed. In the course we also replace deprecated
vars with already available ones since MW v1.35 following unified
name scheme on both, box shadow and border ones.

Change-Id: Iae353c934c0995c0b6b2635761352685eb91accb
2021-03-24 14:03:25 -07:00
Volker E c8cd609862 [styles] Remove margin normalization already covered in 'normalize' module
Has been introduced before 'normalize' module, now it's time to remove
duplicated style property.

Change-Id: Idff74430655c29b67dfccf97a22f53caaee34155
2021-03-24 13:33:19 -07:00
Jan Drewniak 88dcdab6db Removing temporary .body selectors.
Per the comment, it's been a week. These selectors should be removed.

Change-Id: Ifebb7939596827fc8ade7213f3acf6bf80eebb40
2021-03-24 13:53:48 +01:00
jenkins-bot bd6770014e Merge "Inform anonymous A/B test by tracking time from navigationStart" 2021-03-23 18:29:36 +00:00
jdlrobson b183ac3bf3 Inform anonymous A/B test by tracking time from navigationStart
This will inform us on the approach taken in
I315ea30b88e43f3df29b0a0b37907272ec77d0a7

Additional change:
Flesh out TypeScript with eventLogging interface

Bug:  T275807
Change-Id: I9789cd1dfab5181fa093bce46c5c9b0d338339f5
2021-03-23 10:40:20 -07:00
jdlrobson 127422e4c6 Language button skinStyle overrides
* ULS makes the language button text font weight normal on bold,
reset this.
* Because our icon is non-standard our left margin is also non-standard.
Adjust.
* Remove opacity on language button (it applies to more menu because of
the label text color)

Bug: T268241
Change-Id: Ie9b275a857e8bcb7b767446f0523954134751659
2021-03-08 11:11:07 -08:00
jdlrobson 41d30615a2 [modern] Usability improvements to dropdown
* Don't reveal the menu on hover
* Don't flip the dropdown arrow when open
* Menus close when clicked outside

Bug: T275681
Change-Id: I36f5c46422725a935c962be3194fd37bde1fa769
2021-03-07 18:59:41 +00:00
jenkins-bot cf187653a8 Merge "Correct the height of the language button" 2021-03-03 19:53:23 +00:00
jdlrobson ac62386909 Correct the height of the language button
In wvui quiet buttons have a minimum height of 32px
Given the importance of vertical alignment, here inside Vector
seems the best place to define this.

Bug: T268241
Change-Id: I95b61a0c239ccfb7fa1b2ddaa6980ad2737e8f26
2021-03-03 10:03:17 -08:00
jdlrobson 1d01f70e32 Refactor: Separate Language button code into its own JS file
Having this outside the init function makes the code more
easy to understand.

Change-Id: I6bdcb385738ceb986e21075b006db40567386e7b
2021-03-03 00:13:45 +00:00
jenkins-bot 9bdd6c0130 Merge "[icons] Amend 'search' icon" 2021-03-02 18:40:52 +00:00
jdlrobson 8d8e2d85e6 Language button is quiet with focus, active and hover states
* Add mediawiki ui button styles to Vector and convert language
button to a quiet button
* Restore the arrow for language button with ULS
* Vertically align button to first line of header
* Add a storybook entry for LanguageButton

Additional changes:
* Fix issues revealed by storybook - menu dropdown should
reset generic typography rule for `ul` tags
* Allow quotes usage in storybook without disable rule

Bug: T268241
Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-03-01 20:01:45 +00:00
Jan Drewniak d8bdba0026 Reorganize layout variables
Reorganizes the variables into sections in layout.less.

Also removes a few variables that were only used once for the calculation
of other variables (e.g. `@min-width-container-base`,
`@margin-horizontal-sidebar-button-icon-ems`) as well as
variables that were just multiplied by 2, e.g.
`@padding-horizontal-page-container-total`.

Change-Id: I4a3fc3111f7983a55b7992bee09c03a7ab4092b8
2021-02-24 22:23:07 +00:00
Volker E 35ce451498 [icons] Amend 'search' icon
Following Design Style Guide guidelines slightly decreasing icon on
canvas in accordance with designers.

Bug: T213580
Change-Id: I0ea2426f4e0873b9aac12fe2143203a765e42c3a
2021-02-23 13:01:59 -08:00
jenkins-bot fdd713b244 Merge "Search results should overlay personal tools" 2021-02-12 01:36:06 +00:00
jdlrobson a4f126a76f Search results should overlay personal tools
This removes the problem with the Echo icon being visible on top
of search when the browser is resized to 500px with Echo installed.

Change-Id: I6aba17cb85979617a55e9879518eacdb916ac18b
2021-02-12 00:53:50 +00:00
jdlrobson daf6a798c4 TypeError: data.collapseCondition is not a function
Lots of logspam relating to this error. If data is {}
this error will be thrown which is possible given the
code.

This is possible if a gadget rewrites tabs

e.g.
$( '#p-views ul' ).remove().append($('<ul>'))

Change-Id: I0d3f391fccdb38758fb3cfd7e84889143d479b1e
2021-02-11 21:19:28 +00:00
Jan Drewniak e1f2d2896f Convert max-width layout to relative units
The max-width layout uses a mix of ems and px.
the var `@max-width-margin-start-content` uses ems to define a max
width breakpoint, however the workspace and content containers
`@max-width-content-container` are defined in px.

This leads to layout bugs like the sidebar ovelapping when the base
em unit is not the assumed 16px.

This patch changes the layout px units to ems.

(There should be no visible difference at the assumed 16px font size).

Bug: T270104
Change-Id: If8f284dc5e27c8e1c10f3a6897b7a5e4b8bb357d
2021-02-10 22:58:14 +01:00
jdlrobson 68b989efb6 Simplify responsive Vector implementation
Vector has a wgVectorResponsive flag. This adds a ResourceLoader
module as well

I propose the configuration is repurposed to disable the min-width
on Vector and enable the viewport tag. This will allow us to use
test.wikipedia.org to test Vector at lower resolutions in future
as well as provide a suitable option for 3rd parties wanting to run
a responsive version of Vector that can be opted into using:

```
$wgVectorResponsive = true;
$wgVectorDefaultSkinVersion = '2';

```

As part of this change, the default skin version is set to 2, in
preparation for the next MediaWiki release. Note on Wikimedia wikis we
explicitly set this version so this will not impact any of our deployed
wikis.

Bug: T242772
Change-Id: I878920f49d18c5d60efd3ac45dc7912d2c62086e
2021-02-10 13:05:14 +00:00
Nicholas Ray b8f1d8c8a5 Bring back hoverability of dropdown menu (e.g. "More" tab)
Looks like I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f removed the hover.
This brings it back.

Note this also makes the language button hoverable and will probably
need an additional specific selector (although the language button has
not been enabled anywhere yet)

Bug: T273143
Change-Id: Iac0539313eca5ba8d7ac165d31d2c028e803eacc
2021-02-08 23:11:43 +00:00
jdlrobson 0e0ec99c81 Language button - design fixes
* change color to #202122 (currently it's #54595d)
* padding-right for button text should be 30px (currently it's 40px)
* language icon seems to be displaying at 21x21px (should be 20x20px)
* language icon's margin-right should be 7px (currently is 14px)
* the down arrow should be 10px from the right edge of the button (currently it's 8px)
(requires core change in 661497 to apply)
* increase font-size to 16px (currently it's 13px)
* add a max-height of ~65vh (or something similar)
* add overflow: scroll
* add a border-top (since the menu is wider than the button)

Bug: T268241#6805123
Change-Id: I8891556cb82450db77b90837eeeb72ac78926e29
2021-02-08 19:03:02 +00:00
Nicholas Ray e3abac06a6 Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate
* We add the `.mw-interlanguage-selector` class to the
.vector-menu-heading in the server rendered HTML. `ext.uls.interface.js`
later attaches a click handler to this selector that loads the rest of
ULS.

* We hide the dropdown arrow for js users and only show it again if
ext.uls.interface module isn't installed or is not being loaded.

* When the `ext.uls.interface` module has been loaded, we hide the checkbox
and checkbox hack menu in favor of showing the ULS popover.

Additionally:

* Adds '.vector-menu-heading' class to menu headings.

* Change h3 selector to `.vector-menu-heading`.

Bug: T273232
Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa
2021-02-05 15:03:07 -07:00
jenkins-bot 3cb3b08ee5 Merge "Style the language button" 2021-02-05 00:06:21 +00:00
jdlrobson 98e7bce753 Style the language button
For now the core button mixins are used. In the longer
term we should aim to leverage wvui.

Bug: T268241
Change-Id: I334af039567c52462bcb4c15f07242c6de8eeace
2021-02-04 23:02:48 +00:00
jdlrobson 36eda30e0f Language button should use a new id to identify itself
This breaks existing integrations with extensions which will need
to be revisited as part of this redesign.

Change-Id: Iabf627e6926d4574f27448400d76210386ebdaa2
2021-02-04 20:27:13 +00:00
jdlrobson f083eb2716 Add language icon to language button
The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
2021-02-03 15:38:30 +00:00
jenkins-bot 4b171bf74f Merge "After portlet is included in display of menu dropdown" 2021-02-01 11:02:44 +00:00
jdlrobson 3ecc89e5c5 After portlet is included in display of menu dropdown
Bug: T273143
Change-Id: I72165ba3784da3fcc9d1dd7076b3a6c96e670a2f
2021-01-28 14:08:36 -08:00
Nicholas Ray 1e7ed6b2e1 Make expanding search input dependent on $wgVectorWvuiSearchOptions
Per T270202#6767750 the input should expand when focused before WVUI
loads. However, the input should *only* expand when `showThumbnail` is
`true` in `$wgVectorWvuiSearchOptions` to match how its done in WVUI
where it takes into account the size of the thumbnails. When
`showThumbnail` is false, it should not expand as the input won't match
WVUI and the WVUI load transition will be jarring.

To test locally, toggle between true/false in your LocalSettings.php:

```
$wgVectorWvuiSearchOptions = [
  "showThumbnail" => false,
];
```
Bug: T270202
Change-Id: I70277c1082a504fbd5f6023e9873e8071de7e35d
2021-01-26 17:37:22 -07:00
Sam Smith 746315bb5b Add search widget treatment A/B test
If the VectorSearchTreatmentABTest config variable is truthy and the
user is loged in, then pick the Core treatment (defined in the
mediawiki.searchSuggest RL module) or Vector's Vue.js-based treatment of
the search widget based on their user ID. If not, then fall back to
picking the treatment based on VectorUseWvuiSearch.

Supporting changes:

* Update initSearchLoader() in skins.vector.js/searchLoader.js to check
  whether the body.skin-vector-search-vue exists

* Remove wgVectorUseWvuiSearch from the skins.vector.js RL module's config

* Update the performance-related metrics collection to check which
  module is being loaded rather that use the above

Bug: T261647
Change-Id: Idc978392f5db14f0ae2b06ade0175fe534f4ae70
2021-01-26 12:02:01 +00:00
jenkins-bot 93578b0d77 Merge "Create .mw-body-header element for body content" 2021-01-26 02:56:20 +00:00
Jan Drewniak 03d61e12c9 Create .mw-body-header element for body content
For language-in-header feature, edits the <header> element to
contain:
- page title,
- language selector
- tagline (siteSub)
- Indicators

These elements are associated with header/meta content so grouping
them inside one header element makes sense semantically.

Bug: T248761
Change-Id: Ief6c4936d1ebe381432369f8d86419da5f7c6cae
2021-01-25 23:57:47 +01:00
jenkins-bot 27ad6eab12 Merge "Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch" 2021-01-25 22:47:49 +00:00
jenkins-bot 407036710c Merge "Align the menu dropdown list to the end of the "more" button." 2021-01-25 22:39:51 +00:00
jenkins-bot 162cf8449d Merge "Languages can be moved out of sidebar" 2021-01-25 22:38:12 +00:00
Jan Drewniak 4a959a6878 Align the menu dropdown list to the end of the "more" button.
Instead of aligning the dropdown list to the starting edge of the
"more" button, this aligns the dropdown list to the end of the
"more" button, preventing any potential horizontal scrolling.

The containing list box is right-aligned, but this does not affect
the text alignment.

Bug: T267325
Change-Id: I8b889f8314519b8c6a74c661aca773b9b546657b
2021-01-25 15:52:16 +00:00
Nicholas Ray 53f49c5c64 Rename wgVectorUseCoreSearch to wgVectorUseWvuiSearch
This allows better compatibility with FeatureManager (e.g. can use
requirements such as REQUIREMENT_LATEST_SKIN_VERSION). It will become
especially useful in I70277c1082a504fbd5f6023e9873e8071de7e35d and when
A/B testing search.

Bug: T270202
Change-Id: I3a063e0b085765ea1db3c4478fb30c11b0942b75
2021-01-22 16:25:46 -07:00