Commit graph

1687 commits

Author SHA1 Message Date
bwang 91c5357917 Simplify heading styles. Avoid using .vector-body
Bug: T352875
Change-Id: Iba444d2324aeb578fa739cb12f1b31fb630c9ec7
2024-01-16 11:16:06 -06:00
jenkins-bot 23d1927e92 Merge "build: Upgrade eslint-config-wikimedia from 0.25.1 to 0.26.0" 2024-01-12 01:47:30 +00:00
Volker E 26f47fe0c3 build: Update 'svgo' to latest v3.2.0
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
  relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible
Also unifiying npm command to qua standard notation `minify:svg`.

Bug: T354875
Change-Id: I4fffd9efd430786911fe36e409d2575bfab719bd
2024-01-11 23:28:28 +01:00
James D. Forrester 1c93d0514b build: Upgrade eslint-config-wikimedia from 0.25.1 to 0.26.0
Bug: T345100
Change-Id: I51fdef33d517ce4f2f50930bc46dddb2f497677c
2024-01-11 14:19:57 -05:00
jenkins-bot cb96b7b379 Merge "Remove cache related FIXMES for CSS" 2024-01-11 12:52:34 +00:00
Moh'd Khier Abualruz 0d7f38ccc2 [Zebra] Remove !important
- Complying to fix me comment

Bug: T347712
Change-Id: Iacd0065b5a736249046ba89bb618bb13f7c0250a
2024-01-09 19:21:20 +01:00
Jon Robson 0ec9d2ecd6 Remove cache related FIXMES for CSS
Change-Id: I0b8bff3e880bef3e97341c24e40405401381006a
2024-01-09 09:48:06 -08:00
Moh'd Khier Abualruz f83cca3cc5 [Zebra] Merge skins.vector.zebra.styles module into skins.vector.styles
Merges all of the styles in the Zebra module into the default styles.

- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.

Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
2024-01-09 15:46:11 +01:00
bwang 5fda9dc241 Fix scrolling behavior in dropdowns
Bug: T352930
Change-Id: I894b91b5faaf86b1c0acaed35bd39756126711f2
2023-12-07 18:50:13 +00:00
jenkins-bot 0108ec3f32 Merge "Remove typography survey" 2023-12-07 16:36:31 +00:00
jenkins-bot cbc858cfaf Merge "Use Codex upstream icon" 2023-12-06 15:32:15 +00:00
Jon Robson dd7a4e9083 Use Codex upstream icon
Don't use icon defined in mixin which can get repeated every
time mixin is imported.

Bug: T352642
Change-Id: I5716a71a8347f519e13687a475d80233813756ed
2023-12-06 14:49:10 +00:00
ksarabia 515af497db Remove typography survey
* Removes code related to typography survey

Bug: T349337
Change-Id: Iae871ec0c61d630078108a5710705b4d3d118a54
2023-12-05 14:32:00 -06:00
bwang badd229bab Fix nonzebra sticky container scrolling behavior and scrollable indicator
- Remove unnecessary CSS from old grid styles
- Consolidate scrollable indicator styles, delete old styles

Bug: T352464
Change-Id: Id33e6d99dba2c680f02b246bbccf26a2aa7e77d9
2023-12-05 19:32:36 +00:00
jenkins-bot a9f7b251fd Merge "[Zebra] Update to 483c6bb Align sidebar TOC with main menu" 2023-12-05 17:00:16 +00:00
bwang 300028a42e [Zebra] Update to 483c6bb Align sidebar TOC with main menu
- Vertically aligns the sidebar TOC
and main-menu text, update after sticky-pinned
container was split into separate elements.
- Consolidate position: sticky and contain: paint styles onto sticky-pinned-container elements

47 expectecd visual changes to desktop-dev

Bug: T351697
Change-Id: I76b3e875f5793d3442e84215447a0ab9fa818300
2023-12-05 16:39:49 +00:00
Moh'd Khier Abualruz 2384a32323 [Zebra] Make .vector-column-start cache compatible
preparing html and css to avoid caching issues
caused by differences between zebra and non-zebra HTML.

Bug: T347712
Bug: T351830
Change-Id: I6f8ae635ba38937729b77ea8517ef2eae0ae12f7
2023-12-04 14:29:06 -06:00
Jon Robson 65908e0c7d Put font size control before limited width control
Bug: T351867
Change-Id: Ieab31c875ab87d3ffc103805e3012089ab118a28
2023-12-01 09:19:51 -08:00
Jan Drewniak 531cbcbd25 Increase "large" font-size option for client-preferences
Increases "large" font-size option from
@font-size-large (18px equivalent) to
@font-size-x-large (20px equivalent)

Bug: T351693
Change-Id: I9e3dd8346b1d6f6a9efd04bb1e43fee9bfd79154
2023-11-30 12:57:37 -05:00
jenkins-bot 35a616368b Merge "Add styles for new heading HTML" 2023-11-28 22:42:11 +00:00
Jon Robson 15250424b3 Fixes: Duplicate events for radio buttons
Bug: T352075
Change-Id: I9cec0b23618162ba74ccd9cd2e27e9171cdc8d6e
2023-11-28 10:09:06 -08:00
jenkins-bot 991419e877 Merge "Adjust .vector-body paragraph margins" 2023-11-27 23:04:03 +00:00
jenkins-bot f647138f9a Merge "i18n: Update copy" 2023-11-27 20:07:00 +00:00
Jan Drewniak 522d655007 Adjust .vector-body paragraph margins
Adds bigger bottom margin (1em) while keeping
the smaller top margin (0.5em) as was previously define.

This keeps the headings close to the paragraphs
while seperating paragraphs from each other.

Bug: T351754
Change-Id: I833372002654ea30deb110af44fb412722bc0ccd
2023-11-27 14:50:03 -05:00
Jon Robson 1c2dff5690 i18n: Update copy
* Switch from "has been" to "has"
* Reorder limited width options
* Change headings
* Change options
* Change copy of beta feature

Bug: T351998
Bug: T351867
Change-Id: I65494a3cc75b661339e48df1bea0e09a365c0657
2023-11-27 11:21:55 -08:00
jenkins-bot e55034f3ad Merge "Fix misc client pref bugs" 2023-11-27 18:07:10 +00:00
jenkins-bot e75b2cda57 Merge "Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element" 2023-11-27 17:56:07 +00:00
bwang a304223f04 Fix misc client pref bugs
- fixes unpinned popup message not showing
- fixes radio button spacing in client pref dropdown in Zebra

Bug: T351141
Change-Id: Ieeb5caaa6ccbd83d28dae41d3ca30791c355fcc6
2023-11-27 11:40:53 -06:00
bwang b23f6f6722 Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element
Cached HTML change

Bug: T351141
Change-Id: I7d2b4417db15aad7ea788ac7adf131de2c702d27
2023-11-27 17:09:26 +00:00
Jan Drewniak edfdf05f12 Implement new font-sizes for custom front-size preference
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:

1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height

This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.

The default font-size, when the custom font-size feature is disabled,
is "compact".

Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
2023-11-24 15:23:56 +00:00
Moh'd Khier Abualruz e480bfa2b5 Update theme icon for client preferences in user links
- Add appearance.svg file and classes
- Update the icon name in php
- Update icon name in test data and Snapshot

To test: change return value of
  isClientPreferencesPinned() from SkinVector22
  PHP Class to false

Bug: T351142
Change-Id: If61f3019430be3cb9c926b09bc397e27d8e636f2
2023-11-24 15:01:35 +00:00
jenkins-bot 9062e6f96e Merge "Follow-up to 7a8059d76 - Vector increase paragraph spacing to 1em" 2023-11-23 23:35:02 +00:00
jenkins-bot f26a8a0556 Merge "Revert "Vector increase paragraph spacing to 1em"" 2023-11-23 23:27:37 +00:00
Jan Drewniak 78f1f1c671 Follow-up to 7a8059d76 - Vector increase paragraph spacing to 1em
This patch changes the paragraph spacing for Vector 2022
instead of legacy Vector.

Bug: T351754
Change-Id: If205abd17236f9e325cb477b589fa35da246d623
2023-11-23 18:16:00 -05:00
Jdrewniak c3b10b4cac Revert "Vector increase paragraph spacing to 1em"
This reverts commit 7a8059d767.

