Commit graph

1267 commits

Author SHA1 Message Date
jenkins-bot 7812db242e Merge "Make sticky header edit the default" 2023-01-30 19:02:31 +00:00
Roan Kattouw 5bcc1597ca search: Fix unclickable search footer
Clicking the bolded text in the search footer didn't work. This change
fixes that by working around the underlying issue, rewriting the search
footer template to use v-html instead of v-i18n-html. I don't know
exactly know why this works, but it does. Hopefully we'll be able to
fix the underlying issue and undo this workaround in the future.

Bug: T327229
Change-Id: I5d05d6ade1a34b12163bb96aa888ed3cfee78b4d
2023-01-30 18:18:29 +00:00
Bartosz Dziewoński 7077fedcbd Enable sticky header on all talk pages
Bug: T328133
Change-Id: Ib72d7aa9334bdb67a11dc0220eb731d94f050243
2023-01-27 15:30:55 +00:00
Jon Robson 2c54053ba7 Print: Hide table of contents and nav menus in print
Additional change: use !important to make sure this change
is final.

Bug: T327448
Change-Id: I8bc919bd24bfa21d4a11ba3a2b2ffa55801b698f
2023-01-26 08:37:25 -08:00
Jon Robson 8173c91a4e Limited width made persistent for anonymous users
Depends-On: Ic3b6eec19953932c697ab5bf48c33a4ac1841b07
Bug: T321498
Change-Id: I141a744abe7528203e6e05bf89ea225125319eb4
2023-01-25 17:51:02 +00:00
jenkins-bot 4e0c95b130 Merge "Account for temporary row in grid template row" 2023-01-25 01:08:05 +00:00
bwang a4f0fef502 Account for temporary row in grid template row
Bug: T327714
Change-Id: I8e68a0c562a3972055ce204192e070d5944d455e
2023-01-25 00:38:03 +00:00
Jon Robson 55bb37f2ab Moves feature classes from BODY element to HTML element
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.

Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.

Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
2023-01-24 18:22:13 -06:00
Jon Robson 93c833030b Make sticky header edit the default
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.

Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
2023-01-24 19:48:48 +00:00
bwang 05c6f9ecd4 Define grid template row for .mw-body grid container to ensure the grid cell containing the content will expand in height when needed
Bug: T327714
Change-Id: I8f2f9e8a0f6009be5ffa7f9319172169df253180
2023-01-24 11:22:22 -06:00
jenkins-bot 2843a7ebd9 Merge "Add temporary extra grid-area for content translation extension" 2023-01-24 15:55:59 +00:00
Jan Drewniak f93dbd3c79 Add temporary extra grid-area for content translation extension
Adds an extra grid area for content translation
so that it doesn't interfere with the page header
on user contribution pages.

Bug: T327715
Change-Id: I68d2c9dbe50dcdfe1924f29a96b48ab07bcc5f10
2023-01-24 07:38:45 -08:00
jenkins-bot 07faf76311 Merge "Fix grid blowout with limited width turned off" 2023-01-24 14:16:18 +00:00
jenkins-bot a8eaee8d1d Merge "Work around sticky-positioned layers disabling subpixel rendering" 2023-01-23 21:37:33 +00:00
Bartosz Dziewoński 1d45abb015 Work around sticky-positioned layers disabling subpixel rendering
Adding 'contain: paint' to the TOC container works around the issue.
This property is intended to prevent element's rendering from
affecting other elements, so it makes sense that this works.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Because this property also clips the rendering of the element to its
bounding box (similar to 'overflow: hidden'), we need to move some
negative margins to this element from its children, otherwise the TOC
expand/collapse arrows would be cut off.

Bug: T327460
Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
2023-01-23 21:51:40 +01:00
jenkins-bot 1ebe553429 Merge "Change limited-width toggle to appear at 1400px" 2023-01-23 18:29:01 +00:00
jenkins-bot f25eccaac7 Merge "DI: Make pinnable elements work on Safari 13 and earlier" 2023-01-23 18:12:42 +00:00
Jan Drewniak 40d1a89b42 Change limited-width toggle to appear at 1400px
Bug: T326887
Change-Id: I256866f615c8c0f10b29e6135faca6add16ff195
2023-01-23 17:59:13 +00:00
jenkins-bot 9650eae741 Merge "Remove code to disable new search on Wikidata" 2023-01-23 14:25:22 +00:00
Derk-Jan Hartman ff830f201e DI: Make pinnable elements work on Safari 13 and earlier
The pinnable element would cause exceptions on older versions of
Safari during the setup and the ToC menu would show instead of being
pinned and hidden.

