Page MenuHomePhabricator
Create Task
Maniphest T205341

Replace reset.css rules with ResourceLoaderSkinModule `normalize` feature
Closed, ResolvedPublic
Actions

Assigned To
None
Authored By
Volker_E
Sep 24 2018, 8:50 PM
Tags
Referenced Files
F28995893: Screen Shot 2019-05-09 at 7.15.38 PM.png
May 10 2019, 2:21 AM
F28995892: Screen Shot 2019-05-09 at 7.15.33 PM.png
May 10 2019, 2:21 AM
F28995966: Screen Shot 2019-05-09 at 7.19.02 PM.png
May 10 2019, 2:21 AM
F28995973: Screen Shot 2019-05-09 at 7.20.34 PM.png
May 10 2019, 2:21 AM
F28748590: Screen Shot 2019-04-24 at 10.36.35 AM.png
Apr 24 2019, 2:40 AM
F28748588: Screen Shot 2019-04-24 at 10.36.40 AM.png
Apr 24 2019, 2:40 AM
F28748586: Screen Shot 2019-04-24 at 10.36.27 AM.png
Apr 24 2019, 2:40 AM
F28748589: Screen Shot 2019-04-24 at 10.37.13 AM.png
Apr 24 2019, 2:40 AM
View All 9 Files
Subscribers
Aklapper
AndyRussG
Edtadros
gerritbot
gh87
Izno
Jdlrobson
View All 15 Subscribers

Description

MinvervaNeue has been using for historic reasons[1] a fork of Erik Meyer's reset.
This has become seen as disadvantegous for a few reasons in contrast to normalize.css:

  1. normalize.css preserves useful defaults rather than "unstyling" everything.
  2. It corrects some common bugs that are out of scope for reset.css.
  3. It doesn't clutter your dev tools.
  4. It is more modular and can be broken down to the elements MinveraNeue wants to support

On top of normalize, we could also add some opinionated styles inspired by collections like sanitize.css and clearly mark them so.

[1]: Invented first to tame T42751 6 years ago.

Proposed change

Subtasks (and patches by @Volker_E; all of which are small) provide the split of the monster selector in more modular code. In a feature branch:

  • Patches which split up code only
  • Patches which add additional properties, inspired by normalize.css

Acceptance criteria

  • Table styles have been moved to a separate file tables.less and ordered by specificity (tracked in subtask T217620)
  • Image styles are moved to images.less. Border reset is moved to links.less (tracked in subtask T217630)
  • Form styles are moved out of the reset to more logical places (T217622)
  • Unnecessary reset rules are removed (T217631) including for headings (T217626) and audio/video (T217629). Note video tag is not currently used in mobile site so risk here is negligible.
  • The normalize feature should be added to Minerva's ResourceLoaderSkinModule definition.

QA steps

  • We can rely on Pixel for this. Provided there are no visual regression this can be called resolved.

Sign off steps

  • Make sure all subtasks are merged.

Details