Reason for revert: Didn't realize this changes the paragraph spacing in the legacy styles module instead of the Vector 2022 module.

Change-Id: I08f2a6b1f43fc088e6552fb6a9011b41ebb698a2
2023-11-23 23:09:03 +00:00
jenkins-bot a4ed8727cb Merge "Vector increase paragraph spacing to 1em" 2023-11-23 16:47:20 +00:00
jenkins-bot 37c2a0016f Merge "Make client prefs fully pinnable" 2023-11-23 16:34:33 +00:00
Moh'd Khier Abualruz 7a8059d767 Vector increase paragraph spacing to 1em
.vector-body p now should have top and bottom margins as 1em instead of 0.5em which translate now to 14px instead of 7px

Bug: T351754
Change-Id: Ifd405d7754f9062d9a84237560495a36d1dab8e9
2023-11-23 11:28:06 +01:00
bwang d2b413a721 Make client prefs fully pinnable
Bug: T351141
Change-Id: Ic4a166fb3234b27dbf3d37891abfdf15781c8867
2023-11-22 14:39:28 -06:00
jenkins-bot 84ce8cdd41 Merge "Fix the toc header underline" 2023-11-22 18:44:26 +00:00
Jan Drewniak 791b9bb0d5 [Zebra] Vertically align sidebar menus
Removes padding from the top and bottom of the
.mw-body element so that the border of the sidebar
menus align with border of the tab area.

Also removes the bottom margin on the sidebar menus
so that the bottom of the menus align with the bottom
of the content. (This was an artifact from the gray
background design).

**Visual Changes**
- The content will move up by 8px with this change.
- The bottom of the TOC will also move down by 24px
  to align with the content.

Bug: T351432
Change-Id: If0a8189b228ffb6fb63dfd8be40955653caa0b34
2023-11-21 18:59:15 +00:00
bwang b74b45d65d Fix the toc header underline
Bug: T340481
Change-Id: Iefbaae291c091b51910180c619993843895c9a20
2023-11-21 17:35:40 +00:00
Jan Drewniak 483c6bb51f [Zebra] Align sidebar TOC with main menu
Aligns the text of the sidebar TOC with the
main menu using negative margins. This only
affects the TOC in the sidebar position.

Bug: T351697
Change-Id: Ie4e78379e8682636ebf72913e995b69e922b4983
2023-11-21 16:02:10 +00:00
Jon Robson 845a0ab71d Make the limited width and font size controls work for logged in users
For time being manage classes inside Vector. Document with FIXME and a
test.

Bug: T351447
Change-Id: Icc084a59a0141ec2b7c772cf92e8cc58c11f15b1
2023-11-21 02:16:52 +00:00
Bartosz Dziewoński 3c2602b682 Add styles for new heading HTML
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.

See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes

Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: I62d7e8ad7d8f25d145ec1f33230d6043982aec1e
2023-11-17 20:36:56 +00:00
ksarabia 45332cfcb6 Fix alignment issue in Zebra
Addresses misalignment of client pref in zebra

Bug: T350417
Change-Id: Ib4b80b13dc67d00362abf168853c3ae58ae808b3
2023-11-16 13:53:41 -06:00
ksarabia 1a15dbd4d0 Fix sidebar component order
* This moves down the client pref menu
* For now when page tools is collapsed the client preference menu
is hidden. This will be revisited when we implement pinning
in the next sprint.

Bug: T350417
Change-Id: Ic94d6fd2c4ccb667b0ae602d03c564f88a14b8ec
2023-11-16 00:30:28 +00:00
Jon Robson 5a0678c77d Allow client side preferences to render in a dropdown
Known problems:

- For now, this can only be rendered by manually updating
the isClientPreferencesPinned local variable in SkinVector22
This will be addressed in T351141
- The icon is not correct. This will be addressed in
https://phabricator.wikimedia.org/T351142

Bug: T350195
Change-Id: I0b1ec445c4d292bbf417a39dbc5d2032b563f525
2023-11-15 12:50:54 +01:00
Moh'd Khier Abualruz 412c1f2d83 Create a sidebar for user preferences
* Adds mustache for sidebar
* Adds file to render sidebar

Bug: T350417
Change-Id: I691c8a0487e158e96027109c223569224f03a102
2023-11-14 14:33:01 -08:00
jenkins-bot 8664294709 Merge "Remove Zebra A/B test code" 2023-11-13 22:17:52 +00:00
Jon Robson 0a33ffffac Remove Zebra A/B test code
Additional change:
* Remove duplicate A/B test requirement for language in header

Bug: T339957
Change-Id: I0258e71ac0e270682ec1f3bcb0f10198892f058d
2023-11-13 21:56:34 +00:00
Jan Drewniak 6fcecec64e [Zebra] Remove underline from pages with blank title
Removes the underline below the page title if it's blank.

Bug: T351119
Change-Id: Ie177aecc92bd7f18175e1dc875e5f8471b38c7bb
2023-11-13 21:39:29 +00:00
Jon Robson 07a26a9448 Refactor VectorComponentUserLinks to not use hooks
Bug: T350195
Change-Id: I6cbf45587475f0477657a7ce9309b2cd42da33c1
2023-11-09 17:32:10 -08:00
Jon Robson 44d9f74c8f Client preferences: Support different render locations, use Codex
* Refactor client preferences to support different render locations
such as the sidebar or user menu.
* Make use of Codex markup.

Bug: T350195
Bug: T350417
Change-Id: I13eeb9cafc888faba4a5bf0390c1b6db1e3f0259
2023-11-09 19:04:03 +00:00
ksarabia 5e6d6124d0 Remove TOC state from logic
* This makes the function hyper-specific and only looks for main menu
  and page tools pinned states to return true.
* Renames function

Bug: T349924
Change-Id: I8e3a90b71c7f9acc5c217d76ed3a004342c503cd
2023-11-07 13:39:29 -06:00
Moh'd Khier Abualruz 9428bd2a0c Add images to Vector 2022 beta feature
- Add images to resource/images
- Use images in the config of onGetBetaFeaturePreferences for vector-2022

Bug: T349321
Change-Id: Ib359d49719dd5854c3f060f3484c098d93c35c06
2023-11-07 18:47:38 +01:00
Jon Robson 4cf50596bb Avoid nullish coalescing operators
Bug: T350519
Change-Id: If9a8a68aa9c6766b8cf9fb84ed526317d4d723ca
2023-11-06 11:10:44 -08:00
Jan Drewniak cedf6d9438 Change Zebra module to match current Vector styles
Changes the skins.vector.zebra.styles module to match
the current Vector 2022 styles.

**Visual changes**
(All pertaining to zebra.vector.zebra.styles)
- There are no grey backgrounds
- Context boxes with white backgrounds and drop-shadows
  are removed
- Page-tools sidebar width is the same as TOC sidebar width
- Content container is narrowed from 960px to 948px to prevent
  shifting content when pinning TOC or main menu.

Bug: T347638
Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471
2023-11-02 18:15:02 +00:00
Moh'd Khier Abualruz 2690b5559e Remove trident-hack font-size from Vector
- The Less variable @font-size-base--trident-hack is removed
-  All instances of font-size: @font-size-base--trident-hack; usage is removed from Vector 2022

Bug: T349010
Change-Id: Ie131b8f0dbb4d8050d33df969c1c49963ddc95e2
2023-10-27 14:03:14 +00:00
jenkins-bot 1db7b69286 Merge "Trigger window.resize when toggeling pinnableElement" 2023-10-26 16:47:14 +00:00
Volker E b55d95c70c styles: Replace legacy Vector breakpoint tokens where applicable
Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
  token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.

Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.

Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
2023-10-25 22:03:46 +00:00
jenkins-bot 0eb580f4f7 Merge "Update pinnableHeader class when moving pinnableElement." 2023-10-25 18:36:00 +00:00
Jan Drewniak f59ceb4390 Update pinnableHeader class when moving pinnableElement.
Adds functionality to update the pinnable header class
(pinned or unpinned) after is has been moved via
movePinnableElement().

Bug: T348039
Change-Id: I23552bdbb3390222c2c8efbd5f9122a4d5021a00
2023-10-25 17:44:12 +00:00
Jon Robson 329d91c99c Vector 2022: Support dropdown creation via addPortlet
Vector 2022:
mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle','#', 'Hello world');

