[omnibox chrome:omnibox] Restyle inputs section.

Bug: 891303
Change-Id: I2e9dd3d635a2d5776fc5d1bca045b9b2fee539b3
Reviewed-on: https://chromium-review.googlesource.com/c/1382899Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Orin Jaworski <orinj@chromium.org>
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618674}

chrome/browser/resources/omnibox/omnibox.css

@@ -27,38 +27,35 @@ output-results-group:not([hidden]) {
   background-image: url(../../../../ui/webui/resources/images/cancel_red.svg);
 }
 
-p,
-pre {
-  margin: 0;
-}
-
-.section {
-  margin-bottom: 10px;
-  margin-top: 10px;
-}
-
 body {
   background-color: #fcfcfc;
+  overflow-y: scroll;
+}
+
+* {
+  transition-duration: 300ms;
 }
 
 table {
+  --border-color: #ccc;
+  --header-bg-color: #f8f8f8;
+  --header-color: #555;
+  --row-hover-color: #f6f6f6;
+
   background-color: white;
-  border: 2px solid #ccc;
+  border: 2px solid var(--border-color);
   border-spacing: 0;
   font-size: 12px;
   min-width: 900px;
   table-layout: fixed;
-  text-align: left;
   width: 100%;
 }
 
 thead tr {
-  background-color: #f8f8f8;
-  color: #555;
+  background-color: var(--header-bg-color);
+  color: var(--header-color);
   font-size: 15px;
-  font-weight: bold;
-  letter-spacing: 0;
-  vertical-align: bottom;
+  text-align: left;
 }
 
 tbody tr {
@@ -84,12 +81,13 @@ tbody td:hover * {
   overflow-y: auto;
 }
 
-tbody pre.json * {
-  white-space: pre-line;
+tbody tr td pre.json,
+tbody tr td pre.json * {
+  white-space: pre-wrap;
 }
 
-tbody tr:hover * {
-  background-color: #f8f8f8;
+tbody tr:hover td {
+  background-color: var(--row-hover-color);
 }
 
 th,
@@ -115,32 +113,11 @@ th {
 }
 
 .filtered-highlighted {
-  background-color: lightskyblue;
-  /* TODO(manukh) This is a placholder color until other ui changes occur. */
+  background-color: rgb(208, 240, 255);
 }
 
 .filtered-highlighted-nested {
-  background-color: #d0ffd0;
-}
-
-.toggle input,
-.toggle input:not(:checked) ~ .toggle-on,
-.toggle input:checked ~ .toggle-off {
-  display: none;
-}
-
-.toggle span {
-  user-select: none;
-  display: inline-block;
-  padding: 3px 5px;
-  min-width: 60px;
-  text-align: center;
-  cursor: pointer;
-  border: 1px solid;
-}
-
-.toggle span:hover {
-  background-color: #f0f0f0;
+  background-color: rgb(208, 255, 208);
 }
 
 pre.json .key {
@@ -229,3 +206,168 @@ tbody:not(:first-of-type) td.cell-provider-and-type .pair-item:first-child {
 .header-fill-and-inline .header-container :nth-child(2) {
   border: 1px solid;
 }
+
+omnibox-inputs {
+  --action-color: rgb(66, 133, 244);
+  --hover-color: #f2f2f2;
+  --input-alignment-indentation: 9px;
+  --text-active-color: #fff;
+  --text-hover-color: #eee;
+  --text-inactive-color: #f5f5f5;
+}
+
+/* :hover, :focus, & :active */
+
+input[type=text]:hover,
+select:hover {
+  background-color: var(--text-hover-color);
+}
+
+.checkbox-container:hover input ~ .checkbox-mark,
+.button:hover {
+  background-color: var(--hover-color);
+}
+
+input[type=text]:focus,
+select:focus,
+.button:active {
+  background-color: var(--text-active-color);
+  border-color: var(--action-color);
+  outline: none;
+}
+
+.button:active {
+  transition-duration: 0ms;
+}
+
+/* text input */
+
+input[type=text],
+select {
+  background-color: var(--text-inactive-color);
+  border: 2px solid var(--text-inactive-color);
+  border-radius: 5px;
+}
+
+input[type=text] {
+  box-sizing: border-box;
+  padding: 3px 7px;
+  width: 100%;
+}
+
+input[type=text].input-icon-container {
+  background-position-x: 5px;
+  background-position-y: center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  padding-left: 30px;
+}
+
+/* select */
+
+select {
+  cursor: pointer;
+  max-width: 250px;
+  /* padded so that its text aligns with other elements and its height is the
+  same as input elements' height */
+  padding: 2px 0 2px 3px;
+  width: 100%;
+}
+
+/* stylized checkbox */
+
+.checkbox-container {
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  user-select: none;
+}
+
+input[type=checkbox] {
+  margin-left: 0;
+}
+
+/* icon buttons */
+
+.icon-button * {
+  vertical-align: middle;
+}
+
+/* button */
+
+.button {
+  border-radius: 5px;
+  color: var(--action-color);
+  cursor: pointer;
+  display: inline-block;
+  padding: 3px var(--input-alignment-indentation);
+  user-select: none;
+}
+
+/* icons */
+
+.icon {
+  background-position: -2px center;
+  background-size: 20px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+
+.search-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_search.svg);
+}
+
+.filter-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_search.svg);
+}
+
+.reset-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_refresh.svg);
+}
+
+.copy-white-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_tabs.svg);
+}
+
+.copy-black-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_tabs.svg);
+}
+
+.copy-red-icon {
+  background-image: url(../../../../ui/webui/resources/images/icon_tabs.svg);
+}
+
+/* layout */
+
+.top {
+  display: flex;
+  padding: 5px 0;
+}
+
+.top-column {
+  display: flex;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0 15px;
+}
+
+.text,
+.text-input {
+  font-size: 14px;
+}
+
+.row {
+  margin-bottom: 3px;
+  margin-top: 3px;
+}
+
+.unindented {
+  margin-left: calc(-1 * var(--input-alignment-indentation));
+}
+
+.section-header {
+  color: gray;
+  font-size: 12px;
+}