SubjectRepoBranchLines +/-
Remove the rest of the resetmediawiki/skins/MinervaNeuemaster+15 -11
Reset: Drop p and div inside overlaysmediawiki/skins/MinervaNeuemaster+21 -1
Reset: Further simplify the resetmediawiki/skins/MinervaNeuemaster+9 -8
Font size for search input and overlay search should be consistentmediawiki/skins/MinervaNeuemaster+1 -0
Fixes: Notification icon displayed with bullet pointmediawiki/skins/MinervaNeuemaster+1 -0
Replace reset with SkinModule normalizemediawiki/skins/MinervaNeuemaster+15 -47
Remove unnecessary phrasing content reset and handle `address`mediawiki/skins/MinervaNeuereset-cleanup+0 -6
Remove browser default `padding` on `button` and `input`mediawiki/extensions/MobileFrontendmaster+2 -0
Merge remote-tracking branch 'origin/reset-cleanup' into HEADmediawiki/skins/MinervaNeuemaster+0 -0
Use `font-size: 100%` instead of `inherit` to ensure form element sizingmediawiki/extensions/MobileFrontendmaster+4 -3
Fix `button` size in `.header-actions`mediawiki/skins/MinervaNeuereset-cleanup+2 -0
Additional icon resets for `button` elementsmediawiki/skins/MinervaNeuereset-cleanup+3 -1
Remove emptied 'reset.less' and its skin dependencymediawiki/skins/MinervaNeuereset-cleanup+0 -6
Fix UI regressions with icons, inputs and p elementsmediawiki/skins/MinervaNeuereset-cleanup+15 -11
Introduce 'forms.less' with styling most common UI form elementsmediawiki/skins/MinervaNeuereset-cleanup+29 -10
Move list specific styles to lists.lessmediawiki/skins/MinervaNeuereset-cleanup+33 -30
Remove unnecessary `line-height` definitionsmediawiki/skins/MinervaNeuereset-cleanup+0 -6
Remove form styles from 'reset.less'mediawiki/skins/MinervaNeuereset-cleanup+0 -12
Add sensitive form element defaultsmediawiki/extensions/MobileFrontendmaster+31 -0
Address `p`, `pre` and `blockquote` styles in 'text.less'mediawiki/skins/MinervaNeuereset-cleanup+5 -0
Move `p`, `pre` and `blockquote` styles to 'text.less'mediawiki/skins/MinervaNeuemaster+5 -0
Remove `ol` overrides to ensure list styles in non-Arabic number scriptsmediawiki/skins/MinervaNeuemaster+5 -6
Remove unnecessary table `font-size` resetmediawiki/skins/MinervaNeuereset-cleanup+0 -4
Move (opinionated) table styles to tables stylesheetmediawiki/skins/MinervaNeuereset-cleanup+37 -21
Move headings specific reset to 'headings.less'mediawiki/skins/MinervaNeuereset-cleanup+13 -3
Move sensitive `audio` & `video` default styles out of 'reset.less'mediawiki/skins/MinervaNeuereset-cleanup+7 -2
Move sensitive `img` reset rules to specific LESS filesmediawiki/skins/MinervaNeuereset-cleanup+9 -1
Move `html` and `body` styles to 'ui.less'mediawiki/skins/MinervaNeuemaster+14 -13
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Volker_E moved this task from Nominated (next meeting) to Needs code review on the Front-end-Standards-Group board.May 8 2019, 12:03 PM
gerritbot added a comment.May 8 2019, 9:41 PM

Change 508946 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Use font-size: 100% instead of inherit to ensure form element sizing

https://gerrit.wikimedia.org/r/508946

gerritbot added a comment.May 8 2019, 10:10 PM

Change 508950 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Remove browser default padding on button and input

https://gerrit.wikimedia.org/r/508950

gerritbot added a comment.May 9 2019, 12:12 PM

Change 509045 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove unnecessary line-height definitions

https://gerrit.wikimedia.org/r/509045

gerritbot added a comment.May 9 2019, 1:01 PM

Change 509045 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove unnecessary line-height definitions

https://gerrit.wikimedia.org/r/509045

gerritbot added a comment.May 9 2019, 1:23 PM

Change 509054 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Move list specific styles to lists.less

https://gerrit.wikimedia.org/r/509054

gerritbot added a comment.May 9 2019, 2:07 PM

Change 509062 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Introduce 'forms.less' with styling most common UI form elements

https://gerrit.wikimedia.org/r/509062

gerritbot added a comment.May 9 2019, 2:15 PM

Change 509064 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove emptied 'reset.less' and its skin dependency

https://gerrit.wikimedia.org/r/509064

Volker_E added a comment.May 9 2019, 2:16 PM

@Jdlrobson I couldn't reproduce the button background and border issues. With the all the additional patches above, there's only one thing remaining from my POV:
When focussing the overlay the search box moves further than before. On a first skim, I couldn't pin-point what rule causes this.

gerritbot added a comment.May 9 2019, 5:14 PM

Change 509115 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@reset-cleanup] Fix UI regressions with icons, inputs and p elements

https://gerrit.wikimedia.org/r/509115

gerritbot added a comment.May 9 2019, 5:24 PM