Or if preferred it can be added to the pinned menu
mw.util.addPortlet('p-twinkle-pinnable', 'TW', '#p-tb');
mw.util.addPortletLink('p-twinkle-pinnable','#', 'Hello world');

Bug: T342815
Change-Id: Id58515e72bfbd5f700aa573a122529c6efdfea9d
2023-10-25 15:44:45 +00:00
jenkins-bot 1eb75ab7b1 Merge "Vector legacy: Support dropdown creation via addPortlet" 2023-10-25 10:15:05 +00:00
Jon Robson cb8a500e7a Vector legacy: Support dropdown creation via addPortlet
Vector:
    mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
    mw.util.addPortletLink('p-twinkle','#', 'Hello world');

Additional changes:
* Add aria labels to gadget created menus

Additional changes to template
* Remove self closing tag on input[checkbox] in template
* Rearrange vector-menu and vector-menu-dropdown classes
for consistency between two approaches

Bug: T342815
Change-Id: I938928c3625099ad49bec8aafb11f91190a9f494
2023-10-25 10:39:30 +02:00
Jan Drewniak 751454d7a8 [Visual change] Normalize small font sizes in Vector 2022
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.

@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).

This removal requires the following changes:

* Removing max-height & box-sizing from tabs, since
  they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
  to use `unit( 12 / @font-size-browser, rem )` instead
  of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
  it's width/height depended on
  .mixin-vector-arrowed-dropdown-toggle()

Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
  is removed from Zebra

Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.

* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px

*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.

Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
2023-10-24 22:50:15 +00:00
jenkins-bot 0c4b6d9874 Merge "Introduce CSS custom properties under font-size feature flag" 2023-10-24 19:03:16 +00:00
Jon Robson 076f957c5d Drop p-namespaces backwards compatibility script
Bug: T347907
Change-Id: Ib2bec20315440f89a0ca375f0e2b65b7a041006d
2023-10-24 18:43:28 +00:00
jenkins-bot 319fd57e0f Merge "Follow-up to 74b5834: Add language prefix to Readability survey" 2023-10-24 17:58:05 +00:00
Jan Drewniak b4fe7c35b9 Follow-up to 74b5834: Add language prefix to Readability survey
Changes the language of the preload page
based on the wikis content language.

Bug: T349232
Change-Id: Ie4233e6e31f57d09c319835c03c427dc7e83aea9
2023-10-24 16:50:29 +00:00
Jan Drewniak 2223cb8c1b Introduce CSS custom properties under font-size feature flag
Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.

CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.

Includes ADR on CSS custom properties decisions.

Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b
2023-10-24 14:33:33 +00:00
Volker E eb8f186a79 styles: Remove references to WikimediaUI Base and use skin variables
Removing all references to WikimediaUI Base and replacing them with
the Codex equivalents.
Also removing variables redefinitions that are not needed anymore.
Only value difference is a last family added before general fallback
called 'Source Serif Pro', which basically will never be visible due to
the general availability of Georgia and Times.
Also removing general font stack comments, see Codex design tokens
comments for these context explanations.

Bug: T334934
Change-Id: I61aa44e40830ffdb308aaea4ca30af0f25ba2274
2023-10-22 19:18:03 -07:00
WMDE-Fisch 7e63cdb219 Trigger window.resize when toggeling pinnableElement
The width of the screen changes when the pinnableElement is pinned
or un-pinned. Other features may need to react to this, like for
example the RevisionSlider extension.

Triggering a window.resize is a generic way to make sure these
changes can be handled by other elements on the page.

Bug: T336729
Depends-On: Iba22924b660f2709c0680aa6fbeb0feba92cfa76
Change-Id: I49878fdd8794273919bf961648fd93fdcf9511af
2023-10-18 13:39:06 +00:00
Jan Drewniak 74b58348f6 Add language prefix to Readability survey
Changes the language of the preloaded form
by using Special:MyLanguage.

Bug: T347208
Change-Id: I34759fc17f2078eb34dfcf4f8d86dfb082eeb6d6
2023-10-17 12:26:28 -04:00
Jon Robson 004b4c96f3 Add multiple font size to frontend
Use integer value going forward as it will be easier
to manage.

Bug: T346954
Change-Id: I041a0cb21e872700ceeeddd3a39922e456aa7bb8
2023-10-17 12:43:02 +00:00
jenkins-bot 48f2a52c96 Merge "Simplify TOC design for pinned TOC on no js small viewports" 2023-10-17 04:11:30 +00:00
Jan Drewniak 8a3e24e346 Simplify TOC design for pinned TOC on no js small viewports
Bug: T340571
Change-Id: Ie34d7d478b3a73cade9f5328439515e419692eb7
2023-10-16 23:31:18 -04:00
jenkins-bot 23aae68630 Merge "Add config option to disable Readability survery & minor fixes" 2023-10-17 00:29:18 +00:00
jenkins-bot 79dad6453c Merge "Define stable and internal APIs" 2023-10-16 17:42:42 +00:00
Jan Drewniak dcdcecd3db Add config option to disable Readability survery & minor fixes
Adds a config option to control the Readability prototype
survey tool on a per-wiki basis.

Minor fixes:
- Adds missing i18n messages to the tool for slider labels
- Ensures tool only runs on Vector 2022 skin
- Wraps the initialization in an IIFE

Change-Id: Ia65a0043dab5e9a23d4ef401ed83914e4f3d2882
2023-10-16 00:45:59 +00:00
bwang 0e37765afb Remove cached CSS from vector-sidebar-container-no-toc
Change-Id: I3a300ae217ba71c272da83c90ac5c43cc0adf4df
2023-10-12 00:05:13 +00:00
Jan Drewniak 732069f7fc Move @font-size-base into mediawiki.skin.variables.less
Bug: T348572
Change-Id: Iaaf25e7904252a9ce3fa1363c8ed4a6b1bc95bc4
2023-10-10 20:43:29 +00:00
bwang 896645be29 Remove common CSS module
Bug: T345766
Change-Id: I57e388be4b620a437274524e20653ef9ba7289ed
2023-10-05 22:35:40 +00:00
Jon Robson fd046f3258 Use skin variables instead of local variables where possible
None of these files need access to the skin local variables. Use
skin variables instead

Change-Id: Iaf1591fdfc5487e6f05f020893864eb2097af708
2023-10-05 15:34:50 -07:00
bwang bfcdbd544b Copy common styles into legacy vector
Bug: T345766
Change-Id: I78fd91fa397a731d22aa6264f61f324f6fc22054
2023-10-05 13:32:29 -07:00
bwang 967fc5d350 Copy common styles into vector
Bug: T345766
Change-Id: Ib7a10d3351ad99c025237ab03ece84c1e2c1e257
2023-10-05 13:28:16 -05:00
Jon Robson 922475be6b Define stable and internal APIs
Bug: T348081
Change-Id: I2ca9f27802e5ff1e0738300e2595ea419d49a431
2023-10-04 23:47:01 +00:00
jenkins-bot 18a310a42d Merge "Prevent legacy tab expand/collapse infinite loop if they have a border/margin" 2023-10-04 17:55:55 +00:00
Jan Drewniak 0232752097 [Prototype] Add screen resolution to Typography prototype
Adds screen resolution (`${window.innerWidth} x ${window.innerHeight}`)
to the prefilled feedback form for the typography prototype.

Change-Id: I38ec6fe5232c1d90df6d5d56b0f0cb32acdcc64e
2023-10-04 12:38:09 -04:00
jenkins-bot 111201d910 Merge "Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent" 2023-10-03 21:35:24 +00:00
jenkins-bot fd006b5f29 Merge "Add columnStart container and update grid styles" 2023-10-03 19:30:06 +00:00
bwang 5e15edb9a2 Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent
Bug: T345766
Change-Id: I2ae1d1668849a04520b73ac04fe16e1ff7f22fa6
2023-10-03 19:13:21 +00:00
Jan Drewniak d4246e6ca6 Web typography prototype survey
Creates an interactive prototype for gathering
feedback on users typography preferences.
This prototype is meant to be temporary and is
built soley for feedback purposes for the
WMF Accessibility for reading project.

