Merge "Replace deprecated classes with modern ones"

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>

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;
 	}

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;

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;

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.

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 );

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