DevTools: update text inputs to new style

third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css

Index: third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css b/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
index 14d1ea02c8f9fb235a58ca2666b0a2a8c84e3317..5b66ac5d89dd9a965c6d3a95a354276a93266ab4 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css
@@ -170,9 +170,18 @@ input {
     -webkit-filter: invert(80%);
 }
 
-input[type="search"]:focus,
-input[type="text"]:focus {
-    outline: auto rgb(56, 121, 217);
+input[type="number"],
+input[type="search"],
+input[type="text"] {
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 2px;
+}
+
+input[type="number"]:not(.error-input):focus,
+input[type="search"]:not(.error-input):focus,
+input[type="text"]:not(.error-input):focus {
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.4);

[einbinder, 2017/05/18 22:11:37]

This looks different from the 1px blue focus border I see in other harmony UI

[luoe, 2017/05/23 23:40:21]

This does differ from the latest UI in other Chromium surfaces, e.g. Bookmark
dialog, Settings, History.  However, I've confirmed with designers that this is
the intended effect, and those other surfaces have tracking bugs to be updated
as well.

 }
 
 .highlighted-search-result.current-search-result {
@@ -208,60 +217,55 @@ input[type="text"]:focus {
 }
 
 .error-input {
-    outline: auto 2px red !important;
-    outline-offset: -2px !important;
+    outline: auto 1px #C53929 !important;
+    outline-offset: -1px !important;
+    box-shadow: none;
+}
+
+.error-input:focus {
+    outline: none !important;
+    box-shadow: 0 0 0 2px rgba(197, 57, 41, 0.4);
 }
 
 .chrome-select {
     -webkit-appearance: none;
     -webkit-user-select: none;
-    border: 1px solid rgb(160, 160, 160);
+    border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 2px;
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
-    inset 0 1px 2px rgba(255, 255, 255, 0.75);
-    color: #444;
+    color: #333;
     font: inherit;
-    margin: 0 1px 0 0;
+    margin: 0;
     outline: none;
     text-shadow: 0 1px 0 rgb(240, 240, 240);
     padding-right: 20px;
     padding-left: 6px;
-    background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#ededed, #ededed 38%, #dedede);
+    background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x);
+    background-color: #fff;
     background-position: right center;
     background-repeat: no-repeat;
     min-height: 24px;
+    min-width: 80px;
+    background-size: 15px;
 }
 
+
+.chrome-select:enabled:active,
+.chrome-select:enabled:focus,
 .chrome-select:enabled:hover {
-    background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
-    border-color: rgba(0, 0, 0, 0.3);
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
-    inset 0 1px 2px rgba(255, 255, 255, 0.95);
-    color: black;
+    background-color: #fafafa;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .chrome-select:enabled:active {
-    background-image: -webkit-image-set(url(Images/chromeSelect.png) 1x, url(Images/chromeSelect_2x.png) 2x), linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
-    box-shadow: none;
-    text-shadow: none;
+    background-color: #f2f2f2;
 }
 
 .chrome-select:enabled:focus {
-    /* OVERRIDE */
-    -webkit-transition: border-color 200ms;
-    /* We use border color because it follows the border radius (unlike outline).
-     * This is particularly noticeable on mac. */
-    border-color: rgb(77, 144, 254);
-    outline: none;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(66, 133, 244, 0.4);
 }
 
-body.inactive select.chrome-select,
 .chrome-select:disabled {
-    background-image: -webkit-image-set(url(Images/chromeDisabledSelect.png) 1x, url(Images/chromeDisabledSelect_2x.png) 2x), linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
-    border-color: rgba(80, 80, 80, 0.2);
-    box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
-    inset 0 1px 2px rgba(255, 255, 255, 0.75);
-    color: #aaa;
+    opacity: 0.38;
 }
 
 .chrome-select optgroup,