Commit graph

82 commits

Author SHA1 Message Date
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
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
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 1b4376c946 Reintroduce h2 to Table of contents label
Depends-on: I752eadc9bf54d58c799060a9eaefa0b125dd7952

Bug: T320451
Change-Id: Ic4ca5490a9a33cb319821bbdaa57d29f0ed9c887
2022-11-17 19:26:44 +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
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
bwang f73d255810 Replace aria-labelledby in ToC with aria-label
Bug: T318178
Change-Id: I7abcc977276b979c5a515fbbcccf42d7c993a130
2022-11-14 18:10:38 +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 9bb2f5a55a [Technical] Add DropdownContents.mustache
Bug: T317897
Change-Id: I62edc311a7a2434ab83592d99e870dd82d775de4
2022-11-08 13:56:21 -06:00
Jon Robson c9cdaadb5e [Technical] Separate Dropdown template into 3 templates
Use the new format to remove the need for getTemplateParser
in SkinVector

Bug: T319349
Change-Id: Ic4ac1d6d58099a689c29c16b3029bf43a849e50e
2022-11-03 20:41:20 +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 491519808f Merge "Limited width toggle" 2022-11-01 21:06:54 +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 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
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
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
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 f8af368121 Merge "search: Reduce skins.vector.search module size" 2022-10-04 23:35:08 +00:00
jenkins-bot e8d5796544 Merge "search: Add some tests for instrumentation.js" 2022-10-04 23:35:06 +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
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
Lucas Werkmeister 0150a0cb26 search: Add some tests for instrumentation.js
Change I45dda26cb5 removes some code, and in the process reduces the
branch coverage of the skins.vector.search module below the threshold of
25% that CI requires; add some tests for instrumentation.js to bring the
branch coverage up again.

Change-Id: I5d7ae019b3219b410c658583a6d72cf56d0cc1c5
2022-09-30 19:05:03 +02:00
jenkins-bot 0387f14d08 Merge "Modify Vector 2022 skip-links" 2022-09-26 19:07:07 +00:00
Jan Drewniak 5a951e2159 Modify Vector 2022 skip-links
- Changes the "skip to content" link to point to "#bodyContent"
  instead of "#content".
- Adds a `aria-labelledby` attribute to #bodyContent.
- Changes the table of contents "back to top" link to
  point to "#" instead of "#top-page".
- Removes "#top" link as it appeared unused.
- Updates Jest snapshots.

Bug: T312818
Change-Id: I86443066d45c818d6f137d70ebe36798eba66f13
2022-09-26 17:34:23 +00:00
bwang 600dd1496a Style active top level section differently than ordinary active TOC sections
Bug: T316032
Change-Id: I662a03f7f7b1e1fb65c365b3db6096cae75fdeb2
2022-09-20 16:57:53 -05:00
Nicholas Ray 8295148ae2 Add Jest tests for TOC before/after edit
* Also increase code coverage threshold

Bug: T316571
Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-19 16:40:38 -06:00
jenkins-bot ddc3125f74 Merge "Remove dependency on .cdx-typeahead-search--active class" 2022-09-07 01:29:45 +00:00
Anne Tomasevich 8e04c79dba Remove dependency on .cdx-typeahead-search--active class
This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.

Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e
2022-09-01 16:42:11 -04:00
Jan Drewniak f14b4fe5f1 Add tests for dropdownMenu.js
Adds tests for the addPortletLinkHandler, which should
add an icon element to items added via 'mw.util.addPortletLink'
and conditionally move elements from the toolbar into
the more menu at narrow widths.

- Adds tests for dropdownMenu.js
- Adds associated Jest snapshots
- Stubs the mediawiki.page.ready module
- Updates mockMediawiki.js to 4.6.0
- Adds global mock for mw.util.showPortlet()
- Cleans up tests using local versions of these mocks

Bug: T314798
Change-Id: I81394d840321916756a41a23c40d96c4b6341931
2022-09-01 13:11:22 -07:00
bwang 9c6f6709c6 Create new sticky toc container
Bug: T313060
Change-Id: Ia263c606dce5a6060b6b29fbaedc49cef3e17a5c
2022-08-31 21:27:06 +00:00
Moh'd Khier Abualruz 407046c759 [ToC] Show new/modified sections after publishing an edit (new floating ToC)
- All Frontend
- All in Skin

Bug: T307251
Change-Id: Icae2f03f0005b7607448127b793ff3c0010e5817
2022-08-15 20:02:49 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
Jan Drewniak 942cd5b0f6 Sticky header AB test bucketing for 2 treatment buckets
For idwiki/viwiki, we wish to run the sticky header edit button AB
test so that treatment1 group sees the sticky header without edit
buttons, treatment2 groups sees the sticky header with edit buttons,
and the control/unsampled groups see no sticky header at all.

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

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

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

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

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

Bug: T312573
Change-Id: I15c360fdf5393f5594602acc33b5b916e904016d
2022-08-08 21:14:02 +00:00
Clare Ming 5b55a2f894 Minor fixes to TOC hide/show buttons
Bug: T307901
Change-Id: I37c6b3b4c5c20e914423c311795dbccce2a7b3fd
2022-08-04 15:20:58 -06:00
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

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

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.

Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
2022-07-21 12:41:39 -06:00
jenkins-bot 3c8796ee04 Merge "Search: Use Codex and Vue 3 instead of WVUI and Vue 2." 2022-07-19 15:18:29 +00:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar

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

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

Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
2022-07-18 12:54:47 -07:00
Jon Robson 2a4ac3152b Move Vector menu class logic into Menu mustache template
Cleaned 'vector-menu' in SkinVector file, updated
includes/templates/Menu.mustache and includes/templates/legacy/Menu.mustache.

Bug: T290281
Change-Id: I7286fa82abfd437a228b9ac07ac781210d7cd98f
2022-07-07 12:34:23 -05:00
Jon Robson e1942cec4e Fix sticky header edit icons during A/B test init
- Add test case for T310750

Bug: T310750
Change-Id: Ie52a7227f337dd6cdb0ab441986aa2be6139f949
2022-06-22 09:38:19 -06:00
Jon Robson 5fdd66fa3b Disable table of contents toggle on VE activation
While the table of contents is not updated by VisualEditor
we should hide it.

Bug: T307900
Change-Id: I246fbe0069329ef78735147b8d3f280433155158
2022-06-10 15:39:21 -07:00
Jon Robson deb54f9452 Correctly hide the sticky header when it is not in use
When the  vector-sticky-header-enabled class is removed from the body
it means the feature is not enabled, it doesn't mean the sticky header
should be invisible.

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

Bug: T308343
Change-Id: I4ecd6524146f203af926847812e20275c9573cab
2022-06-01 19:07:49 +00:00
Jon Robson b031247336 Adds tests for stickyHeader A/B test logic
Follow up to I3effbb3e5f0bb1c8663255936458e3849511dfca

Bug: T299959
Change-Id: I8703587a6e616c426638e44ca6dad12617f10ae7
2022-05-31 17:10:49 -07:00
bwang dd8cc5dfe8 Add snapshot class to sticky header tests
Change-Id: Id1383f234bd0518786feebbbb2d92f7345aa6e70
2022-05-12 10:51:43 -05:00