Page MenuHomePhabricator

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

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

Event Timeline

Demian changed the subtype of this task from "Task" to "Spike".Jul 1 2020, 5:28 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

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

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

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

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

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

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

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

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 claimed this task.

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.