From 795de73496553f1bf603941b9f23c36b6ed4e54c Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Fri, 30 Oct 2020 12:39:13 -0700
Subject: [PATCH] Amend standard 'search' icon size, position and CSS rules

Updating 'search' icon to latest WVUI/OOUI optimized, reduced path. Also
- amending size of search input and position of icon in input slightly to
  align it closer to standard text inputs
- simplify CSS by getting rid of selector which is targeting both, input and
  button and applying rules only where needed
- fixing code comments
- increasing icon size to `16px` equivalent `em` to enable user text zooming
  preference applied to search icon as well. `16px` is a compromise towards the
  old look and feel of the previous icon bringing it closer to standard icon size in
  legacy Vector.

This change affects both modern and legacy versions of Vector.

Bug: T266166
Change-Id: Ib4c0c74d3cac30e1893f4c76e56e1197652d41ba
---
 resources/skins.vector.styles/SearchBox.less  | 32 ++++++++-----------
 .../skins.vector.styles/images/search.svg     |  7 ++--
 variables.less                                |  3 +-
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/resources/skins.vector.styles/SearchBox.less b/resources/skins.vector.styles/SearchBox.less
index ed535d6..f613699 100644
--- a/resources/skins.vector.styles/SearchBox.less
+++ b/resources/skins.vector.styles/SearchBox.less
@@ -2,11 +2,9 @@
 @import 'mediawiki.ui/variables.less';
 @import '../../variables.less';
 
-/* Search */
-#p-search {
-	h3 {
-		.mixin-screen-reader-text();
-	}
+// Search portlet.
+#p-search h3 {
+	.mixin-screen-reader-text();
 }
 
 // Defined as `div`.
@@ -14,14 +12,6 @@
 #simpleSearch {
 	position: relative;
 	height: 100%;
-
-	// Styles for both the search input and the button.
-	input {
-		margin: 0;
-		// Match WVUI.
-		font-family: inherit;
-		height: 2.28571429em; // 32px
-	}
 }
 
 // The search input.
@@ -29,12 +19,16 @@
 	background-color: rgba( 255, 255, 255, 0.5 );
 	color: @color-base--emphasized;
 	width: 100%;
+	// Reduce height slightly from standard to match legacy Vector tabs.
+	height: unit( 28 / @font-size-browser / @font-size-search-input, em ); // Equals `2.15384615em`.
 	.box-sizing( border-box );
 	border: @border-base;
 	border-radius: @border-radius-base;
 	// `padding-right` equals to `#searchbutton` width below.
-	padding: 0.4em @width-search-button 0.4em 0.4em;
+	padding: 5px @width-search-button 5px 0.4em;
 	.box-shadow( @boxShadowWidget );
+	// Match WVUI.
+	font-family: inherit;
 	font-size: @font-size-search-input;
 	direction: ltr;
 	.transition( ~'border-color 250ms, box-shadow 250ms' );
@@ -69,8 +63,8 @@
 	}
 }
 
-// The buttons. They are displayed in the same position, and if both are
-// present the fulltext search one obscures the 'Go' one.
+// The search buttons. Fallback and search button are displayed in the same position,
+// and if both are present the fulltext search one obscures the 'Go' one.
 #searchButton,
 #mw-searchButton {
 	background-color: transparent;
@@ -79,12 +73,12 @@
 	bottom: @border-width-base;
 	// `@border-width-base * 2` is in regards to harmonize position start and end.
 	right: @border-width-base;
-	min-width: 24px;
+	min-width: @min-width-search-button;
 	width: @width-search-button;
 	border: 0;
 	padding: 0;
 	cursor: pointer;
-	// Equal `font-size` to search input for `padding` calculationo.
+	// Equal `font-size` to search input for `padding` calculation.
 	font-size: @font-size-search-input;
 	/* Opera 12 on RTL flips the text in a funny way without this. */
 	/* @noflip */
@@ -97,6 +91,6 @@
 }
 
 #searchButton {
-	background: no-repeat center/12px url( images/search.svg );
+	background: no-repeat center/unit( 16 / @font-size-browser / @font-size-search-input, em ) url( images/search.svg );
 	opacity: 0.67;
 }
diff --git a/resources/skins.vector.styles/images/search.svg b/resources/skins.vector.styles/images/search.svg
index 6116072..bd546ca 100644
--- a/resources/skins.vector.styles/images/search.svg
+++ b/resources/skins.vector.styles/images/search.svg
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<g fill="#000">
-		<path d="M7.5 13c3.04 0 5.5-2.46 5.5-5.5S10.54 2 7.5 2 2 4.46 2 7.5 4.46 13 7.5 13zm4.55.46A7.432 7.432 0 017.5 15C3.36 15 0 11.64 0 7.5S3.36 0 7.5 0C11.64 0 15 3.36 15 7.5c0 1.71-.57 3.29-1.54 4.55l6.49 6.49-1.41 1.41-6.49-6.49z"></path>
-	</g>
+	<title>
+		search
+	</title>
+	<path d="M7.5 13a5.5 5.5 0 100-11 5.5 5.5 0 000 11zm4.55.46A7.43 7.43 0 017.5 15a7.5 7.5 0 115.96-2.95l6.49 6.49-1.41 1.41-6.49-6.49z"/>
 </svg>
diff --git a/variables.less b/variables.less
index 45e5545..7477f01 100644
--- a/variables.less
+++ b/variables.less
@@ -109,7 +109,8 @@
 @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
 
 // Search
-@width-search-button: unit( 24 / @font-size-browser / @font-size-search-input, em );
+@min-width-search-button: 28px;
+@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
 @font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
 
 // Z-indices