Bug: T327602
Change-Id: I99b656d0070d3e9af5641274134736b742c28f58
2023-01-23 09:17:16 +00:00
bwang 68c52a1efa Fix grid blowout with limited width turned off
Bug: T327423
Change-Id: I64f33c88e8fb9f8db87befa393a48c4eaf0a8136
2023-01-19 17:10:45 +00:00
bwang 128a01bd35 [Clean up] Remove CSS and HTML from cached TOC html
Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da
Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-16 17:21:12 -06:00
Moh'd Khier Abualruz 96ff431213 Table of contents Collapse/Expand not working
Bug: T327064
Change-Id: Ica3b43d51169d33b01d7203c3672c301e775ec04
2023-01-16 18:06:30 +01:00
Moh'd Khier Abualruz 29a2254b9a Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.

Known Issues:
 - Collapse/Expand not working

Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 12:39:05 +01:00
jenkins-bot eb78a83856 Merge "Scale server-rendered search box with browser font size" 2023-01-13 23:04:25 +00:00
Jan Drewniak 0daa4da3c4 Followup to 4d1c0b89 Override PinnableElement behaviour at low resolutions.
The media query for the CSS portion of this feature
should not include the `screen` portion because
that's included in the top-level import in skin.less.

Bug: T326364
Change-Id: I1ab0e321dde908982834c92ee428b512218bbe3d
2023-01-13 17:18:20 -05:00
jenkins-bot 13cc033ab0 Merge "Remove extra border that show in a page tools dropdown when a menu is hidden" 2023-01-13 21:52:48 +00:00
Nicholas Ray 2b397d05d2 Scale server-rendered search box with browser font size
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.

Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
2023-01-13 14:36:02 -07:00
jenkins-bot 70ddd1f3f7 Merge "[Clean up] Remove unnecessary container and CSS in sticky header" 2023-01-13 20:57:24 +00:00
bwang 4bf1a7b6f6 Remove extra border that show in a page tools dropdown when a menu is hidden
Fixes this https://phabricator.wikimedia.org/F36201839, which you can see for anon users, who have an empty "Actions" menu inside the page tools dropdown

Follow-up: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
Change-Id: I617b37fbdb7b300a4266fd9f927d81e6a63d74bc
2023-01-13 20:41:34 +00:00
jenkins-bot ac87bd6c1b Merge "Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units" 2023-01-13 20:29:09 +00:00
bwang 787b065f99 [Clean up] Remove unnecessary container and CSS in sticky header
Change-Id: I7a1f75e8997ea6c87955f72c971f6d1d08e6ab22
2023-01-13 20:11:21 +00:00
jenkins-bot 5f53d90e59 Merge "Override PinnableElement behaviour at low resolutions." 2023-01-13 19:52:28 +00:00
Nicholas Ray 112cd9a085 Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.

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

Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
2023-01-13 12:20:49 -07:00
Jan Drewniak 4d1c0b8940 Override PinnableElement behaviour at low resolutions.
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.

We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.

A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.

CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.

features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).

Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
2023-01-13 18:09:11 +00:00
bwang 888170264f Misc page tools visual fixes
- Fixes extra spacing introduced in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/877239
- Addresses last of design adjustments in https://phabricator.wikimedia.org/T324877#8519138

Bug: T324877
Change-Id: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
2023-01-12 15:42:47 -06:00
bwang d309544c80 Add default width and max width to dropdowns in modern Vector, preserve existing styles for legacy Vector
Bug: T324877
Change-Id: I2dc109e7601fa3a15b5710f0c1676066368a6e6e
2023-01-12 11:45:13 -06:00
jenkins-bot 3c761ff518 Merge "Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent" 2023-01-12 16:22:58 +00:00
Jan Drewniak 98c92edbba Factor out functions in PinnableElement.js
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.

The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.

Class toggling is split into a separate
function called `togglePinnableClasses()` as well.

This should have no functional impact.

Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
2023-01-11 23:58:30 +00:00
bwang 8539ab3bd8 Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent
Results in 16 visual progressions

- Simplify/remove mixins in TableOfContentsUnpinned.less

