Vector menu items are wrapped in spans + improve Vector addPortletLink support

* In legacy Vector, menu items are now wrapped with spans. This
  consistency in HTML is required for splitting Vector into two
  different skins.
* Vector's portlet link items now support icons

Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5

includes/SkinVector.php

@@ -319,9 +319,6 @@ class SkinVector extends SkinMustache {
 	public function generateHTML() {
 		if ( $this->isLegacy() ) {
 			$this->options['template'] = 'skin-legacy';
-			// Does not apply to gadgets adding menu items via addPortletLink. Should be
-			// removed when Ib23360e3439abc828404c1de8e0906915ee7d8b6 is merged.
-			unset( $this->options['link'] );
 		}
 		return parent::generateHTML();
 	}

resources/skins.vector.js/dropdownMenus.js

@@ -12,6 +12,66 @@ function closeDropdownsOnClickOutside() {
 	} );
 }
 
+/**
+ * @param {HTMLElement} item
+ * @return {HTMLElement|null}
+ */
+function getVectorMenu( item ) {
+	if ( item.classList.contains( 'vector-menu' ) ) {
+		return item;
+	} else {
+		var parent = /** @type {HTMLElement} */( item.parentNode );
+		return parent ? getVectorMenu( parent ) : null;
+	}
+}
+/**
+ * Adds icon placeholder for gadgets to use.
+ *
+ * @typedef {Object} PortletLinkData
+ * @property {string|null} id
+ */
+/**
+ * @param {HTMLElement} item
+ * @param {PortletLinkData} data
+ */
+function addPortletLinkHandler( item, data ) {
+	var link = item.querySelector( 'a' );
+	var menu = getVectorMenu( item );
+	// Dropdowns which have not got the noicon class are icon capable.
+	var isIconCapable = menu && menu.classList.contains(
+		'vector-menu-dropdown'
+	) && !menu.classList.contains(
+		'vector-menu-dropdown-noicon'
+	);
+
+	if ( isIconCapable && data.id && link ) {
+		// If class was previously added this will be a no-op so it is safe to call even
+		// if we've previously enhanced it.
+		// eslint-disable-next-line mediawiki/class-doc
+		link.classList.add(
+			'mw-ui-icon',
+			'mw-ui-icon-before',
+			// The following class allows gadgets developers to style or hide an icon.
+			// * mw-ui-icon-vector-gadget-<id>
+			// The class is considered stable and should not be removed without
+			// a #user-notice.
+			'mw-ui-icon-vector-gadget-' + data.id
+		);
+	}
+}
+
+// Enhance previously added items.
+Array.prototype.forEach.call(
+	document.querySelectorAll( '.mw-list-item-js' ),
+	function ( item ) {
+		addPortletLinkHandler( item, {
+			id: item.getAttribute( 'id' )
+		} );
+	}
+);
+
+mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
+
 module.exports = function dropdownMenus() {
 	closeDropdownsOnClickOutside();
 };

resources/skins.vector.styles.legacy/components/MenuDropdown.less

@@ -1,10 +1,6 @@
 // Extends the common MenuDropdown, but allows it to be opened via hover.
 
 .vector-menu-dropdown:not( .vector-user-menu ) {
-	li {
-		font-size: @font-size-tabs;
-	}
-
 	&:hover .vector-menu-content {
 		opacity: 1;
 		visibility: visible;