Commit graph

48 commits

Author SHA1 Message Date
lwatson 6e9dcd10c8 Increase bundlesize limits
Codex v1.18.0 added 8 new tokens and styles for various components.

Refer to changelog for more info:
https://github.com/wikimedia/design-codex/blob/main/CHANGELOG.md#1180--2024-12-10

Bug: T381787
Change-Id: I58401027164c50a7eab694789597678e13392561
2024-12-10 18:20:04 -05:00
lmora 9b48993728 Reduce ResourceLoader modules
Delete the following deprecated modules:
skins.minerva.base.styles, skins.minerva.mainMenu.styles,
skins.minerva.icons.wikimedia and skins.minerva.mainMenu.icons
And reorganize files for skins.minerva.styles

Bug: T266361
Change-Id: I35b1d9461edd63a1a5d488a2fdc6939547fd29ad
2024-12-04 15:44:17 -06:00
Anne Tomasevich 268af9f826 Increase bundlesize limits
Codex v1.16.0 added new tokens and styles, in particular CSS-only icons
for table sort and pagination and ~12 new tokens.

Bug: T379636
Change-Id: If0108af217294bafe356072c7b13da00b99619d8
2024-11-13 19:54:57 +00:00
lmora 469c7ad6f2 Merge Icon Style mergeIconStyleModules
Merging skins.minerva.icons.wikimedia and
skins.minerva.mainMenu.icons modules into
skins.minerva.icons

Bug: T266361
Change-Id: I4095da5a0c6d2cff8ccd1ff1504a2d54635d1828
2024-11-12 22:30:10 +00:00
lmora 627db0c8f0 Add module to bundlesize.config
Adding skins.minerva.styles to bundlesize.config.json

Bug: T266361
Change-Id: I2ad07a0a8253a7b98651b64aca6a816a90a384e9
2024-11-12 18:23:04 +00:00
lmora ee47c3d0bb Create new skins.minerva.styles module
This merges the existing modules skins.minerva.base.styles
and skins.minerva.mainMenu.styles into a new module
skins.minerva.styles which is named consistently with
Vector's style module.

The old modules will be kept for caching reasons
for at least one, and possibly two deploy cycles,
after which we will continue this task.

Additional change:
* drop .minerva-icon--{name}-base20 and .minerva-icon--{name}-disabled variants
since these are no longer utilized and only serve cached HTML

Bug: T266361
Change-Id: Iccf415a22e9535603befae25b8cea467f9905437
2024-11-07 22:40:28 +00:00
Jon Robson 1b38bfbfc6 Disable unused icon variants
By default this module was inheriting variants and since it doesnt declare a
property selectorWithVariant it was using the default selectorWithVariant
rule which impacts OOUI icons.

Explicitly disable the variants for this module as they are unused. This
reduces the size of the modules.

Follow up to: I87b060cf98194d81679da2610944f58e8d941389

Bug: T374145
Bug: T376226
Change-Id: Icc008449ee498a946066c4ce5d46adcac194bd3b
2024-10-03 17:15:25 +00:00
ksarabia 5ef5694fbf Update Minerva skin to use Codex icons
- Define icon size variables in icons.less
- Update icon classes to use
  .cdx-mixin-css-icon()
- Remove temporary fixes in icons.less
- Add 'codex.styles' dependency in skin.json
- Set 'useMaskImage' to true in skin.json

Bug: T374145
Depends-On: Ia8f770aec365da77b39cb0258f546df7894e6ba4
Change-Id: I87b060cf98194d81679da2610944f58e8d941389
2024-09-27 21:53:55 +00:00
Jon Robson e89aab6b43 Cleanup: Remove dark mode banner code
this is not being utilized any more, tested or maintained so should
be removed.

Change-Id: Ib51bc5cb829f25b8a2ab864f7b9266578a4b1232
2024-09-06 09:31:03 -07:00
jenkins-bot 565f89e376 Merge "Create dark-mode launch banner component" 2024-05-24 20:22:56 +00:00
Jan Drewniak 903fbda3b0 Create dark-mode launch banner component
Creates a launch banner component for dark-mode
using the CSS-only Codex Dialog component.

This banner is currently not loaded on any page,
but can be invoked using mw.loader:

    mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', r => r( 'skins.minerva.DarkModeLaunchBanner')() );

Bug: T361047
Change-Id: I3cfa9517a387df636534a3940e09289e4d7a1e5b
2024-05-24 14:56:49 -04:00
Steph Toyofuku b7e54644b7 Make language selector disabled state accessible contrast
Remove the opacity filter and indicate a disabled state using the
disabled color for both text and the icon.  Add a new disabled icon
variant to accomplish this