Bug: T325554
Change-Id: I8246b6ebbf91deac7896fd46834f090e259d75ca
2023-01-11 15:47:09 -06:00
bwang 5195949674 Fix mustache template rendering when TOC is rerendered after an edit
Bug: T326682
Change-Id: I7e8f5572a33c4440aed5e6e525a48d8abe4a2afb
2023-01-10 19:12:55 -07:00
bwang 4efafaf374 Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb

- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width

Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
2023-01-10 17:21:26 -06:00
bwang 22c0e38997 Fix alignment/spacing of grid column items
-Addresses this feedback: https://phabricator.wikimedia.org/T324877#8505388

Bug: T319348
Bug: T324877
Change-Id: Ic371716f016309fb105c30b8e02e106c1de8310d
2023-01-10 11:36:53 -06:00
bwang 96932f847c Fix alignment of searchbar by introducing CSS grid to the header on viewports greater than desktop-wide
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980

Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
2023-01-10 11:34:27 -06:00
bwang c298d5d1ea Page tools styling followup
- Address feedback in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/870996/10/resources/skins.vector.styles/components/TableOfContentsPinned.less#28
- Avoid handling MainMenuAction styles in PinnableElement.less, move to MainMenu.less
- Reduce top spacing of the language alert
- Allow labels in menus to wrap
- Update TOC line height to match prototype

Bug: T324877
Change-Id: Ic5dc456d6e6126d3ff6cee854e6023cf5cf2595d
2023-01-09 17:07:13 -06:00
NikG d39b5c958a Update language dropdown for pages not supported in other languages
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.

This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.

Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
2023-01-06 16:40:36 +00:00
Jon Robson a43d522331 Fix language button fallback
* Don't hide language button
This code can be removed now  T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.

Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes

Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
2023-01-06 00:45:31 +00:00
jenkins-bot aa9e3a8f3a Merge "Update TOC spacing to match spec" 2023-01-05 20:29:57 +00:00
bwang 9db08ef300 Update TOC spacing to match spec
Bug: T324877
Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
2023-01-05 12:41:25 -06:00
Lucas Werkmeister 7842d15382 Remove code to disable new search on Wikidata
This should be a no-op since Wikibase change I6a7a42a64c (commit
19267799da), which enables the wikibase.vector.searchClient module on
wikidatawiki as well; assuming no problems turn up when that is
deployed, we should be able to merge this soon afterwards.

Bug: T316093
Change-Id: I8d7aaf67d98cc015d94bb6aa1c71a92905dad024
Follows-Up: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
2023-01-05 13:39:34 +01:00
jenkins-bot bffa375753 Merge "Add label and title attribute/tooltip to full-screen toggle button" 2023-01-05 02:11:16 +00:00
Jon Robson cf56a37b00 Add label and title attribute/tooltip to full-screen toggle button
Bug: T323625
Change-Id: If12837cd0e3c443a023671b2a9ab85098ffd6119
2023-01-05 00:56:39 +00:00
jenkins-bot 87794f6b0d Merge "Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC" 2023-01-05 00:35:57 +00:00
bwang 8e4da83908 Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term

Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2023-01-04 17:48:03 -06:00
jenkins-bot 1aab03d7a5 Merge "Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization" 2023-01-04 20:34:05 +00:00
jenkins-bot 18ff4cdced Merge "Update dropdown and pinnable element styles to match spec" 2023-01-04 20:34:02 +00:00
bwang af21dec1c1 Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization
Bug: T324877
Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2023-01-04 11:24:57 -05:00
bwang fe105edcdb Update dropdown and pinnable element styles to match spec
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools

Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
2023-01-04 11:24:55 -05:00
jenkins-bot 8052762455 Merge "Fix page title from overflowing" 2022-12-23 04:53:12 +00:00
Bartosz Dziewoński e076351311 Work around browser inconsistencies with 'clear' + 'margin-top'
No visual changes expected.

Bug: T325391
Change-Id: I20c5aa5d0a2018f32dff6948cd210fecc7ba760f
2022-12-22 16:26:19 +01:00
bwang 7f2118e756 Update header spacing to match spec
Bug: T324877
Change-Id: I47be192f5ba726904dc225afd54ee9112e97dc10
2022-12-20 17:58:54 -06:00
jenkins-bot ac2fc83112 Merge "Add generic classes to pinnable container" 2022-12-20 23:46:11 +00:00
bwang a348db9969 Add generic classes to pinnable container
Bug: T324877
Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-20 17:22:11 -06:00
jenkins-bot 7eb6d886be Merge "Fix missing TOC scrollable indicator" 2022-12-20 21:49:44 +00:00
bwang a50654309d Clean up cached HTML code
Follow-up: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
Bug: T317900
Change-Id: Idfbd77c6b84c0c8541a81effc272f4f36f17b823
2022-12-20 17:42:21 +00:00
Lectrician1 34b822196b Fix page title from overflowing
Bug: T319052
Change-Id: Iab97354b4d1001d718c66d7e4ace8edc9801a775
2022-12-20 03:32:25 +00:00
bwang e585211336 Fix missing TOC scrollable indicator
Introduced in Iea0d73005b91589c58ae38a3a640fa90c18a860d on Dec 5

