Commit graph

522 commits

Author SHA1 Message Date
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
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
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 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