Bring menu tab appearance closer to standard widgets

Bringing appearance and behaviour closer to standard widget like
DropdownWidget:
- Amending color to be (closest) aligned to WikimediaUI color
  palette, but switch normal and `:hover`/`:focus` state in order not
  to be too disruptive of a change and align with rest of Vector tabs,
- removing obsolete JS functionality as IE 6 as only major browser
  affected does receive the menu items as tabs nonetheless and replacing
  with simple CSS selector,
- removing unnecessary and obsolete images and
- Lessifying selector

Bug: T153043
Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de

components/tabs.less

@@ -153,9 +153,9 @@ div#mw-head div.vectorMenu h3 {
 	background-position: bottom right;
 	font-size: 1em;
 	height: 2.5em;
-	// This effectively moves the "background border" outside of the element to act like a real
-	// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
-	padding-right: 1px;
+	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real
+	// border. It is necessary for `div.vectorMenu div.menu` dropdown to align well.
+	padding-right: 0.5em; // equals `8px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
 	margin-right: -1px;
 
 	.vector-nav-directionality & {
@@ -163,21 +163,25 @@ div#mw-head div.vectorMenu h3 {
 	}
 }
 
-div.vectorMenu h3 span {
-	display: block;
-	font-size: 0.8em;
-	padding-left: 0.7em;
-	padding-top: 1.25em;
-	padding-right: 20px;
-	font-weight: normal;
-	color: @menu-main-heading-color;
-	.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
-	background-position: 100% 100%;
-	background-repeat: no-repeat;
-}
+div.vectorMenu h3 {
+	span {
+		display: block;
+		font-size: 0.8em;
+		padding-left: 0.7em;
+		padding-top: 1.25em;
+		padding-right: 16px;
+		font-weight: normal;
+		color: @content-font-color;
+		.background-image-svg('images/arrow-down.svg', 'images/arrow-down.png');
+		background-position: 100% 87%;
+		background-repeat: no-repeat;
+		opacity: 0.85; // equals `#434343` on `#fff` background, closest to `#444`
+	}
 
-div.vectorMenuFocus h3 span {
-	.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
+	&:hover span,
+	&:focus span {
+		opacity: 1;
+	}
 }
 
 div.vectorMenu div.menu {

images/arrow-down-focus-icon.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#929292"/></svg>

images/arrow-down-icon.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="22" height="16"><path d="M15.502 6.001l-5 5.001-5-5.001z" fill="#797979"/></svg>

images/arrow-down.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<path d="M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5" fill="#222"/>
+</svg>

vector.js

@@ -38,13 +38,6 @@ jQuery( function ( $ ) {
 					$el.toggleClass( 'menuForceShow' );
 					e.preventDefault();
 				}
-			} )
-			// When the heading has focus, also set a class that will change the arrow icon
-			.focus( function () {
-				$el.addClass( 'vectorMenuFocus' );
-			} )
-			.blur( function () {
-				$el.removeClass( 'vectorMenuFocus' );
 			} );
 	} );