Also fixes a small issue where the toast notification was unreadable in
night mode due to using --color-inverted.  Switch this to
--color-inverted-fixed, which was added for this purpose

Visual change for the language selector button, when there are no other
languages available

Bug: T361693
Change-Id: Id2f80028d967bf644673f651bb89718fa8723d22
2024-05-13 22:13:33 +00:00
Jon Robson 8f8fd6a1e4 Minerva should use content-tables ResourceLoaderSkinModule feature
The styles in Minerva are identical to the preset in core with the
own exception being padding. Therefore use the upstream styles
and retain only the override.

Bug: T357998
Depends-On: I206e91dac7e14d80a5ffc6b533255b54dafca29a
Change-Id: I3eb07a03b3b4e2a7544e5b07de6af9f67a1c965f
2024-03-21 22:49:14 +00:00
Jan Drewniak 65f1300b78 Add color: var( --color-base ); to .notheme class
Adds a rule that makes elements using the .notheme class
inherit black text unless specified otherwise.
This addresses situations where elements relying on
inheritance for color.

Bug: T358528
Change-Id: Ie59c31b5e25684ff5ecad507a273fbe71af4bca0
2024-03-07 16:02:02 -08:00
Jan Drewniak 649cb10622 Integrate Codex experimental design token build
Use the Codex experimental design token build to
providing CSS custom property version of design tokens
for night mode.

The build also provides Less variables which are
references to the CSS custom properties. These are
pulled into the mediawiki.skin.variables.less file
and propagated across core and extensions.

Bug: T358059
Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca
2024-03-04 23:04:57 +00:00
Jon Robson 224d44d897 Increase bundle size modestly to accomodate expected night mode CSS
This has been growing gradually. Having 0.5kb of wiggle room seems
appropriate.

Change-Id: I98fa43a608327331dd72086cacf09ddf32eb3a26
2024-02-26 22:13:51 +00:00
Jon Robson 252abacc0d Increase bundlesize in anticipation of next Codex release
The increase is due to the increase in size of the cdx icon mixin.
This does not impact render blocking CSS so this is an acceptable change.

Bug: T358028
Change-Id: Icea7aa0d2f80f33fc64fd9c7721a371e115a32cb
2024-02-20 14:54:34 -08:00
Jon Robson b079031b0a Send a toast notification if night mode is not available
Add a skin-night-mode-page-disabled class to the HTML element when
a page was disabled by the new MinervaNightModeOptions configuration
flag.

Bug: T356653
Change-Id: I7a6582ef8f66e78cc6f07da06bc4d2a3277cfcf0
2024-02-14 01:51:23 +00:00
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.

The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).

Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.

Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.

Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-02 17:57:27 +00:00
Bartosz Dziewoński 97aed1ad86 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: Ib97d034ab533124f06441e788c8608fb274dccf0
2023-11-27 20:03:16 +00:00
Bartosz Dziewoński 6294ca7196 Reduce CSS size & specificity for headings
Nesting these rules inside `h1, h2, h3, h4, h5, h6 { … }` generated
some enormously long selectors (as the whole selector had to be
repeated 6 times). It's not needed, as these elements do not occur
anywhere else.

Change-Id: I1647e37ff9a0c975d9320e4c34857f210a1858c2
2023-11-27 18:31:54 +00:00
Jdlrobson ca28efc9c7 Drop mw.mobileFrontend references
This restores the previously reverted patchset
If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9

Changes since original:
* Added Depends-On to MobileFrontend
* Uses OOUI classes for page issues rather than es6 classes - ES6
classes do not support modifications to class prior to running
super so MobileFrontend's View class is not compatible without
significant refactors.

Depends-On: I24ad75adf8519102ca356d64d99d765ab69180cc
Bug: T348807
Change-Id: I4ff82af0251254c846f2caee330af5af738f6029
2023-11-10 01:30:52 +00:00
Jdlrobson 2ee3e27406 Revert "Drop mw.mobileFrontend references"
This reverts commit 19ea6328b0.

Reason for revert: Breaks page issues and image overlay. I
will break this up into smaller less risky patches.

Change-Id: If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9
2023-11-03 19:26:16 +00:00
Jon Robson 19ea6328b0 Drop mw.mobileFrontend references
Bug: T348807
Change-Id: Ib71b43005e5788d0e29917a165281faa84926414
2023-10-31 21:54:26 +00:00
Jon Robson 23da7a1fb5 Remove Minerva bundle size check
The mediawiki.ui.icon module is not loaded in this skin.

