DevTools: Update styles for full text search drawer panel

third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css

Index: third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css b/third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
index 19a22a573ca08b1b6771bb96d620e54c785db089..2732031c0ede4586c0c1c17049d75f807c357de2 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
+++ b/third_party/WebKit/Source/devtools/front_end/sources/sourcesSearch.css
@@ -6,31 +6,64 @@
 
 .search-drawer-header {
     flex: none;
-    padding: 4px;
     display: flex;
+    border-bottom: 2px solid #e8e8e8;
 }
 
-.search-drawer-header input[type="text"].search-config-search {
-    -webkit-appearance: none;
-    padding: 0 3px;
-    margin: 0;
-    border: 1px solid rgb(163, 163, 163);
-    height: 20px;
+.search-drawer-header input.search-config-search {
+    padding: 0 28px;
+    margin: 1px 0px 0px 1px;
+    height: 28px;
     border-radius: 2px;
     color: #303030;
+    border: none;
 }
 
-.search-drawer-header input[type="search"].search-config-search:focus {
-    border: 1px solid rgb(190, 190, 190);
-    outline: none;
+.search-drawer-header .search-icon {
+    background-image: url(Images/search.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    left: 10px;
+    top: 10px;
+    width: 11px;
+    height: 11px;
+    position: absolute;
 }
 
-:host-context(.platform-mac) .search-drawer-header input[type="search"].search-config-search {
+.search-config-search::-webkit-search-cancel-button {

[lushnikov, 2016/04/22 19:19:08]

hmm, can't we simply use input type=search? Won't it show both the looking glass
and cancel icons?

[luoe, 2016/04/23 00:01:57]

It would give us system default icons, but we don't have total control in
styling the 'x' with CSS.  It allows us to add outlines to it, but we can't
change the background image.

+    -webkit-appearance: none;
+}
+
+.search-drawer-header .search-cancel-button {
+    position: relative;
+    left: -24px;
+    top: 8px;
+}
+
+.search-drawer-header .search-cancel-button::before {
+    content: '';
+    background-image: url(Images/toolbarButtonGlyphs.png);
+    background-size: 352px 168px;
+    left: 0;
+    top: 0;
+    width: 13px;
+    height: 13px;
+    background-position: -143px -96px;
+    position: absolute;
+}
+
+:host-context(.platform-mac) .search-drawer-header input.search-config-search {
     top: 1px;
 }
 
+.search-drawer-header label.search-config-label:first-of-type {
+    border-left: 1px solid #dadada;
+    margin: 0px 0px 0px 1px;
+    padding-left: 10px;
+}
+
 .search-drawer-header label.search-config-label {
-    margin: auto 0;
+    margin: 2px 0px;
     margin-left: 8px;
     color: #303030;
     display: flex;
@@ -82,6 +115,14 @@
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
+.search-drawer-header .search-icon {
+    background-image: url(Images/search_2x.png);
+}
+
+.search-drawer-header .search-cancel-button::before {
+    background-image: url(Images/toolbarButtonGlyphs_2x.png);
+}
+
 #search-results-pane-file-based li.parent::before {
     background-image: url(Images/toolbarButtonGlyphs_2x.png);
 }