The prototype code is:
- for logged-in users only
- hidden under the API user preference "vector-typography-survey"
- disabled by default

It is intended to be enabled via a banner that calls
code similar to:
    new mw.Api().saveOption( 'vector-typography-survey', 1 )

Bug: T347208
Change-Id: I8d8914a0fa16d40cb22ed0e61832bc5bbabe1c78
2023-10-02 10:56:40 -07:00
bwang 3cb6e4c505 Add columnStart container and update grid styles
Bug: T323141
Change-Id: Id6d8736922077b26fb972b6e743cf02d048e669d
2023-10-02 12:30:45 -05:00
Porplemontage 3839f9d436 Prevent legacy tab expand/collapse infinite loop if they have a border/margin
Switching from width() to outerWidth(true) will output the same value for the default Vector legacy CSS, but for tabs given a border/margin with custom CSS, it will prevent an infinite expand/collapse loop at specific resolutions.

Bug: T347793
Change-Id: I97bc01ce4c4117fe2a95dc7f0ff227cbc96ccbb9
2023-10-02 17:28:06 +00:00
jenkins-bot a3b9e27885 Merge "Add new utility function for detecting pinned elements" 2023-09-30 01:50:39 +00:00
ksarabia a1c2d5ca35 Add new utility function for detecting pinned elements
* Introduces a new utility function, `hasPinnedElements()`, that allows us to check whether there are any pinned elements in the HTML document based on their CSS class names.
* This function will be useful for detecting pinned elements and can be used within WikimediaEvents.


Bug: T346106
Change-Id: I4283cd234ba71acce1e5cbadabf8aeb17cd8d86e
2023-09-29 21:17:24 +00:00
bwang 11f156d5ff Add replace .vector-sidebar-container-no-toc with .vector-toc-available and .vector-toc-not-available
Bug: T318011
Change-Id: Ib07ace50e762c2e9f59e668ad6746574a60a144b
2023-09-29 16:57:42 +00:00
jenkins-bot 4a16173b7d Merge "Apply body styles to teleported elements in vector legacy" 2023-09-28 15:49:01 +00:00
Sergio Gimeno 30bddf7f35 Apply body styles to teleported elements in vector legacy
Bug: T347199
Follow-up: Ibd5d8c7cc7880678fae498a451cfd417f1f8e1b8
Change-Id: Ief1c88ce7c3110c2e92793bec3994b8b6a548a7d
2023-09-28 12:20:49 +02:00
jenkins-bot 618ec9249d Merge "Apply body styles to mw teleport target" 2023-09-26 20:33:57 +00:00
Sergio Gimeno 76c21734d6 Apply body styles to mw teleport target
Bug: T347199
Change-Id: Ibd5d8c7cc7880678fae498a451cfd417f1f8e1b8
2023-09-26 20:16:57 +00:00
jenkins-bot 315eb55b05 Merge "[anon prefs] Update TOC pin/unpin classes for Zebra" 2023-09-25 22:57:20 +00:00
Jon Robson 0f354e3950 Fixes saving of limited width
Bug: T345363
Change-Id: I3fee7e2b3a063d86a8d91ffa832cca4b72b48610
2023-09-21 19:13:38 +00:00
Jon Robson d6544e4c5c Clean up FIXMES now the cache has cleared
Follow up to Iad8523037ed364f09962b2d6ca0a3d50d7bd2266

Bug: T346401
Change-Id: Ifa4ab87e43cf28143dc7d753e264d4f0957dcbfa
2023-09-19 20:28:56 +00:00
Jon Robson 2edf135018 Disable client preferences by default
Also make code safe to run when the preferences are
disabled.

Bug: T345363
Change-Id: I00554f3d7b0338170c537ae21d937da35303e8e6
2023-09-19 19:52:21 +00:00
bwang 09781a5a96 [anon prefs] Update TOC pin/unpin classes for Zebra
Change-Id: I15cc4597d75a18f07bf96491df7a21113b0376ba
2023-09-18 16:27:30 -05:00
Jon Robson 65c48d4eb2 Feature: Client preferences interface
Notes:
* This is functional but intentionally not designed until the design
has been finalized.
* A feature flag is added that swaps out the limited width toggle with
a settings cog
* The preferences module is kept in a separate ResourceLoader module
(skins.vector.clientPreferences) to make it more portable for
when we eventually want to add it to Minerva as well.
* Intentionally have not focused on non-jS version given we will
likely revise this again in a future version/upstream to core.

Bug: T345363
Change-Id: I0c793b73e0676e32f031c6168c292f63908c72e3
2023-09-15 10:03:28 -07:00
Moh'd Khier Abualruz c88d72f1d7 [anon prefs] TOC pinned / unpinned
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC

Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1

Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
2023-09-14 21:37:50 +00:00
Ed Sanders 1aec6764ad build: Use wikimedia/server for root folder eslint config
Change-Id: I8b6938f2ac935724cf80e01096591e6a4c0cbbe0
2023-09-04 18:13:32 +01:00
jenkins-bot 744193d177 Merge "Remove limited width cached HTML handling" 2023-08-28 12:16:23 +00:00
Jan Drewniak a448233d1d Make Vector feature flag compatible with clientPrefs
Adds the `-clientpref-` string to the Vector font-size
feature flag class, which will now read:

    vector-feature-custom-font-size-clientpref-enabled

Bug: T343928
Change-Id: Iefc575229d52bea820fbee35711650408c917338
2023-08-25 14:58:30 -04:00
jenkins-bot 580b7a022f Merge "Add font size feature flag" 2023-08-24 21:33:39 +00:00
ksarabia 1805561923 Add font size feature flag
Add feature flag that for new (eventually customizable) font size.
Enabled via url param VectorCustomFontSize=1 and font size set to
a hard-coded 16px value for testing purposes.

Bug: T343928
Change-Id: I75801db7506ba2a8212df94bb2079c33a3b64614
2023-08-24 20:57:46 +00:00
Ed Sanders 1177320e3c build: Update linters
Change-Id: Idff91da3e6a490bbd31b39651f35544e9cb3fd9c
2023-08-23 18:46:49 +01:00
Jon Robson 2ea12a11ef Remove limited width cached HTML handling
Bug: T343843
Change-Id: Ib49e8325fddef90e202d4e753526af45ed7b2c26
2023-08-10 22:04:32 +00:00
bwang 72bac95cf9 Remove unnecessary styles about temp user page
Bug: T340152
Depends-on: Ic99c9cf2c8e7ea9a6520b4c9b6e5b69d358cbd58
Change-Id: Ifa01b010224181d125e6886c07f3e5ad8321e4ec
2023-08-10 12:01:58 -05:00
Jon Robson beb466521b Fix suffix check
Follow up to I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
Caught by Pixel.

Bug: T341641
Change-Id: If11d78bc48648647b9aab48908214058270eea57
2023-08-09 16:42:42 +00:00
jenkins-bot e8a681de2b Merge "Fixes the pinning functionality" 2023-08-08 23:38:20 +00:00
Jon Robson 93a4b76b00 Fixes the pinning functionality
Pinning functionality was broken in
I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
as it breaks the check against "legacy" feature
classes. We should resort to using the legacy mode
when neither of the new classes can be found.

Bug: T341641
Change-Id: If97a393140175fd41551c3db14b19becb8d9f460
2023-08-08 23:18:12 +00:00
Abijeet 0739360cf5 Display ULS vector-dropdown-content when on non-content pages
Functionality in I37d8e61a1287b31d1a304d2a955f532b9b8fa505
was working until  Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba

Bug: T342845
Change-Id: Ie7f18e2228420b3269b0be969474e605d48ba682
2023-08-08 23:07:23 +00:00
Jon Robson e5bf8adad7 Limited width uses new client preferences system
* Update classes to use clientpref-1 and clientpref-0 suffix for limited width
I've limited this to the only client preference for now to reduce
risk.
* For cached HTML retain existing CSS rules, and continue saving
a cookie
* Migrate cookie if found for newly generated pages. This will be
to ensure the old cookie and new cookie are in sync (this should be
a one time operation)