Change-Id: I2956933226687fe0881b0099c6de68af70a4364e
2023-09-19 16:03:46 +00:00
Jon Robson 952789bc17 Switch Minerva button template to use Codex and remove mw-ui-button
- Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva
- Removes icon flushing classes, use codex mixins instead

80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions

Bug: T319260
Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8
2023-08-24 15:57:01 -05:00
Jan Drewniak 11e09ea7b3 [Icons] Convert history/next status bar icons to Codex
Creates a new Icon.mustache file in favour of using
MinervaUI::iconClass.

Add a new icons.less file and the following icons:
- history
- expand (next) arrow.

These icons are used exclusively in the history
status bar at the bottom of most pages.

Bug: T319260
Change-Id: If81186418fe758d7be9c3e57cf5d2aa889517f2d
2023-07-28 16:56:24 -07:00
bwang 6635693826 [Icons] Update usage of MobileFrontend Icon code
Visual change:
* Improves vertical alignment of TOC

Technical change:
* Remove dependency on MobileFrontend

Bug: T319260
Change-Id: I0526293c6a99dfe078b9e32aa247522a63b6d0fd
2023-07-25 17:55:02 +00:00
Bartosz Dziewoński 8c0f0c578e Remove talk page tools
Bug: T319145
Change-Id: Ib432564e1049f18334653e5eb3981f0f051582b3
2023-03-13 18:21:52 +00:00
Ammarpad ec3056265d Don't show download button if there's no window.print
Bug: T309591
Change-Id: I2e9b59cbf0e83942af0023c46052d7f2e784aa11
2023-01-25 22:37:03 +01:00
bwang 0bee6a1eb6 Move the form element in Minerva's header and apply core checkbox hack consistently to toggle lists
- Factors out Header and SearchBox partials

Bug: T294164
Depends-on: I16d1dfba1b6d0745afff14f1b79586bb17ecdd69
Change-Id: I997f3c2de5cf813db63220580e7cb3fe09aa6932
2022-01-04 11:01:17 -06:00
jdlrobson d4039f9240 Fix last modified bar icon change and search unStar-progressive
In b4fd1498bc we set a variant, which dropped the default global
progressive and invert variants. This is turn, made the mobile
watchstar on search disappear when selected.

Here we restore those icon variants, and take the time to refactor
the code so its more resilient against future icon changes.

Change-Id: I1423fbf69dce87715c159877b5f536b4e8e13390
2021-11-01 22:27:43 +00:00
Jdlrobson f9ae753b10 Increase mediawiki ui icon and button bundlesizes
d53908d681 was not the patch
I meant to apply. This correctly adds some desired "wiggle" room
to allow for changes to the unstable mediawiki icon and button
styles.

Change-Id: I4675be1e0b4b2a2a34507d85c551cc3234f1a9f6
2021-09-13 22:12:54 +00:00
jdlrobson d53908d681 Increase mediawiki ui icon and button bundlesizes
Allow for a bit more wiggle room as we adjust the specs.

Change-Id: I26dad654941d146c5ecb1fc919811cd4173aa860
2021-09-09 19:59:46 +00:00
jdlrobson 311fa329e2 [config] Prepare for mw-ui-icon-element.mw-ui-button support
Increase the bundlesize test to account for the new
mw-ui-icon-element.mw-ui-button CSS

Depends-On: I429eab0730fb4cda5c69d5af7311f517be525851
Change-Id: Ibabeafe2c40ce718facb3fef4a85e94d453db5fd
2021-09-01 20:41:59 +00:00
jdlrobson 616da046bb Allocate space for mw-ui-button to grow
In I7407e0451488bc01f2eed1c36ed87a11e7033a71 mw-ui-button will
include styles for compatibility with the checkbox. The change in KB
is minimal, and this will be reclaimed in Minerva when it makes use
of the checkbox hack.

Change-Id: Iaf062de9ec9c857b0d8643aa3f35d4c700d21d3b
2021-08-30 18:05:09 +00:00
jdlrobson 9fa0f3a64d Use MediaWiki UI version 2 from core in Minerva
Depends-on: Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
Bug: T191021
Change-Id: Ifdc3a3273aa93129177a11814651ec811c20f49c
2021-07-20 11:59:23 -07:00
jdlrobson f1c3ab3d29 Prepare for existing bundlesize change
This module is provided by core and about to increase.

