Add a special class to identify the first portal

In new Vector, the logo will no longer be present, so we need a more
future proof way of determining what the first portal is.

A new class `portal-first` is added (no decision about adopting BEM
has been made yet).
Cached pages will continue to use the old selector for now.

Change-Id: I6ac4493bb1f63686b48ff0c22b18d50d9fffb51d

includes/VectorTemplate.php

@@ -325,9 +325,14 @@ class VectorTemplate extends BaseTemplate {
 			}
 		}
 
+		$firstPortal = $props[0] ?? null;
+		if ( $firstPortal ) {
+			$firstPortal[ 'class' ] .= ' portal-first';
+		}
+
 		return [
 			'array-portals-rest' => array_slice( $props, 1 ),
-			'array-portals-first' => $props[0] ?? null,
+			'array-portals-first' => $firstPortal,
 		];
 	}
 
@@ -347,6 +352,7 @@ class VectorTemplate extends BaseTemplate {
 
 		$props = [
 			'portal-id' => "p-$name",
+			'class' => 'portal',
 			'html-tooltip' => Linker::tooltip( 'p-' . $name ),
 			'msg-label' => $msgObj->exists() ? $msgObj->text() : $msg,
 			'msg-label-id' => "p-$name-label",

includes/templates/Portal.mustache

@@ -1,6 +1,7 @@
 {{!
 Each portal has the following composition:
 	string portal-id
+	string class of portal
 	string html-tooltip
 	string msg-label-id
 	string? html-userlangattributes
@@ -9,7 +10,7 @@ Each portal has the following composition:
 	string? html-after-portal
 	string? html-hook-vector-after-toolbox is deprecated and used by the toolbox portal.
 }}
-<div class="portal" role="navigation" id="{{portal-id}}" {{{html-tooltip}}} aria-labelledby="{{msg-label-id}}">
+<div class="{{class}}" role="navigation" id="{{portal-id}}" {{{html-tooltip}}} aria-labelledby="{{msg-label-id}}">
 	<h3 {{{html-userlangattributes}}} id="{{msg-label-id}}">
 		{{msg-label}}
 	</h3>

resources/skins.vector.styles/Sidebar.less

@@ -19,7 +19,8 @@
 #mw-panel {
 	font-size: @font-size-nav-main;
 
-	/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
+	.portal-first,
+	/* FIXME: For caching. Can be removed in a week from the git blame commit id of this line. */
 	#p-logo + .portal {
 		background-image: none;
 		margin-top: 1em;

stories/Portal.stories.data.js

@@ -26,6 +26,7 @@ const portletAfter = ( html ) => {
 export const PORTALS = {
 	example: {
 		'portal-id': 'p-example',
+		class: 'portal',
 		'html-tooltip': 'Message tooltip-p-example acts as tooltip',
 		'msg-label': 'Portal title',
 		'msg-label-id': 'p-example-label',
@@ -41,6 +42,7 @@ export const PORTALS = {
 	},
 	navigation: {
 		'portal-id': 'p-navigation',
+		class: 'portal portal-first',
 		'html-tooltip': 'A message tooltip-p-navigation must exist for this to appear',
 		'msg-label': 'Navigation',
 		'msg-label-id': 'p-navigation-label',
@@ -52,6 +54,7 @@ export const PORTALS = {
 	},
 	toolbox: {
 		'portal-id': 'p-tb',
+		class: 'portal',
 		'html-tooltip': 'A message tooltip-p-tb must exist for this to appear',
 		'msg-label': 'Tools',
 		'msg-label-id': 'p-tb-label',
@@ -63,6 +66,7 @@ export const PORTALS = {
 	},
 	langlinks: {
 		'portal-id': 'p-lang',
+		class: 'portal',
 		'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
 		'msg-label': 'In other languages',
 		'msg-label-id': 'p-lang-label',
@@ -80,6 +84,7 @@ ${placeholder( `<p>Further hook output possible (lang)</p>`, 60 )}`
 	},
 	otherProjects: {
 		'portal-id': 'p-wikibase-otherprojects',
+		class: 'portal',
 		'html-tooltip': 'A message tooltip-p-wikibase-otherprojects must exist for this to appear',
 		'msg-label': 'In other projects',
 		'msg-label-id': 'p-wikibase-otherprojects-label',