Change 509054 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Move list specific styles to lists.less

https://gerrit.wikimedia.org/r/509054

gerritbot added a comment.May 9 2019, 5:59 PM

Change 509062 abandoned by VolkerE:
Introduce 'forms.less' with styling most common UI form elements

Reason:
Abandoned for I68551aa0969

https://gerrit.wikimedia.org/r/509062

gerritbot added a comment.May 9 2019, 9:24 PM

Change 509115 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Fix UI regressions with icons, inputs and p elements

https://gerrit.wikimedia.org/r/509115

gerritbot added a comment.May 9 2019, 10:00 PM

Change 509064 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Remove emptied 'reset.less' and its skin dependency

https://gerrit.wikimedia.org/r/509064

Jdlrobson added a comment.May 10 2019, 2:21 AM

Doh, I missed two things :/

Screen Shot 2019-05-09 at 7.15.33 PM.png (58×63 px, 3 KB)

Screen Shot 2019-05-09 at 7.15.38 PM.png (81×511 px, 8 KB)

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/509178 Additional icon resets for button elements fixes those.

Also problem with overlay buttons and header height

Screen Shot 2019-05-09 at 7.19.02 PM.png (75×164 px, 4 KB)

Screen Shot 2019-05-09 at 7.20.34 PM.png (107×1 px, 9 KB)

This needs a skinStyle inside skinStyles/mobile.startup/Overlay.less (haven't got time to check that now)

Once those are fixed do

git fetch origin
git checkout origin/master
git merge --no-ff  origin/reset-cleanup
Amend the commit with the change ID I66597b481ca6077105de7ebdbbb504a2f3116ccc
gerritbot added a comment.May 10 2019, 7:40 AM

Change 509178 had a related patch set uploaded (by VolkerE; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@reset-cleanup] Additional icon resets for button elements

https://gerrit.wikimedia.org/r/509178

gerritbot added a comment.May 10 2019, 9:57 AM

Change 509178 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Additional icon resets for button elements

https://gerrit.wikimedia.org/r/509178

gerritbot added a comment.May 10 2019, 2:51 PM

Change 509425 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@reset-cleanup] Fix button size in .header-actions

https://gerrit.wikimedia.org/r/509425

gerritbot added a comment.May 13 2019, 5:28 PM

Change 509425 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@reset-cleanup] Fix button size in .header-actions

https://gerrit.wikimedia.org/r/509425

Volker_E updated the task description. (Show Details)May 14 2019, 3:38 PM
gerritbot added a comment.Jun 4 2019, 12:43 PM

Change 508946 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Use font-size: 100% instead of inherit to ensure form element sizing

https://gerrit.wikimedia.org/r/508946

Jdlrobson removed the point value for this task.Jul 8 2019, 11:40 PM

@Jdrewniak @Volker_E what's left here? I don't see any open patchsets and unless I'm mistaken https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/508675/-1..4 did not land.

I've rebased it, so the question now is do we need to schedule some QA and estimation?
Story points seem irrelevant at this point.
I have a sync with Olga on Wednesday so can arrange some time if I know what's needed to push this over the finish line.

Jdlrobson moved this task from Triaged but Future to Tracking on the Web-Team-Backlog board.Jul 31 2019, 6:54 PM
Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.
gerritbot added a comment.Sep 18 2019, 8:16 PM

Change 508675 abandoned by Jdlrobson:
Merge remote-tracking branch 'origin/reset-cleanup' into HEAD

https://gerrit.wikimedia.org/r/508675

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking), Patch-For-Review.Oct 29 2019, 5:41 PM
Volker_E closed subtask T222877: Remove `body` `line-height` from ui.less as Resolved.Dec 11 2019, 5:18 AM
Jdlrobson moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Dec 11 2019, 5:59 PM
Jdlrobson moved this task from Backlog to Code organisation on the MinervaNeue board.Jan 17 2020, 11:25 PM
gerritbot added a comment.Feb 4 2020, 10:08 AM

Change 508950 abandoned by Jdlrobson:
Remove browser default padding on button and input