Depends-On: I1e635f843ac9b2f248b1f7618134598e80291b38
Bug: T341641
Change-Id: I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
2023-08-04 21:31:21 +00:00
jenkins-bot 634a578ff5 Merge "Add mw.util.addPortlet handler for legacy Vector" 2023-08-01 17:16:37 +00:00
jenkins-bot 9c9a621428 Merge "Revert "Reset line height on tab elements"" 2023-08-01 00:51:02 +00:00
Jdlrobson 18ecb0755f Revert "Reset line height on tab elements"
This reverts commit cb4265f003.

Reason for revert: This makes the situation worse when language
is not mixed.

Bug: T343110
Change-Id: I40158b15bad1ac06256894fc7ec6ffbac1e45fb0
2023-08-01 00:34:58 +00:00
bwang eb64a09a7d Separate dropdown/menu references in PHP and templates
- VectorComponentMenuVariants.php is renamed to VectorComponentVariants.php, and returns menu and dropdown data
- Remove TabsMenuContents.mustache in favor of MenuContents.mustache
- Fix the variants dropdown to use the full Menu template

Follow-up: Idf05c1664c026f58487ba34af5ede8a11e695baf
Change-Id: I0e9b1ab3306b04ee0d226048c6885beab4f310c6
2023-07-31 14:03:12 -05:00
Jon Robson 967965b260 Add mw.util.addPortlet handler for legacy Vector
This copies the Vector 2022 hook approach and applies
it to legacy Vector.

Bug: T342814
Change-Id: I382bfa3b25f4814fbf627856fa5957f7e50bf8a8
2023-07-26 14:05:16 -07:00
Jon Robson 6b81214687 Fix issues with addPortlet handler
Follow up to I35a51df6ece2e48e086e722337d4c6bba427eeb4

1) the insertBefore function raises a JS error
2) We must take into account portlets added before the
Vector hook is registered.
3) Register the portlet in main. Loading the module should
not have side effects.

Bug: T303488
Change-Id: Iee6b308d6da63bc53bcba0fa5bb383d88787892a
2023-07-26 13:51:06 -07:00
jenkins-bot 48af341410 Merge "Add hook support for mw.util.addPortlet method" 2023-07-26 11:42:17 +00:00
Moh'd Khier Abualruz 4b4fc6c6c9 Add hook support for mw.util.addPortlet method
- Hooking into mw.util.addPortlet
- merged in tests from: I3258388d74c103515e3f0680304f9a376e439a35

possible follow-ups:
- tooltips support
- custom attributes support
- Adapting portlets of types dropdown, tab to vector skin. Check patch set 10 for a starting point

Depends-on: I79bad8661e34e653d41e6cb1cd4462ac5c6bc3b1
Bug: T303488
Change-Id: I35a51df6ece2e48e086e722337d4c6bba427eeb4
2023-07-26 13:37:09 +03:00
bwang 20c216c829 Fix text showing on icon only buttons
Change-Id: Ie1ab40cd479b5a8e83ce13537a7e8d6387f7a441
2023-07-25 11:15:46 -05:00
jenkins-bot 80b58924dd Merge "Limit button only icon resizing to Vector header button icons" 2023-07-24 21:28:05 +00:00
Jon Robson 46dece0b56 Limit button only icon resizing to Vector header button icons
Bug: T342190
Change-Id: I5ccc1e83b28a6ffa63d351900eba02343fc48659
2023-07-24 16:00:46 -05:00
Jon Robson d3748704ca Show limited width icon alongside help button
Depends-On: Ia4495f75b51626ab6dd2805574dfdc6199535015
Bug: T341740
Change-Id: I3b8881ad37fa0fb06b60e50f2a7608f7d7b3e0ab
2023-07-24 20:14:59 +00:00
Jon Robson cb4265f003 Reset line height on tab elements
Bug: T315219
Change-Id: Ia7cd11d76cc84744806a311ec4e6a25b226d1f95
2023-07-12 14:33:34 -07:00
jenkins-bot 5d666f43ab Merge "Make bottom dock expansible via portlet links" 2023-07-12 19:08:35 +00:00
Jon Robson fe03bb50ef Make bottom dock expansible via portlet links
New menu items can be added via
```
var node = mw.util.addPortletLink('p-dock-bottom', '#', 'hello' )
if (node) {
node.querySelector('a').classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-button' )
}
```

Bug: T336431
Change-Id: I8c5c5414cda9d268631ba0fade90e1a44c104ff1
2023-07-12 12:37:38 -05:00
bwang 3a3c6120e2 Fix echo icon sizing after ULS enhances them
Bug: T341490
Change-Id: Ic9142c318d8046fc19ae2faa8005a625859446d5
2023-07-10 15:43:57 -05:00
jenkins-bot d8707520a1 Merge "Performance: Language dropdown menu should be hidden when ULS is enabled" 2023-07-07 17:49:45 +00:00
Jon Robson 48b1263533 Performance: Language dropdown menu should be hidden when ULS is enabled
The language dropdown currently impacts rendering due to making use of
visibility: hidden as space must be allocated for it on the page.

However when ULS is installed it is never used. As some JS to take
that into account so it doesn't impact the rendering of the page.

Since ULS may not be installed we have to consider that case and
retain the existing behaviour for those wiki (this should only
impact 3rd parties)

Bug: T340715
Change-Id: Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba
2023-07-07 17:17:42 +00:00
bwang a8013e9db4 Avoid setting large z-index on headers
Bug: T340747
Change-Id: If78b2b6f0d98dc6b83263f5d94a7527afebde91c
2023-07-06 17:19:52 +00:00
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
jenkins-bot ad5cd567bd Merge "Ensure language button works for no js users," 2023-06-22 21:42:00 +00:00
bwang edf2c78765 Ensure language button works for no js users,
* Factor out mixin for right aligning menus

VISUAL CHANGE:
Results in a slight change to the alignment of the user menu.

Bug: T339321
Change-Id: I5c3a03161b1f2372d2ca25ba47dcd40065f4f2cc
2023-06-22 21:17:46 +00:00
jenkins-bot 4e9718b089 Merge "Replace search loader indicator with Codex pending search message" 2023-06-21 21:54:39 +00:00
bwang 8cc436ac4b Replace search loader indicator with Codex pending search message
Bug: T321106
Change-Id: Ic27ecf16277725f6a08038a5501d0903a2494b5f
2023-06-20 13:32:48 -05:00
Msz2001 8f8a9c273c Hide "Toggle the table of contents" and "Toggle limited content width" on print
Bug: T339344
Change-Id: I4ed26edfda52f7404d2a513af7343a80bc99d939
2023-06-18 11:04:41 +00:00
jaydenb d1c0e6cd6f Hide language alert if there are none and JS is disabled
The languages alert is misleading when there are no languages and the user has JS disabled.

This change adds a class to the alert if there are 0 languages, and then adds "display: none" to the alert if the client-nojs class is present. This is the same approach being used for the language switcher button.

Bug: T326185
Change-Id: Iee292d661ed1f47700f588053712f5f547022b17
2023-06-16 17:30:34 +00:00
jenkins-bot 84864d21de Merge "Drop styles for cached HTML" 2023-06-16 16:32:31 +00:00
jenkins-bot b8dbf58a04 Merge "Use the standardized Codex design tokens" 2023-06-16 16:32:22 +00:00
jenkins-bot 0ff1b2f3da Merge "Prevent Skins Vector from setting preferences for temporary accounts" 2023-06-14 20:38:33 +00:00
tsepothoabala e5ef6f5f64 Prevent Skins Vector from setting preferences for temporary accounts
Bug: T337874
Change-Id: I83ca625276569349abcd6622d295137c5c4ffe2c
2023-06-14 11:05:27 -07:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
jenkins-bot 8662bc80c3 Merge "Forbid jQuery in new code" 2023-06-14 14:24:09 +00:00
jenkins-bot f39a8dc0e5 Merge "styles: Replace local var with Codex design token" 2023-06-13 23:37:02 +00:00
Jon Robson 31057b67d8 Use the standardized Codex design tokens
This should result in no visible change to Vector 2022.

Font-size is already being overriden inside Vector 2022 on the
.vector-body class

Bug: T336548
Change-Id: I4ef46a7b6cad1c40ca10c76c2f38087ef34a1cfb
2023-06-13 23:27:47 +00:00
Jon Robson 48d8ad0415 Forbid jQuery in new code
Follow up to I9d07acffa6f8133ec3e44ceba3d1fa5b27b81258