Bug: T325388
Change-Id: I03f6d991492cbbdcfda63ed5a617cf26c691635f
2022-12-16 13:39:13 -06:00
bwang 6c817e932f Use features.js for main menu pinning functionality
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu

Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
2022-12-16 12:56:54 -06:00
bwang 46f17487fd Update main menu templates and classes to be consistent with other pinnable elements
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less

Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-16 17:34:23 +00:00
jenkins-bot 41116ede40 Merge "Mark active sections even when their headings are in wrapper elements" 2022-12-16 00:36:12 +00:00
bwang 9abdaf54c3 Remove -pinnable-element postfix from PinnableElement.mustache
This allows '.vector-main-menu' to correspond to MainMenu.mustache, and 'vector-page-tools' with PageTools.mustache

Bug: T317900
Change-Id: I65c0d7cffbdf1cf9e59cde0c0fc4dca788e799de
2022-12-15 22:46:51 +00:00
jenkins-bot 9463861054 Merge "Refactor page tools, main menu, and TOC components" 2022-12-15 22:44:05 +00:00
jenkins-bot ebdea1b0df Merge "Clean up cached .vector-menu-portal code" 2022-12-15 22:30:30 +00:00
bwang 97de09dcba Refactor page tools, main menu, and TOC components
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention

Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
2022-12-15 14:23:25 -08:00
bwang f006e00677 Clean up cached .vector-menu-portal code
Follow up to I884cd33938b2670bddc90f698d8f61f37c6c29d4

Change-Id: Icd329aa4a43aa738b0127f7147b5401e07d90c05
2022-12-15 14:30:58 -06:00
jenkins-bot be98832afb Merge "Add comment to pinnableElement isPinned method" 2022-12-15 00:11:44 +00:00
jenkins-bot bfc7856488 Merge "Make h2 use explicit font for ckb on Linux to avoid broken ligatures" 2022-12-14 23:05:34 +00:00
Nicholas Ray a8aeb62a93 Add comment to pinnableElement isPinned method
Follow-up from the review of 856718 which requested a comment be added to the
isPinned method pointing to future plans with TOC.

[1] https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/856718/28..38/resources/skins.vector.es6/pinnableElement.js#53

Change-Id: I899b6741e2407fe66aaaba8617974a9d58237ee6
2022-12-14 15:19:16 -07:00
Bartosz Dziewoński f6c85143c6 Mark active sections even when their headings are in wrapper elements
This partially reverts 94c7f31082.
Headings inside wrapper divs etc. actually are rendered in the table
of contents.

Bug: T318044
Bug: T324869
Change-Id: Ie3181d9e9605cd2b5897b12931572057e80d6661
2022-12-13 23:17:57 +01:00
jenkins-bot e7cd7df568 Merge "Clean up code handling cached HTML for 3 patches" 2022-12-12 22:02:01 +00:00
Andre Klapper 62a1406739 Make h2 use explicit font for ckb on Linux to avoid broken ligatures
Bug: T306317
Change-Id: I3104533544de78bdf0610b738337b9220261223e
2022-12-10 13:25:25 +01:00
bwang 81348a659c Remove TOC AB test code
While removing this we also noticed that we check the value of
isMainPage. This doesn't seem like a good idea as most main pages
do not have a table of contents, so it seems like adding
unnecessary complexity for a state that doesn't exist in practice.
The existing code path also doesn't work as it adds a table of contents
unstyled to the page.

Bug: T324874
Change-Id: Idaeff6ace5912ea74ed9d335526027c4690ac8fa
2022-12-09 16:07:52 -08:00
bwang dbb4868452 Clean up code handling cached HTML for 3 patches
Follow-up: I82f23e69b0249c844af9e45fec342217a0755893
Follow-up: I85aec387f87126a17e760fd9fd10e10572ff3152
Follow-up: Iea0d73005b91589c58ae38a3a640fa90c18a860d