Reason:
let's reboot this reset stuff sometime this year - but this time let's pair on it to make sure it goes more smoothly!

https://gerrit.wikimedia.org/r/508950

Jdlrobson renamed this task from Split up reset.css rules to specific element selectors only where needed and remove file altogether to Replace reset.css rules with ResourceLoaderSkinModule `normalize` feature.Jul 9 2020, 9:34 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson mentioned this in T256520: Consider 'normalize' stylesheet RL module.
Jdlrobson added a project: MediaWiki-Core-Skin-Architecture.Jun 11 2021, 9:35 PM
Jdlrobson moved this task from Backlog to It's complicated on the MediaWiki-Core-Skin-Architecture board.Jun 14 2021, 6:05 PM
Jdlrobson moved this task from It's complicated to Clean up the reset rules on the MediaWiki-Core-Skin-Architecture board.Jul 13 2021, 11:52 PM
Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.Jul 15 2021, 10:51 PM
Jdlrobson added a parent task: T285352: [GOAL] ResourceLoader modules performance related improvements in Minerva skins.
Jdlrobson moved this task from unsed to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 10 2021, 8:50 PM
Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.
Jdlrobson moved this task from Backlog to Simplify Minerva on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Aug 11 2021, 6:07 PM
Jdlrobson moved this task from Simplify Minerva to Unused on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Sep 3 2021, 5:04 PM
Jdlrobson moved this task from Unused to Site performance improvements on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Jan 7 2022, 4:56 PM
Jdlrobson merged a task: T300824: <small> not working on Mobile View.EditedFeb 3 2022, 3:35 PM
Jdlrobson added subscribers: gh87, Izno.

I think we're in a place we can use the reset now..?
We had a report that small tags are not styled with useful defaults which was the motivation added here.

I think we just need to add the normalize feature to the ResoriceLoaderSkin definition and delete the normalize file in Minerva.

Jdlrobson moved this task from Site performance improvements to deprecations/removals/code simplification on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Apr 5 2022, 3:42 PM
Jdlrobson added a project: patch-welcome.Sep 7 2023, 9:35 PM
Jdlrobson closed subtask T217620: [subtask] Remove table and table elements default font-size setting as Resolved.Sep 7 2023, 9:38 PM
Jdlrobson mentioned this in T217620: [subtask] Remove table and table elements default font-size setting.
Jdlrobson closed subtask T217630: [subtask] Move sensitive `img` styles to 'images.less' as Resolved.
Jdlrobson mentioned this in T217630: [subtask] Move sensitive `img` styles to 'images.less'.
Jdlrobson closed subtask T217622: [subtask] Move form specific selectors to their own LESS file as Resolved.
Jdlrobson mentioned this in T217622: [subtask] Move form specific selectors to their own LESS file.
Jdlrobson updated the task description. (Show Details)
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptSep 7 2023, 9:39 PM
Jdlrobson updated the task description. (Show Details)Dec 7 2023, 4:47 PM
Jdlrobson mentioned this in T353002: RecentChanges, RecentChangesLinked and Watchlist should use Codex for their form elements.
Jdlrobson updated the task description. (Show Details)
gerritbot added a comment.Feb 2 2024, 5:12 AM

Change 995137 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Replace reset with SkinModule normalize

https://gerrit.wikimedia.org/r/995137

gerritbot added a project: Patch-For-Review.Feb 2 2024, 5:12 AM
gerritbot added a comment.Feb 7 2024, 2:38 PM

Change 995137 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Replace reset with SkinModule normalize

https://gerrit.wikimedia.org/r/995137

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.18; 2024-02-13).Feb 7 2024, 3:00 PM
gerritbot added a comment.Feb 7 2024, 11:05 PM

Change 998537 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Fixes: Notification icon displayed with bullet point

https://gerrit.wikimedia.org/r/998537

gerritbot added a comment.Feb 8 2024, 12:55 AM

Change 998537 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fixes: Notification icon displayed with bullet point

https://gerrit.wikimedia.org/r/998537

gerritbot added a comment.Feb 9 2024, 12:00 AM