Bug: T191021
Change-Id: I64e1f10c8e2fb844ecafe886a6acb29deea67dee
2021-07-16 12:39:58 -07:00
Timo Tijhof 0d61c78f73 Move skins.minerva.content.styles into skins.minerva.base.styles
This could be made even simpler by not using a LESS varialbe for
hacks.less, but loading it conditionally through the moduel def.
But, as a first step we can merge the two as-is.

Given that the subject and target are always referenced together
in page views, there is no need to keep an alias around. However,
I'm keeping it anyway so as to not produce any
`/* {"skins.foo":"missing"} */` appendix to the stylesheet response
for these cached URLs.

Bug: T266361
Change-Id: I8578faab8ca32bd49be90711cbd5e182763b8065
2021-06-21 17:50:37 +00:00
jdlrobson 4a6dbd3f29 Enable wgMinervaApplyKnownTemplateHacks by default to reflect production
This will give consistent bundle sizes across CI

Bug: T283182
Change-Id: Ife597ad5e6f160e4fa576041caffc672f3bfcf55
2021-05-27 20:37:53 +00:00
mainframe98 87934a3034 Use content-body skin feature
This styles parser errors, which were previously unstyled.
It removes the need for the clear for the table of contents
on stub pages

Additional change:
* The base styles module increases with this change
* While testing bundlesizes I noticed that the bundlesize for the
content styles is outdated and have updated it (this is unrelated
to the inclusion of the new feature)

Bug: T281228
Change-Id: I8e099b18f0866201cba378f6110913cdab478c4c
2021-05-14 15:42:19 +00:00
Nicholas Ray ec8c210333 Increase skins.minerva.content.styles bundlesize limit
The test keeps failing when run as part of the
selenium-daily-beta-Minerva job.

This is because the contents of skins.minerva.content.styles
is dependent on @wgMinervaApplyKnownTemplateHacks and that is
enabled on the beta cluster.

Change-Id: I185867caea2afc66fbaa6ec359ec5bcc8d7a5edc
2021-03-10 04:20:28 +00:00
jdlrobson ed0222b0d0 Remove client side error counting
Bug: T266359
Change-Id: I5350c801e7ecb7b8b28e54410cc57fd3b548b2ef
2020-10-23 11:09:22 -07:00
jdlrobson 02ebb84ea0 Hot fix: Use display for hiding/showing sidebar on OS 14_0
Note, this removes a visibility animation.

Bug: T264376
Change-Id: I3589c615a8739e5ece6538acf42ff1292be84d71
2020-10-06 15:58:41 +00:00
Dayllan Maza 0fc40f71c5 watchstar: Add temp-watched css class when expiry is present
MobileFrontend extension is currently tracking watched/temp-watch
css classes and applying animations to the "watch" event.
This patch starts adding temp-watched accordingly now that the
expiry is part of the event's data.

Note: this patch does not fix the lack of animation when transitioning
from half-star to empty-star or on page-load when the page is
temporarily watched but it fixes the awkward angle the half-star
icon was left in when transitioning from a full-star to a half-star

Bug: T262862
Change-Id: I1c8cb9c33cda76b87b6a9f15e408d88edbf61d93
2020-09-24 12:21:33 -04:00
Dayllan Maza f78d7c11e9 watchstar: Add expiry support to watchpage.mw event
The watchpage.mw event triggered on core now sends in the expiry value
if the watchlist is being watched temporarily. This patch is to
handle the star icon accordingly.

Bug: T261970
Depends-On: I9e31e41e3438ebc5e6e462f5136af5c36ba34194
Change-Id: Ia47190c1aaf4492a6cc31873a5b3bec75f2fec86
2020-09-14 09:23:33 +00:00
MusikAnimal 4a3e1fa9e8 Show half star for temporarily watched pages
This does not complete watchlist expiry support in MinervaNeue. It only
instructs the skin to show a half star instead of a full star on page
load if the page is being temporarily watched.

Bug: T251690
Change-Id: Ib5c479dcfe49041152ba662c56cc630c32eb220e
2020-08-27 11:57:13 -04:00
jdlrobson 7408d87465 Run bundlesize tests on every commit
It was added in 7340485014
but for some reason never enabled.

This was supposed to be protecting us from performance regressions
by monitoring the size of modules in the repo. It appears to be
broken both locally and on Jenkins when run on the due to some changes
in Phabricator.

Since then we've added bundle size tests to Vector using a different
more foolproof method. I think that method is more preferable as it
also provides coverage for JS and icons so the
associated script is copied over and used in Minerva
and activated on all commits.

Bug: T259080
Change-Id: I9ba2dcc060ec09d91814c947d5be3f71b055a66e
2020-07-28 23:43:38 +00:00