Bug: T318013
Change-Id: I2f231bbaec33bc6072750781c12e85838042dccf
2022-12-09 22:56:34 +00:00
jenkins-bot a33dffb281 Merge "Simplify grid styles now that grid is no longer needed to position ToC" 2022-12-09 20:22:22 +00:00
bwang 2e095bd066 Simplify grid styles now that grid is no longer needed to position ToC
Bug: T318013
Change-Id: Id2dda853c18673ee98ca674128f5da5aa8370cc4
2022-12-09 11:51:07 -06:00
Nicholas Ray 8359e9f234 Remove feature name comment in pinnableElement.js
This was an artifact that remained after the switch from data-is-persistent to
data-feature-name. It can and should be removed now.

Change-Id: I6b50d243c7de3d46fb8c4baf398574d5c4247497
2022-12-09 09:42:45 -07:00
Nicholas Ray 24055a6752 Set default pinnable state for page tools
* Leverage the infrastructure around feature management to handle the page tools
pinning and persistence

* Make pinnableHeader.js leverage features.js if the data-feature-name attribute
is set

* Sets tests/.eslintrc.json ecmaVersion to 2018 to enable destructuring in test
files.

* Adds a isPinned helper method to pinnableElement

* Add a logged in requirement so that the pinned feature is disabled for
anon users.

Bug: T322051
Change-Id: Ib86282216882fa94e37b7088a3f4bd0c1bcf6cd4
2022-12-08 14:44:07 -07:00
jenkins-bot aafd9eabaf Merge "search: Remove unused generateUrl() function" 2022-12-08 12:56:08 +00:00
jenkins-bot 1a8f4ea158 Merge "Move limitedWidthToggle.js and features.js to skins.vector.es6 module" 2022-12-08 00:12:55 +00:00
jenkins-bot eb9040b859 Merge "search: Optionally support load-more events" 2022-12-07 23:58:27 +00:00
Nicholas Ray 87959c8a59 Move limitedWidthToggle.js and features.js to skins.vector.es6 module
In preparation for 856718 where pinnableElement.js makes use of features.js,
move features.js and limitedWidthToggle.js out of the skins.vector.js module and
into the skins.vector.es6 module. This will make it easier to use by
pinnableElement.js without needing the es6 module to depend on the es5 module.

This does have the negative side-effect of causing the limited width feature to
not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was
discussed with our product manager to be acceptable. Additionally, this
maintains the status quo as the toggle button does not currently show in IE11
(which may be a bug).

Bug: T322051
Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
2022-12-07 16:45:52 -07:00
Jon Robson a7f008b9bc Page tools: Main menu is a dropdown
This is an incomplete styling of the menu.

This should be enough to start an initial design
review and unblock other work on the dropdown.

Out of scope for this patch:
- Pinning (being done in T317900)
- Design (will be done in follow up)

This should cause no visual regressions in Pixel.

Bug: T317899
Change-Id: Id7b47cc16fc8cf93d406687198ba37acf7a9cf24
2022-12-07 23:19:29 +00:00
jenkins-bot aec2fec354 Merge "search: Adapt to Wikibase instead of hard-coding wikidatawiki" 2022-12-06 23:09:53 +00:00
Lucas Werkmeister 6fc25f87b9 search: Remove unused generateUrl() function
As far as I can tell, this has been dead code ever since it was
introduced in change Ica040cd18d (commit aa10668e6d), and was never
called; the effective search URL was initially constructed via inputs to
the search form (e.g. a hidden input for wprov), and later the separate
urlGenerator.js was added. (Also, “suggestion” is not a valid
Special:Search paramater as far as I can tell.)

Also add some tests for the separate urlGenerator.js, to make up for the
other tests being removed.

This reduces the module size of skins.vector.search enough that we can
decrease the bundle size test config to 3.2 kB [KiB].

Change-Id: I6be5ba362402c2c2ec582d9a0192c80f46e7a7ce
2022-12-06 13:35:45 +01:00
Michael Große 820c173644 search: Optionally support load-more events
If the wgVectorSearchClient supports it (the default implementation
doesn’t), add a visible-item-limit to the cdx-typeahead-search, and wire
up the resulting load-more event (new in Codex v0.3) to load additional
search results on scroll.

The hard-coded visibleItemLimit (7) is chosen to match the default limit
of the wbsearchentities API, but ultimately arbitrary; we can look into
how to make this number configurable later, if necessary.

