DevTools: Update styles for full text search drawer panel

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

 /*
  * Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .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;
 }
 
 .search-toolbar-summary {
     background-color: #eee;
     border-top: 1px solid #ccc;
     padding-left: 5px;
     flex: 0 0 19px;
@@ skipping 31 matching lines @@
     width: 12px;
     content: "a";
     color: transparent;
     margin-left: -5px;
     padding-right: 4px;
     display: inline-block;
     box-sizing: border-box;
 }
 
 @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);
 }
 } /* media */
 
 #search-results-pane-file-based li.parent::before {
     background-position: -4px -96px;
 }
 
 #search-results-pane-file-based li.parent.expanded::before {
@@ skipping 87 matching lines @@
 
 .empty-view {
     font-size: 24px;
     color: rgb(75%, 75%, 75%);
     font-weight: bold;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }