Commit Graph

493 Commits

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