From 7e7bdb4f5438920b10fff7d8cc7b23790fddef34 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Thu, 11 Jun 2020 14:02:04 -0700
Subject: [PATCH] Replace deprecated classes with modern ones

Following-up I00b4d2fd795195cd9c8add650a3b3cafdced5465
it's now time to settle on `.vector-menu*` classes.

Change-Id: I8669d402b6b757cd5bf59a5e0df377b6023b0700
---
 includes/templates/Menu.mustache              |  2 +-
 resources/skins.vector.styles.responsive.less |  4 +--
 .../skins.vector.styles/MenuDropdown.less     | 25 ++++++++-----------
 resources/skins.vector.styles/MenuTabs.less   |  2 --
 .../TabWatchstarLink-ie8.less                 |  6 ++---
 .../skins.vector.styles/TabWatchstarLink.less |  4 +--
 resources/skins.vector.styles/layout.less     |  2 +-
 7 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 4dbe79e..81979e2 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -6,7 +6,7 @@
 <nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" role="navigation" {{{html-tooltip}}}
 	 {{{html-userlangattributes}}}>
 	{{#is-dropdown}}
-	<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
+	<input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
 	{{/is-dropdown}}
 	<h3 id="{{label-id}}">
 		<span>{{label}}</span>
diff --git a/resources/skins.vector.styles.responsive.less b/resources/skins.vector.styles.responsive.less
index 3bcd76f..b9ab2bc 100644
--- a/resources/skins.vector.styles.responsive.less
+++ b/resources/skins.vector.styles.responsive.less
@@ -108,9 +108,7 @@
 		padding: 0;
 	}
 
-	// FIXME: Drop .menu class after cache has cleared.
-	.vectorMenu .menu,
-	.vectorMenu .vector-menu-content-list {
+	.vector-menu-dropdown .vector-menu-content-list {
 		left: inherit;
 		right: -1px;
 	}
diff --git a/resources/skins.vector.styles/MenuDropdown.less b/resources/skins.vector.styles/MenuDropdown.less
index 1573387..ffa5190 100644
--- a/resources/skins.vector.styles/MenuDropdown.less
+++ b/resources/skins.vector.styles/MenuDropdown.less
@@ -2,8 +2,6 @@
 @import 'mediawiki.mixins.less';
 
 /* Variants and Actions */
-// FIXME: For cached HTML
-.vectorMenu,
 .vector-menu-dropdown {
 	direction: ltr;
 	float: left;
@@ -47,7 +45,8 @@
 		}
 	}
 
-	.menu {
+	// The menu itself.
+	.vector-menu-content-list {
 		background-color: @background-color-base;
 		list-style: none none;
 		// Match the width of the dropdown "heading" (the tab)
@@ -67,8 +66,6 @@
 		z-index: @z-index-menu;
 	}
 
-	// FIXME: Drop .menu class after cache has cleared.
-	&:hover .menu,
 	&:hover .vector-menu-content-list {
 		opacity: 1;
 		visibility: visible;
@@ -76,8 +73,6 @@
 
 	// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
 	// Support: IE8
-	// FIXME: drop .menu selector when cache has cleared
-	.vectorMenuCheckbox:checked ~ .menu,
 	.vector-menu-checkbox:checked ~ .vector-menu-content-list {
 		opacity: 1;
 		visibility: visible;
@@ -106,26 +101,26 @@
 	}
 }
 
-#mw-head .vectorMenu h3 {
+#mw-head .vector-menu-dropdown h3 {
 	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
 	background-position: right bottom;
 	float: left;
 	height: unit( 40 / @font-size-tabs / @font-size-browser, em );
 	margin: 0 -@border-width-base 0 0;
 	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
-	// act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well.
+	// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
 	// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
-	// `padding-left` in `.vectorMenu h3 a`
+	// `padding-left` in `.vector-menu-dropdown h3 a`
 	padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
 }
 
 // Tab Separators
 // `.vectorTabs`: Outer start border (left in LTR) of tab row.
 // `.vectorTabs a`: Border between tabs and outer end (right in LTR) border.
-// `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu.
-.vectorTabs,
-.vectorTabs a,
-#mw-head .vectorMenu h3 {
+// `#mw-head .vector-menu-dropdown h3`: // Outer end (right in LTR) border of "Actions" menu.
+.vector-menu-tabs,
+.vector-menu-tabs a,
+#mw-head .vector-menu-dropdown h3 {
 	background-image: url( images/tab-separator.png );
 	background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
 	background-repeat: no-repeat;
@@ -134,7 +129,7 @@
 }
 
 // Invisible checkbox covering the dropdown menu handle