Change-Id: I5240c414cc4f4e4cc832647791b4a2c96acbc845
2023-06-13 15:45:43 -07:00
bwang b2705c55f1 Use Codex for typeahead search styles
- Update SearchBox.mustache markup to use codex styles
- Scope old SearchBox markup to LegacySearchBox.mustache
- Add handling for thumbnail and autoexpand search variants
- Adds a 'Search' button to SearchBox.mustache matching the initial non vue search box with the Codex design
- Refactor SearchBox CSS so styles are scoped better

Visual changes:
A "Search" button now appears on page load when it previously only appeared after loading in Vue

Bug: T337966
Change-Id: Ibcffe00292ab4f9f5f9919982d578793cf8594de
2023-06-12 16:26:33 -07:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
jenkins-bot aec05c9a37 Merge "languageButton: Use click method instead of dispatchEvent" 2023-06-08 20:35:39 +00:00
jenkins-bot 35ca5b722d Merge "styles: Remove local var covered by mediawiki.skin.variables.less" 2023-06-08 20:17:12 +00:00
Volker E 8a369066ae styles: Replace local var with Codex design token
This replaces the local variable for line-height with the design token
of same value.

Bug: T331403
Change-Id: I08a5edfc355f36a16e780912af6945b2c4f50252
2023-06-08 14:55:18 -05:00
jenkins-bot 685d261647 Merge "Use jQuery fake events for sticky header edit buttons" 2023-06-05 20:52:14 +00:00
Ed Sanders a1cdf551b5 Use jQuery fake events for sticky header edit buttons
The native ones do not trigger the VE code.

Partially reverts I5f4464e5bfa.

Bug: T336639
Change-Id: Ie088ddb7f73a2ed0b3b830fc28336d93e41c4ce5
2023-06-05 14:52:01 +01:00
jenkins-bot 06b8278b50 Merge "mediawiki.less: Remove non-standard value for @max-width-breakpoint-tablet" 2023-06-02 18:20:15 +00:00
Ed Sanders fe6720c7f8 Remove config and AB test code for edit buttons in sticky header
Bug: T337955
Change-Id: I8ebeeca1712e335d886faa498849fcb3f7f6e1ab
2023-06-01 18:00:07 +01:00
Func 8457b64a83 languageButton: Use click method instead of dispatchEvent
For pages with interlanguage links, this link has no event listener
and only functions as a plain link to the corresponding Wikidata page.

Bug: T336931
Change-Id: I8c1456b3c524824ccc59aee5f999c8017c59fc0b
2023-06-01 02:27:24 +08:00
Roan Kattouw b331894261 mediawiki.less: Remove non-standard value for @max-width-breakpoint-tablet
This changes the value substantially, from 719px to 1119px. There is
only one usage of this variable, which is updated in
Iac1697a5ba899901f203652e2356a96d34c991be.

Depends-On: Iac1697a5ba899901f203652e2356a96d34c991be
Change-Id: I837a7fc7f5c21d88a3211dd054a62f7ea3f4b943
2023-05-30 16:37:18 -07:00
jaydenb 679eb9f5e5
Move LimitedWidthToggle styles to skin.vector.styles
This allows the styles to be applied on browsers without JS support, notably the rule that hides the button.

Bug: T337580
Change-Id: I604d0c6362e2c424c38cbf5b798a5ac619bd70cf
2023-05-27 18:11:04 +01:00
bwang 197e4f45ed Remove limited toggle notification on page load
Also removes VectorLimitedWidthIndicator config

Bug: T336197
Change-Id: I6005c0cf4933647d5dda3df2c95650aca3fde5cd
2023-05-26 09:52:08 +00:00
jaydenb 077fa408c7 Increase menu tab borders to 2px
Bug: T319089
Change-Id: I03bae97b9b80f33cc13732b1ea96cd0f357e015c
2023-05-26 08:45:01 +00:00
Jon Robson 484b3cbee0 Use document feature classes to extract A/B test state
Bug: T335972
Change-Id: Ic0c04dfd022d0cd4141d2498d38ff1de67ad004c
2023-05-25 19:05:38 +00:00
Jon Robson 7c29c5ff03 Revert "Override mw.experiments.getBucket() via body classes"
This reverts commit b599da4153.

Change-Id: I977b352ee71faa25c3921205025ba326e05a0f9b
2023-05-25 21:38:48 +03:00
jenkins-bot cc570fe280 Merge "styles: Remove unneeded property" 2023-05-25 15:12:00 +00:00
Jan Drewniak b599da4153 Override mw.experiments.getBucket() via body classes
When AB bucketing via ABRequirements.php in Vector,
the browser has no awareness of this bucketing and buckets users
once more via mw.experiments.getBucket() in AB.js.

mw.experiments uses a different algorithm than ABRequirements.php,
causing a mismatch between the server-side bucketing
and the client-side bucketing.

This patch overrides that client-side bucketing by
adding classes to the HTML element that are recognized
by AB.js

Bug: T335972
Change-Id: I0549a8dee23ebe7cd68465f8403e4f7aac76633e
2023-05-24 18:21:30 -04:00
Volker E 3afbbce707 styles: Remove local var covered by mediawiki.skin.variables.less
Available since Codex v0.11.0 in I9db6eff7.

Change-Id: I9bf6c5ad74dcf7a6aea847d5758afba1a1cfb67a
2023-05-23 17:04:28 -07:00
Volker E 18e277719b styles: Remove unneeded property
Doesn't seem to be needed here. Personal tools menu isn't even a
dropdown in legacy Vector.

Change-Id: I89bb2e66ea1b4eff8d7df025806a96e3d83e5b98
2023-05-22 23:01:46 -07:00
jenkins-bot 425a7a5024 Merge "styles: Apply Codex z-index tokens" 2023-05-22 16:46:01 +00:00
jenkins-bot 4f4b1688cb Merge "Fix CSS causing multiple TOC landmarks to be present" 2023-05-19 14:56:10 +00:00
Jdlrobson 9bb3a003d7 Revert "[VISUAL CHANGE] User links menu is incorrect font size"
This reverts commit 4ef136e7e6.

Reason for revert: This is made obsolete by
Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a when wmf/1.41.0-wmf.8
has been cut.

Change-Id: I1d6c737b6a2d9fa2d123d29a1e0ab740a854c9e5
2023-05-17 00:26:42 +00:00
jenkins-bot 03afa9091e Merge "Consolidate watchstar icon updating logic under watchstar.js" 2023-05-16 18:55:39 +00:00
bwang 27e821a486 Consolidate watchstar icon updating logic under watchstar.js
Depends-on: Ib11177df52d46ecda2ace50ac78672ed3d5fd5c9
Bug: T336640
Bug: T336641
Change-Id: If2573409cd1af4580f89b33c32cd0441e7a80735
2023-05-16 13:18:47 -05:00
Volker E 6865b7e7f4 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.

Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-05-15 17:34:36 -07:00
bwang 256cedbc63 [Visual change] Limit link spacing in user links
Limit it to below desktop viewports

Bug: T323244
Change-Id: I43ccf6db47e1723c953fbbec38eca7c95053ba70
2023-05-12 19:27:17 +00:00
jenkins-bot 825716571f Merge "Revert "Remove extra spacing from username/create account link"" 2023-05-12 15:42:40 +00:00
Jdlrobson 4e16323ae3 Revert "Remove extra spacing from username/create account link"
This reverts commit b6603a591f.

Reason for revert: Causes the login and create account to be flushed
together (will add screenshot on ticket)

Change-Id: Ib25f21e85eb9984dfa9fcf50a50198c5d2ba7bed
2023-05-12 15:24:30 +00:00
jenkins-bot 2c87cdc8f8 Merge "Remove extra spacing from username/create account link" 2023-05-11 23:00:57 +00:00
sushrith b6603a591f Remove extra spacing from username/create account link
Bug: T323244
Change-Id: Id0e8a9ffaec3389e75a2a9c3cb068649aff77543
2023-05-11 22:42:36 +00:00
Jon Robson 0acb55fc8e Run A/B test enrollment code for any A/B test
Currently the A/B test enrollment code is limited to the
sticky header experiment. Instead of doing that, always check it
inside skin.js and run it if necessary.