This increases the module size enough that we need to bump the bundle
size a bit more.

Bug: T322333
Change-Id: Iadade9cbf48457cfeabc78439624602ec3f98782
Co-Authored-By: Jon Robson <jdlrobson@gmail.com>
Needed-By: I67fac3b209d6a1ab2661e1e1c0681edd8472ac6c
2022-12-06 13:35:22 +01:00
bwang e1d1de809f Use JS to move the ToC into page title to fix a11y issues and simplify styles
- The collapsible ToC absolute positioning solution has been preserved to be used on no-js mobile resolutions
- The collapsible ToC grid based positioning solution has been removed
- ToC styles have been refactored and organzied

This patch involves HTML changes. In order to avoid additional complexity, this patch disables the collapsible ToC feature for users above the mobile viewport with cached HTML. The ToC continues to be automatically collapsed on mobile viewports for cached HTML users.

This patch results in 9 expected visual changes. In order to see them you need to take the following steps:
1. Run `./pixel.js reference`
2. Checkout the following PR in pixel https://github.com/wikimedia/pixel/pull/149
3. Run ./pixel.js test -c 859143
It should look like this: https://jmp.sh/ZVQqDZw7

Bug: T318013
Change-Id: Iea0d73005b91589c58ae38a3a640fa90c18a860d
2022-12-05 17:24:55 -06:00
jenkins-bot 8a2a9202dc Merge "VISUAL CHANGE: Fix extra padding around icon buttons < tablet viewports" 2022-12-05 22:01:43 +00:00
bwang 29900128a4 VISUAL CHANGE: Fix extra padding around icon buttons < tablet viewports
Fixes https://jmp.sh/qBcSfEA2

Bug: T323172
Change-Id: I3bf44cd12248dc2633a6f46c164d53de34e819e5
2022-12-05 14:26:58 -06:00
jenkins-bot 73ad27babf Merge "[Refactor] Rename Portal component to MainMenuGroup" 2022-12-05 19:56:59 +00:00
jenkins-bot 47d793f370 Merge "Page tools: Hide dropdown when not pinned" 2022-12-02 21:12:10 +00:00
Lucas Werkmeister e718f53d97 search: Adapt to Wikibase instead of hard-coding wikidatawiki
Since Wikibase change I01afb269d6 (commit ee4c555878), Wikibase has a
copy of the “is wikidatawiki” condition to temporarily continue
supporting the old search on Vector 2022. As suggested by Michael there,
we can change the condition here to avoid having the same check in two
places, and instead detect whether Wikibase loaded the legacy search
ResourceLoader module (which means we shouldn’t install the new search)
or not (in which case Wikibase Repo is either not installed at all, or
it’s providing a custom wgVectorSearchClient to support the new search).

With this change in place, once Wikibase is ready to support the new
search everywhere (including on Wikidata proper), we only need to change
the condition in one place (in Wikibase), and can then clean up the code
here at any later time.

Bug: T316093
Change-Id: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
2022-12-02 17:13:18 +01:00
Jon Robson 769818514d [Refactor] Rename Portal component to MainMenuGroup
The Portal component is only ever used inside the MainMenu component

Change-Id: I3a3c58b11416f28c58f02a8bdfdacfbb7df6de9b
2022-12-01 14:45:52 -08:00
Jon Robson 595f520e44 Legacy: Group template/styles together to avoid confusion
This was confusing me while working on the Portal.mustache file.

Bug: T317899
Change-Id: I884cd33938b2670bddc90f698d8f61f37c6c29d4
2022-12-01 22:31:12 +00:00
Jon Robson ded2784f0c Page tools: Hide dropdown when not pinned
Follow up to I85aec387f87126a17e760fd9fd10e10572ff3152

Bug: T318013
Change-Id: I095ecf0333c7181d0a2d81902faed309b1d56da6
2022-12-01 22:30:19 +00:00
Jon Robson dca02fee92 Page tools: Move styles from PinnableElement to PageTools
These styles are not going to be needed in the main menu so are
not generic. Moving to the PageTools component.

Bug: T317899
Change-Id: I17b8ecd645c593c0368ea158265dbf8f6a575345
2022-12-01 18:47:38 +00:00
Jon Robson 86c64edb9c Bug: Fix when Vector 2022 sidebar collapses
Vector 2022 sidebar is automatically collapsed on
exactly 1000px breakpoint. Should do that at 999px.

