Page MenuHomePhabricator
Create Task
Maniphest T256897

Decide on and clean up naming of CSS classes identifying menus in toolbars and the sidebar.
Closed, ResolvedPublicSpike
Actions

Description

Following the pattern in T252467 it is considered to add unique CSS classes to each menu (in toolbars) and portlet (in sidebar).

Targets
  • Decide whether these classes will be public API or internal.
  • Decide what naming pattern to use for menus: #p-personal, etc.
  • Decide what naming pattern to use for sidebar portlets: #p-lang, #p-tb, etc.
Complete list of ids and proposed patterns
- '#p-personal'   => '.menu-personal',
- '#p-namespaces' => '.menu-namespaces', // Left side: Page, Discuss
- '#p-variants'   => '.menu-variants',   // Left side: dropdown
- '#p-views'      => '.menu-actions',    // Right side: View, Edit, Edit source, History, Watchstar
- '#p-cactions'   => '.menu-more',       // Right side: "More" dropdown
- '#p-tb'         => '.sidebar-toolbox',
- '#p-lang'       => '.sidebar-languages',
- '#p-*'          => '.sidebar-*'        // All other sidebar portal
Related

nav#p-personal T252467: Notify editors and users to update their Vector gadgets and user scripts/styles on portal CSS selector simplification
#p-personal ul: T252447: Notify gadget users to update Vector scripts and styles
Follow-up to: T249372: [Dev] DRY up the menu templating code
Discussion started at: patch 605298

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Standardize portlets across skinsJdlrobsonmediawiki/coremaster+87 -3
Use newly available Skin::getPortletData method to get mw-portlet classJdlrobsonmediawiki/skins/Vectormaster+39 -74
Add unique '.menu-*' and '.sidebar-*' classes to all menus and portalsAron Manningmediawiki/skins/Vectormaster+75 -31
[cleanup] Distinguish `.vector-menu` and `.menu-personal`Aron Manningmediawiki/skins/Vectormaster+7 -7
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Demian created this task.Jul 1 2020, 5:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 1 2020, 5:28 PM
• Demian changed the subtype of this task from "Task" to "Spike".Jul 1 2020, 5:28 PM
gerritbot added a comment.Jul 1 2020, 5:31 PM

Change 605298 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Add unique '.menu-*' and '.sidebar-*' classes to all menus and portals

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /605298

gerritbot added a project: Patch-For-Review.Jul 1 2020, 5:31 PM

Change 602847 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [cleanup] Distinguish .vector-menu and .vector-menu-personal

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /602847

• Demian added a project: Spike.Jul 5 2020, 4:56 PM
gerritbot added a comment.Jul 21 2020, 11:36 PM

Change 615321 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Standardize portlets across skins

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

gerritbot added a comment.Jul 21 2020, 11:36 PM

Change 615322 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Use newly available Skin::getPortletData method

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

gerritbot added a comment.Jul 21 2020, 11:37 PM

Change 602847 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [cleanup] Distinguish .vector-menu and .menu-personal

Reason:
On hindsight it was a big mistake on my part to introduce Vector specific styles. Even though it will take longer I think it's important to establish classes in the core skin platform that work across all skins. With that in mind I am abandoning this patch and other related patches in favor of the approach in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /615322 Use newly available Skin::getPortletData method [NEW]

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

gerritbot added a comment.Jul 21 2020, 11:37 PM

Change 605298 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Add unique '.menu-*' and '.sidebar-*' classes to all menus and portals

Reason:
On hindsight it was a big mistake on my part to introduce Vector specific styles. Even though it will take longer I think it's important to establish classes in the core skin platform that work across all skins. With that in mind I am abandoning this patch and other related patches in favor of the approach in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /615322 Use newly available Skin::getPortletData method [NEW]

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

He7d3r subscribed.Jul 22 2020, 2:28 PM
Jdlrobson mentioned this in T259190: New Vector: Unable to hide portlet links by ID.Jul 30 2020, 4:23 PM
gerritbot added a comment.Sep 22 2020, 7:04 PM

Change 615321 merged by jenkins-bot:
[mediawiki/core@master] Standardize portlets across skins

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

gerritbot added a comment.Sep 29 2020, 6:22 AM

Change 615322 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use newly available Skin::getPortletData method to get mw-portlet class

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

Jdlrobson closed this task as Resolved.Sep 29 2020, 3:52 PM
Jdlrobson claimed this task.
Jdlrobson edited projects, added: Web-Team-Backlog-Archived (Kanbanana-FY-2020-21); removed: Web-Team-Backlog-Archived (Design).

All portlets now have a class provided by core. For now this only applies to Vector but as more skins adopt the methods, these classes will appear in other skins.
This code is live on the beta cluster:
https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page

The views portlet for example has the classes mw-portlet mw-portlet-views provided by core and the classes provided by Vector` vector-menu vector-menu-tabs vectorTabs` (which we may now consider moving away from)

The IDs remain identical so as not to break existing gadgets.

phuedx added a subtask: T265809: addPortletLink function throws uncaught error when called by reference.Oct 26 2020, 5:07 PM
phuedx closed subtask T265809: addPortletLink function throws uncaught error when called by reference as Resolved.Nov 3 2020, 12:36 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 · Credits