Now it's possible for this to run twice, keep track of whether
the init function has been called and make sure it doesn't get called
more than once.

Bug: T335309
Change-Id: Icfef13b019319d07686a06e06846789faf790ed6
2023-05-11 14:36:42 -07:00
jenkins-bot 155592ed3c Merge "Add padding to limited-width toggle to account for close icon" 2023-05-09 15:51:44 +00:00
Jan Drewniak fdb1ba3b30 Add padding to limited-width toggle to account for close icon
Bug: T336274
Change-Id: I435976d785785759e0eca6612ef2cd1b47cd63af
2023-05-09 15:14:29 +00:00
Jan Drewniak 4703bdf3f0 [Zebra] Remove horizontal scrolling from ToC
Bug: T335907
Change-Id: I7ed705a36d5a5d97fdae1b7937a1522c118eb348
2023-05-09 09:37:17 -04:00
bwang 70fb73c692 Fix CSS causing multiple TOC landmarks to be present
Change-Id: Ib54fa49df5def9372a2a42b66a73a0c4936df5a2
2023-05-08 18:31:20 -05:00
jenkins-bot 03570d4e17 Merge "Remove VectorTableOfContentsBeginning flag" 2023-05-08 23:00:00 +00:00
bwang 6f13caa775 Remove VectorTableOfContentsBeginning flag
Bug: T334969
Change-Id: I9e931b7cdc443e73a41c92f5368f81b35285437e
2023-05-08 22:25:03 +00:00
Jan Drewniak 8737fdf04f Remove scrollbars from body & 100% height
Removes the permanent scrollbars from Vector 2022
as well at the 100% height on `.mw-page-container`.

The permanent scrollbars ( overflow-y:scroll) are
an artifact of legacy Vector and no longer serve
a (known) purpose.

The 100% height on `.mw-page-container` was originally
added to fix T257518, however that fix is no longer
necessary with the use of CSS Grid for layout.

Bug: T335883
Change-Id: I57bb0274a9d51269bb58ae7904c0517742716ec8
2023-05-08 14:41:48 -04:00
Jan Drewniak 1b58f87493 [Zebra] Dropdown heading styles
Improve dropdown heading styles in accordance with
new designs.

Bug: T335155
Change-Id: I3665c25bfe2aa3a14178f57714ce466fb2a0f6d6
2023-05-05 12:54:12 -04:00
jenkins-bot 3d06127803 Merge "[Zebra] Unify ToC & menu scroll behaviour" 2023-05-04 21:00:00 +00:00
Jan Drewniak 036e1295ec [Zebra] Unify ToC & menu scroll behaviour
- Refactor the TOC toggle button position
- Move the TOC/pinnable scrollable element from
  `.vector-pinnable-element` to `.vector-pinned-container`
  and `.vector-dropdown-content`.
- Applies The Fade™️, as well as a vh max-height, to both
  pinned menus and dropdowns.

Changes the way The Fade™️ is positioned by using
position:sticky so that it can be applied to
dropdowns, sidebar menus as well as all ToC permutations.

Bug: T335155
Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
2023-05-04 16:19:00 -04:00
jenkins-bot c069ada615 Merge "Update user menu and watchstar buttons to be consistent with spec" 2023-05-04 18:34:04 +00:00
jenkins-bot 01664af716 Merge "[Zebra] Add TableOfContents.less to Zebra module" 2023-05-03 23:28:02 +00:00
bwang d8bcb73647 Update user menu and watchstar buttons to be consistent with spec
Depends-on: Ibd762c810e1d89047e39ce3af792b43689bf11e3
Bug: T335909
Change-Id: I5b42780416b466cc3fc33d29220aef2979ac3239
2023-05-03 15:47:00 -07:00
Jan Drewniak 6d33d03a5e [Zebra] Add TableOfContents.less to Zebra module
Adds the TableOfContents.less file to the Zebra module

Bug: T335155
Change-Id: Id3ea707771e75125138eb8af88a549dd111ecd63
2023-05-03 17:09:53 -04:00
Moh'd Khier Abualruz fef0ced503 Ensure page load popupNotification is closed when the toggle button is clicked
Bug: T335153
Change-Id: Iafe0f08554d8844acb60ef9fdd1fce4594459aac
2023-05-03 15:16:15 -05:00
jenkins-bot a0387c54f0 Merge "[Zebra] Adjust content padding" 2023-05-02 19:27:08 +00:00
bwang c7001374ff Make limited width button consistent with button spec
Bug: T334881
Bug: T326323
Change-Id: I97cd6d9ede39993cd58274eaff2749aa654e4777
2023-05-02 13:32:22 -05:00
Jan Drewniak 760f9e5f41 [Zebra] Adjust content padding
Introduces Codex-based spacing variables for the
padding of the content area.

Padding is adjusted by using CSS custom properties
assigned at the HTML element, then changes only
these custom properties at the new breakpoint.

Also folds in changes from 3433525 (add top-margin
to indicators) into the zebra module.

Bug: T335155
Change-Id: Ic4883b86043882bd2ef5f71b3079896caab87531
2023-05-02 14:09:30 -04:00
bwang dd2284cf16 Update instances of Button.mustache to use to use VectorComponentButton
Bug: T334881
Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a
2023-05-02 18:00:41 +00:00
jenkins-bot bb00986afe Merge "[VISUAL CHANGE] User links menu is incorrect font size" 2023-05-02 17:57:16 +00:00
Jon Robson 4ef136e7e6 [VISUAL CHANGE] User links menu is incorrect font size
Increase from 14px to 16px

Expected 10 visual changes in the header

Bug: T334881
Change-Id: I1fbab2f887563254018473cc132558b6cf366285
2023-05-02 17:38:14 +00:00
Brandon Fowler 3433525941 Apply margin-top to indicators
Bug: T335627
Change-Id: Ic384f9d532ed0a1165c29869e53d99cd0c7dc495
2023-05-02 15:03:42 +00:00
bwang bed8e2523f Update VectorComponentButton to be able to handle all button designs/variants
Bug: T334881
Change-Id: Ib8735bc4f2fb7a7f6d5c230b9a3c847d8de423b8
2023-05-01 22:41:16 +00:00
Jon Robson df803b6294 Remove margin top from language button
These items are vertically centered via flexbox already,
so this isnt needed. Results in expected visual changes.

Results in expected visual changes.

Bug: T334881
Change-Id: I05409ec591f9ade179e93262b855bba6bd0e4a12
2023-05-01 20:42:00 +00:00
Jan Drewniak 2775ec31b1 [Regression] Prevent ToC & language button in header from wrapping
Refactors the bottom border in the zebra update
so that it doesn't require flexwrap on the
`.vector-page-titlebar` element, which can cause the
PagTitlebar layout to break when the page title is
longer than one line.

The challenge with the underline in Zebra is that we
want to use padding to create the white background on the
content elements, but we *don't* want the underline
to stretch to edge of the box (which is what bottom-border
or box-shadow would produce), instead we want the
underline to only span the width of the content.

Bug: T335633
Change-Id: Ib942ff4e7674397cd7f0e1004a9e402169fbd206
2023-05-01 18:42:13 +00:00
jenkins-bot 2d822ae93f Merge "[Regression] Move #siteSub display rule into common.less" 2023-05-01 18:04:55 +00:00
Jan Drewniak 91077bcd2c [Regression] Move #siteSub display rule into common.less
Moves the CSS rule that hides the #siteSub element by
default into /resources/common/typography.less in
order to prevent it from being feature flagged
(and thereby overriding the specificity of on-wiki edits)
during the Zebra update.

Bug: T335625
Change-Id: If41fadc6a369ab371f6c1e75e9cf3022a01574a0
2023-05-01 12:41:50 -04:00
Moh'd Khier Abualruz 07ef69de96 popupNotification Fix memory leaks
-Fixes container id

relates to: I90e88ef0c6cb880205f4fb6505d997826d923690