Bug: T321745
Change-Id: I052e99ccfda10786fabf54ea6cf089aeb3ce4e75
2022-12-01 01:05:37 +00:00
bwang d150131561 Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet

Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-30 17:17:20 -06:00
Jon Robson e7b4edf7a6 [Refactor] Rethink Dropdown component
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component

Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)

MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.

MenuContents mustache template (future component) is added to DRY up
several of the new templates.

Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
2022-11-29 17:33:03 -08:00
bwang cb64e8f7ba Use PinnableHeader in the TOC all the time
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel

- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader

Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-30 01:09:43 +00:00
jenkins-bot 847f3baba7 Merge "Instrument toggle button" 2022-11-29 16:18:56 +00:00
Lucas Werkmeister 090500276d search: Don’t pass searchApiUrl into fetchByTitle()
Not all implementations will need this (e.g. the Wikibase search is
based on the Action API, not the REST API), so simplify App and move
this bit of complexity into the default search client instead.

As far as I can tell from MediaWiki code search [1] and Global Search
[2], nothing apart from Wikibase uses wgVectorSearchClient yet, so we
should be able to make this breaking change now.

[1]: https://codesearch.wmcloud.org/search/?q=wgVectorSearchClient
[2]: https://global-search.toolforge.org/?q=wgVectorSearchClient&namespaces=2%2C4%2C8&title=%28Gadgets-definition%7C.*%5C.js%29

Change-Id: I0d52e407c12b3fbf80cd36ed66c67da4cba9acbd
2022-11-25 15:00:16 +01:00
bwang 78b20092c4 Ensure more menu shows on lower resolutions
Bug: T323730
Change-Id: I874e93fed7287dd6276b8a47ba1ea15624b75d84
2022-11-23 20:58:23 +00:00
jenkins-bot 9be75feb0d Merge "Prepare styles for Page Tools menu" 2022-11-22 18:26:09 +00:00
Jan Drewniak 69f3dcd7a7 Prepare styles for Page Tools menu
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.

- New vector-menu-heading mixin shared between main menu headings
  and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
  dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
  child Menu template already contain <ul><li> elements.

Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
2022-11-22 12:57:29 -05:00
Jon Robson 836a58d120 Instrument toggle button
Bug: T322772
Change-Id: I3b03225beff7638d243312c843f132225b55d76c
2022-11-21 22:02:13 +00:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
bwang d6a99e2f08 Fix icon button spacing in sticky header
Bug: T323176
Change-Id: Iceea571a112b3ae7b07246326ec2bdae9fd0c50c
2022-11-21 18:13:46 +00:00
bwang 6eb5bd05fb Update ToC selector to account for page tools
Change-Id: Ib2504bf16969d3b6af2a827ae7b7cfd8aa5fc468
2022-11-18 11:15:16 -06:00
jenkins-bot 0244b2d41b Merge "Reintroduce h2 to Table of contents label" 2022-11-17 19:41:09 +00:00
bwang 1b4376c946 Reintroduce h2 to Table of contents label
Depends-on: I752eadc9bf54d58c799060a9eaefa0b125dd7952

Bug: T320451
Change-Id: Ic4ca5490a9a33cb319821bbdaa57d29f0ed9c887
2022-11-17 19:26:44 +00:00
jenkins-bot f4f416a1ce Merge "[Cleanup] Address FIXMES relating to cached HTML" 2022-11-17 17:35:46 +00:00
Jon Robson f31f0bbf50 [Cleanup] Address FIXMES relating to cached HTML
Change-Id: I6f5e97dde1f774e741a4236d1f6b49ad146cc236
2022-11-15 23:23:56 +00:00
jenkins-bot a0f7e2db32 Merge "Update TOC to use PinnableHeader" 2022-11-15 23:10:35 +00:00
bwang 0f7411bdf2 Update TOC to use PinnableHeader
- Update 'collapsed' naming convention to 'pinned'
- Introduce VectorComponentPinnableHeader

