Commit graph

390 commits

Author SHA1 Message Date
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
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
Clare Ming a0b1b5b056 Fix TOC fadeout proper
Bug: T302076
Change-Id: I247a1a92e6eaa3413053514866966393ff3c1964
2022-04-06 16:25:07 -06: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
Clare Ming 2bfdbe74b6 Do not show footer menu in print mode
Bug: T300178
Change-Id: I48df6c39019dc0551ffb0ee559c51d5f6b31c825
2022-03-29 17:24:18 -06: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 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
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
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
bwang be2abb581c Hide sticky header and ULS button in print mode
Bug: T300178
Change-Id: Ie1eb02530ec62fa011da4be45a61d26522c1650b
2022-02-25 17:32:35 +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
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
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
bwang 301e09916d Toggle ToC sections when clicking toggle button
Bug: T300167
Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-16 15:48:28 -06:00
jenkins-bot 0f49a257d1 Merge "Collapse ToC by default & expand sections when clicking section headings" 2022-02-15 19:31:18 +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
bwang 2a83dad477 Add back flex-grow for sticky header search bar
Change-Id: Id503163d85dfc519d4c47f95e4567dcacfa7458e
2022-02-14 13:08:07 -06: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
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
Clare Ming 4d8b548f5f Hide sticky header below 1000px port width
Bug: T298836
Change-Id: Ie524f997d2f9847252afc215d3ac589e511ace07
2022-02-03 13:54:16 -07: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
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