Bug: T335153
Change-Id: I7eb307c95860afad40369551f1e801c72843a080
2023-05-01 12:11:29 +02:00
jenkins-bot 9ffb86726a Merge "[Zebra] Remove old grid styles" 2023-04-28 22:24:34 +00:00
jenkins-bot 640adae1fc Merge "[Zebra] Make sidebar columns equal width" 2023-04-28 22:08:37 +00:00
bwang da04878adb [Zebra] Remove old grid styles
Change-Id: I378dc095887288ef7f72ce6543f79cd567f98239
2023-04-28 22:06:02 +00:00
Jan Drewniak 1c04c9d227 [Zebra] Make sidebar columns equal width
Makes the columns that contain the ToC and Page Tools
menu equal width.

Moves these width declarations into the grid.less file
and converts them, as well as a few associated width
variables, to rems.

Widens the content column to maintain the same
line-length as pre-zebra, due to the extra side-padding
on the content container.

Scopes the non-zebra grid.less less file to the
zebra-disabled flag.

Bug: T335155
Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
2023-04-28 17:32:05 -04:00
jenkins-bot 4813aba27a Merge "popupNotification Fix memory leaks" 2023-04-27 18:49:42 +00:00
Volker E 4efefdc420 styles: Remove 'mediawiki.ui/variables' call
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.

Also
- replacing deprecated keys with new Codex token equivalent keys

Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
2023-04-25 12:58:30 -07:00
Moh'd Khier Abualruz c076c85070 popupNotification Fix memory leaks
Bug: T335153
Change-Id: I90e88ef0c6cb880205f4fb6505d997826d923690
2023-04-25 14:51:25 +02:00
Jan Drewniak 791bf17bb8 Follow-up to 3cea6d41 “Scope styles related to zebra feature flag”
In 3cea6d41, files were split between the zebra/non-zabra modules
and scoped to the top-level zebra-enabled/disabled class.

Since some selectors already target the html element, ampersands
were added to these selectors to append the zebra-enabled/disabled
class to them.

This rule PageTools.less was overlooked.

Change-Id: I5057a409da31ba6c4b2310048f8690154ca43e16
2023-04-24 18:57:35 -04:00
jenkins-bot e257e626a6 Merge "Consolidate sticky pinned element styles under .vector-sticky-pinned-container class" 2023-04-24 19:38:38 +00:00
bwang bae8b3d717 Consolidate sticky pinned element styles under .vector-sticky-pinned-container class
Bug: T335155
Change-Id: I988f3c7e70d602b4dbd5fd2cbd124b86b104caa7
2023-04-24 19:08:49 +00:00
jenkins-bot 399116cabe Merge "popupNotification Javascript tests" 2023-04-21 17:19:53 +00:00
Jan Drewniak bd05ff4ae5 Add initial Zebra design update for page layout
Implements the zebra design update via the
skins.vector.zebra.styles module.

Refactors:
- Moves common variable and mixin imports from
individual files to skin.less file.
- Applies font-sizes to menu containers instead
of individual menu links.
- Adds mixins for dropdown and content-box styles.
- Unifies padding for pinned and unpinned menu states
  (including TOC).

Bug: T332600
Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
2023-04-21 11:02:56 -05:00
Moh'd Khier Abualruz ecdf2ced2c popupNotification Javascript tests
Bug: T333345
Change-Id: If65a86b2d6a8345f127a0803fd64cfa9f13a8630
2023-04-20 14:09:33 -07:00
Nicholas Ray 630d47792a Fix InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList'
Bug: T335149
Change-Id: I9dad78af21ca7ee272a3661f5869e6337909dc05
2023-04-20 13:44:36 -06:00
Nicholas Ray c61d57c72a Fix TypeError: trigger.attr is not a function
Code was assuming jQuery.Object when it is now an Element.

Bug: T335148
Change-Id: I4755607f991889468294e022015a6a7e4becbb6c
2023-04-20 13:05:21 -06:00
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00
Jan Drewniak 5852e320a3 Create skins.vector.zebra.styles module
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.

Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.

The new module should compile without error and existing
styles should not be affected.

Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:12:53 -04:00
Jan Drewniak da92ecf7cc [Refactor] Prepare existing styles for zebra module
This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:

    .vector-feature-zebra-design-disabled {
        @import './layouts/preZebra.less';
    }

This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands

The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.

No visual differences are expected with this change.

Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-19 18:53:11 +00:00
jenkins-bot 9e5bea1ff2 Merge "Add custom limited width popup" 2023-04-17 23:18:29 +00:00
jenkins-bot 81ffde7668 Merge "Forbid jQuery usage in Vector 2022" 2023-04-17 23:13:04 +00:00
bwang 4f76994970 Add custom limited width popup
Bug: T333601
Change-Id: I663d6a391aeeb05c27f2f2b8829c22325b528b39
2023-04-17 22:35:52 +00:00
jenkins-bot 5899cf25d6 Merge "Clean up leftover Sidebar CSS" 2023-04-17 21:27:57 +00:00
bwang 4698583307 Clean up leftover Sidebar CSS
- Delete unused CSS variables
- Move CSS variables to legacy
- Consolidate Sidebar.less into LegacySidebar.less

Change-Id: Idc47fda1c20fe3bbf3b9f1c1fcb889fe5b297aa4
2023-04-17 21:02:58 +00:00
Moh'd Khier Abualruz 592b33cc23 Page tools have long labels in certain languages
Bug: T332085
Change-Id: Ibdae716abc706267d63ffe25460b48fe44daf46b
2023-04-17 20:55:49 +00:00
Jon Robson 97a640945f Forbid jQuery usage in Vector 2022
Change-Id: I9d07acffa6f8133ec3e44ceba3d1fa5b27b81258
2023-04-17 17:20:59 +00:00
Jon Robson 080b6958e8 Use modern ES6 methods
* Prefer dispatchEvent to $.trigger
* Prefer Object.assign to $.extend
* Prefer URLSearchParams to $.params
* Prefer getAttribute / properties to $.attr
* Prefer document.querySelectorAll over $.find

Change-Id: I5f4464e5bfa11b401e663f0b8761fc6092380627
2023-04-14 13:38:38 -07:00
Jon Robson 2622472983 Point out the limited width control
The limited control will be pointed to on page load
When wgVectorPageLoadIndicator is set to true (defaults
to false)

Clicking the button should show the indicator.

Additional change:
* Update config.json to reflect new state
(Follow up to 28ada2dc)

Bug: T333601
Change-Id: I188ed7226b9a1530e54b1aaa80caa0830bf73633
2023-04-14 17:15:56 +00:00
Jon Robson 10033b294e Drop ES5 compatible code
Drop usages of $.closest in favor of ES6 closest

We also no longer need to check for whether closest is available
now that we do not need to worry about ES5 code.

Change-Id: I2442a4f69f8181dd761ca7ac418839cfca26a36f
2023-04-13 00:27:22 +00:00
Jon Robson 2499e834bb Remove Eslint disable and TypeScript ignore rules, bump coverage
Follow up to 87dd101a
* bump coverage to reflect improved test state
* remove ts-ignore statements
* Drop eslint-disable-next-line compat/compat rules in ES6 code
* Drop TypeScript checking on Jest files
* Identifies an existing usage of ES7 includes method in place
where ES6 browsers need to be supported.
* Update App.vue booleans to default to false. Note this doesn't
impact our usage of the search app as we always pass these values
in.
* Drop unused eslintEs6.json configuration file

Change-Id: Ib6f1ef77bf4e27ecdcc54b5fb963818437f8195c
2023-04-13 00:20:44 +00:00
Jon Robson d4a7fb6479 Rearrange setupIntersectionObservers
Update setupIntersectionObservers so it only contains code
that uses observers. Other code is moved to the skin.js entry point
along with other features.

Change-Id: Ia11b4e07f899426687c616ce2054e0df9d36ab7c
2023-04-12 17:39:36 +00:00
Jon Robson 87dd101a69 Consolidate and fix eslint errors, dropping ts-ignores
* Upgrade @wikimedia/types-wikimedia to allow us to drop several
@ts-ignores
* Merges eslint rules now that ES6 is default everywhere
* Runs autofix command
* Fixes various prefer-const errors

Change-Id: Iee5bcb93f10a76d80dbeec813f6387c13438263e
2023-04-11 16:56:31 -07:00
Jon Robson c3e57e0ecd Merge skins.vector.es6 into skins.vector.js
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
2023-04-11 23:18:46 +00:00