Bug: T317897
Change-Id: I752eadc9bf54d58c799060a9eaefa0b125dd7952
2022-11-15 16:37:50 -06:00
jenkins-bot 8c48541379 Merge "Rename TOC locales to be generic pin/unpin labels, standardize toc label locale name" 2022-11-15 01:19:03 +00:00
jenkins-bot 63dbf2ad06 Merge "Drop unnecessary watchstar icon classes on toggle" 2022-11-15 00:38:03 +00:00
bwang ddf8706ae4 Fix main menu button spacing when the VisualEnhancementNext flag is enabled
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border

Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
2022-11-14 22:32:51 +00:00
bwang 17bdb31de5 Rename TOC locales to be generic pin/unpin labels, standardize toc label locale name
- 'vector-toc-toggle-position-title' -> 'vector-pin-element-label'
- 'vector-toc-toggle-position-sidebar' -> 'vector-unpin-element-label'
- 'vector-toc-heading' -> 'vector-toc-label'

Change-Id: I4c45fa9a152e26691cc0b62ce8d40d00f8f2e617
2022-11-14 16:26:08 -06:00
Jon Robson 3e40a753b1 Drop unnecessary watchstar icon classes on toggle
These interfere with the toggle on certain pages
see T317710#8389485

Bug: T322673
Change-Id: I3e40cc0c5701a3c055ced1c74e9cac1b369586a3
2022-11-14 13:54:16 -08:00
Jan Drewniak 6b67e9adda Limited width toggle (0eb8811 follow-up)
Refactors styles for limited width toggle and
fixes issue with close icon not appearing.

Bug: T319449
Change-Id: If53c3921e54565c47eb0868329e0b79f60073792
2022-11-14 21:29:18 +00:00
bwang 6bff0011c1 Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback
Causes 20 visual progressions regardless of visual next flag, the ToC moves 1px when in the sidebar

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06

Bug: T321504
Change-Id: I4b3ec90d8e79791a1bf17ba02c9f9d722499bec8
2022-11-11 18:56:12 +00:00
jenkins-bot f5992cf7ee Merge "[Technical] Remove common Menu styles" 2022-11-11 18:36:42 +00:00
jenkins-bot f031d69668 Merge "Convert limited width toggle button from a div to a button" 2022-11-11 18:32:54 +00:00
jenkins-bot cd0250dbb4 Merge "Replace 'more' menu with page tools pinnable dropdown" 2022-11-10 22:21:38 +00:00
bwang 8f5b33fee3 Replace 'more' menu with page tools pinnable dropdown
Bug: T317897
Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-10 15:33:16 -06:00
Nicholas Ray 7a1059b98d Convert limited width toggle button from a div to a button
The toggle was a div that tried to act like a button. This commit converts it to
a button for semantic and accessibility reasons.

Change-Id: Idf5643926611ae8e9a7ec4163cf3cb1e51ec7310
2022-11-10 12:14:29 -07:00
Jon Robson c56505de85 Dropdown arrow pixel should only apply to modern Vector
This is leaking into legacy Vector as well.

Bug: T322673
Change-Id: Iec9714395539ae7739b4136c87b481a691e2a516
2022-11-10 01:38:30 +00:00
bwang 16da6a5e6a [Technical] Fix sticky header search input alignment when VisualEnhancementFlag is enabled
Visual changes when the flag is on

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888

Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
2022-11-10 00:48:07 +00:00
bwang e90b7e341f Add ColumnEnd.mustache and new grid styles to support third column
Bug: T317897
Depends-On: Ibf304843a62d5269992a01eb826edf71ce8d3c35
Depends-On: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
Change-Id: Ie7d31df972ff68313b2437ff14b7b6b8d7078204
2022-11-09 11:54:30 -06:00
Jon Robson 1657cbc6bd [Technical] Limit dropdown arrow styling to child headings
Since dropdowns can now themselves contain headings in the content
area we need to limit this rule. While this is current theoretical
it will soon become reality in Ie7d31df972ff68313b2437ff14b7b6b8d7078204
when we will introduce the first of these components.

Note in future we will likely restore this when we make those menus
themselves collapsible, but that will likely be part of a different
component and fixing this now is better than having a non-functional
collapsible item.

Change-Id: I24abb08a098dd75ad694da0b47b8be0897ed9b30
2022-11-09 16:13:49 +00:00
Nicholas Ray d556f74c4c Fix TOC misaligned when max width option is disable
Since the TOC container is overlaid on top of the content container when the TOC
is not pinned, we always want the width of those two containers to match or else
misalignment could occur. This commit keeps the
`.mw-table-of-contents-container` selector in sync with the
`.mw-content-container` selector in terms of width.

Bug: T322162
Change-Id: I2fe26dc616cc46e1b3c9ce4f2ac63a23da415fa9
2022-11-08 14:13:32 -07:00
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