-.vectorMenuCheckbox {
+.vector-menu-checkbox {
 	cursor: pointer;
 	position: absolute;
 	top: 0;
diff --git a/resources/skins.vector.styles/MenuTabs.less b/resources/skins.vector.styles/MenuTabs.less
index 660d5ec..5ee80ee 100644
--- a/resources/skins.vector.styles/MenuTabs.less
+++ b/resources/skins.vector.styles/MenuTabs.less
@@ -6,8 +6,6 @@
  */
 
 /* Namespaces and Views */
-// FIXME: For cached HTML
-.vectorTabs,
 .vector-menu-tabs {
 	// Tab separator: Outer start border (left in LTR) of tab row.
 	background-position: left bottom;
diff --git a/resources/skins.vector.styles/TabWatchstarLink-ie8.less b/resources/skins.vector.styles/TabWatchstarLink-ie8.less
index b756572..e0a1cc7 100644
--- a/resources/skins.vector.styles/TabWatchstarLink-ie8.less
+++ b/resources/skins.vector.styles/TabWatchstarLink-ie8.less
@@ -15,15 +15,15 @@
 @ie8-media-start: ~'@media \0screen {';
 @ie8-media-end: ~'} after';
 @{ie8-media-start}
-.vectorTabs .mw-watchlink.icon a {
+.vector-tabs .mw-watchlink.icon a {
 	width: auto;
 	height: auto;
-	// Copied from 'VectorTabs.less'.
+	// Copied from 'MenuTabs.less'.
 	padding: 1.25em 8px 0 8px;
 }
 
 // LESS nesting doesn't work in this hack.
-.vectorTabs .mw-watchlink.icon a:before {
+.vector-tabs .mw-watchlink.icon a:before {
 	display: none;
 }
 // Bogus extra rule for LESS compiler to render `@media` ending bracket.
diff --git a/resources/skins.vector.styles/TabWatchstarLink.less b/resources/skins.vector.styles/TabWatchstarLink.less
index bacde58..90186c9 100644
--- a/resources/skins.vector.styles/TabWatchstarLink.less
+++ b/resources/skins.vector.styles/TabWatchstarLink.less
@@ -4,8 +4,8 @@
 
 /* Watch/Unwatch Icon Styling */
 /* Only use icon if the menu item is not collapsed into the "More" dropdown
- * (in which case it is inside .vectorMenu instead of .vectorTabs). */
-.vectorTabs {
+ * (in which case it is inside `.vector-menu-dropdown` instead of `.vector-tabs`). */
+.vector-tabs {
 	// `#ca-unwatch` & `#ca-watch` both carry `.mw-watchlink` as well.
 	@width-watchlink: unit( 28 / @font-size-tabs / @font-size-browser, em );
 	@height-watchlink: unit( 40 / @font-size-tabs / @font-size-browser, em );
diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less
index 71786d5..2886011 100644
--- a/resources/skins.vector.styles/layout.less
+++ b/resources/skins.vector.styles/layout.less
@@ -5,7 +5,7 @@
 @import 'mediawiki.mixins.less';
 
 // Modern layout variables
-@height-tabs: 2.5em; // Keep in sync with .vectorTabs height
+@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
 @margin-top-sidebar: 0.5em;
 
 // Header sizes defined in the description of T246170 and comment T246170#5957100