Change 999143 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Font size for search input and overlay search should be consistent

https://gerrit.wikimedia.org/r/999143

gerritbot added a comment.Feb 9 2024, 12:46 AM

Change 999143 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Font size for search input and overlay search should be consistent

https://gerrit.wikimedia.org/r/999143

gerritbot added a comment.Feb 9 2024, 8:25 PM

Change 1000021 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Reset: Further simplify the reset

https://gerrit.wikimedia.org/r/1000021

gerritbot added a comment.Feb 14 2024, 2:34 AM

Change 1003135 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] WIP: Remove the rest of the reset

https://gerrit.wikimedia.org/r/1003135

gerritbot added a comment.Feb 14 2024, 2:55 AM

Change 1003136 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Reset: Drop p and div

https://gerrit.wikimedia.org/r/1003136

gerritbot added a comment.Feb 14 2024, 11:58 AM

Change 1000021 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Reset: Further simplify the reset

https://gerrit.wikimedia.org/r/1000021

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.19; 2024-02-20); removed MW-1.42-notes (1.42.0-wmf.18; 2024-02-13).Feb 14 2024, 12:01 PM
Izno added a subtask: T357589: [Regression] Wikitables has unwanted border spacing on mobile.Feb 14 2024, 10:06 PM
gerritbot added a comment.Feb 14 2024, 11:35 PM

Change 1003136 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Reset: Drop p and div inside overlays

https://gerrit.wikimedia.org/r/1003136

Pcoombe subscribed.Feb 15 2024, 7:39 PM
Pcoombe mentioned this in T357737: "Read as wiki page" on mobile talk page has default button styles.Feb 15 2024, 11:41 PM
Jdlrobson mentioned this in T357742: Discussion tools indentation changed to browser default.Feb 16 2024, 1:57 AM
Izno added a subtask: T357849: <caption> has lost its bolding.Feb 17 2024, 6:34 PM
ovasileva closed subtask T357589: [Regression] Wikitables has unwanted border spacing on mobile as Resolved.Feb 19 2024, 12:14 PM
Volker_E closed subtask T217631: [subtask] Remove unnecessary reset text rules as Resolved.Feb 19 2024, 9:33 PM
Volker_E closed subtask T217628: [subtask] Move `p, blockquote, pre` elements opinionated resets to 'text.less' as Resolved.Feb 20 2024, 12:22 AM
Jdlrobson closed subtask T357849: <caption> has lost its bolding as Resolved.Feb 20 2024, 6:49 PM
gerritbot added a comment.Feb 20 2024, 9:22 PM

Change 1003135 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove the rest of the reset

https://gerrit.wikimedia.org/r/1003135

Jdlrobson closed this task as Resolved.Feb 21 2024, 4:47 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson closed subtask T217626: [subtask] Move headings specific styles to 'headings.less' as Resolved.
Jdlrobson closed subtask T217629: [subtask] Move `audio` and `video` styles out of 'reset.less' as Resolved.
Jdlrobson closed subtask T222881: [subtask] Move list specific rules to 'ui.less'/'lists.less' as Resolved.
Jdlrobson closed subtask T222889: [subtask] Remove remaining 'reset.less' as Resolved.
Jdlrobson edited projects, added Unplanned-Sprint-Work, Web-Team-Backlog (FY2023-24 Q3 Sprint 3); removed Web-Team-Backlog (Needs Prioritization (Tech)).Feb 21 2024, 4:49 PM
ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.20; 2024-02-27); removed MW-1.42-notes (1.42.0-wmf.19; 2024-02-20).Feb 22 2024, 11:01 AM
Jdlrobson moved this task from Incoming to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 3) board.Feb 26 2024, 5:20 PM
Edtadros added a project: Verified.Mar 5 2024, 2:51 PM
Edtadros subscribed.

Not testable in production.

Edtadros mentioned this in T358383: Verify 1.42.0-wmf.20 deployment.Mar 5 2024, 2:52 PM
Izno mentioned this in T361299: Blockquote styles look off in Minerva.Mar 28 2024, 10:42 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL