[omnibox chrome:omnibox] Restyle inputs section.
Bug: 891303
Change-Id: I2e9dd3d635a2d5776fc5d1bca045b9b2fee539b3
Reviewed-on: https://chromium-review.googlesource.com/c/1382899
Reviewed-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}diff --git a/chrome/browser/resources/omnibox/omnibox.css b/chrome/browser/resources/omnibox/omnibox.css
index c84fbc9..b72f3f5 100644
--- a/chrome/browser/resources/omnibox/omnibox.css
+++ b/chrome/browser/resources/omnibox/omnibox.css
@@ -27,38 +27,35 @@
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 @@
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 @@
}
.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 @@
.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;
+}
diff --git a/chrome/browser/resources/omnibox/omnibox.html b/chrome/browser/resources/omnibox/omnibox.html
index 495e5425..67695ece 100644
--- a/chrome/browser/resources/omnibox/omnibox.html
+++ b/chrome/browser/resources/omnibox/omnibox.html
@@ -14,90 +14,121 @@
<script src="omnibox_output.js"></script>
<script src="omnibox.js"></script>
</head>
+
<body>
<template id="omnibox-inputs-template">
<link rel="stylesheet" href="omnibox.css">
- <p>
- <input id="input-text" type="text" size="60" placeholder="Enter omnibox input text [Alt+L]" accesskey="l" autocomplete="off" autofocus>
- </p>
- <p>Input parameters:</p>
- <p>
- <label>
- <input id="reset-autocomplete-controller" type="checkbox" accesskey="r">
- <span class="accesskey">R</span>eset autocomplete controller
- </label>
- </p>
- <p>
- <label>
- <input id="lock-cursor-position" type="checkbox" accesskey="c">
- Lock <span class="accesskey">c</span>ursor position to end of input
- </label>
- </p>
- <p>
- <label title="This sets the input's from_omnibox_focus field. When checked, certain providers will not provide matches, e.g. bookmarks, built in, history, history url, keyword, search, and shortcut providers. Certain provider will only provide matches when zero suggest is checked, e.g., clipboard and zero suggest providers.">
- <input id="zero-suggest" type="checkbox" accesskey="z">
- <span class="accesskey">Z</span>ero suggest
- </label>
- </p>
- <p>
- <label>
- <input id="prevent-inline-autocomplete" type="checkbox" accesskey="a">
- Prevent inline <span class="accesskey">a</span>utocomplete
- </label>
- </p>
- <p>
- <label>
- <input id="prefer-keyword" type="checkbox" accesskey="k">
- In <span class="accesskey">k</span>eyword mode
- </label>
- </p>
- <p>
- <label>
- <input id="current-url" type="text" size="60"
- placeholder="Enter current url (e.g. 'https://www.google.com') [Alt+U]"
- accesskey="u" title="Mostly useful when zero-suggest is enabled, but may also affect clipboard and search providers.">
- </label>
- </p>
- <p>
- Current page c<span class="accesskey">o</span>ntext:
- <select id="page-classification" accesskey="o">
- <option value="0">Invalid spec</option>
- <option value="2">about:blank</option>
- <option value="3">user's home page</option>
- <option value="4" selected>arbitrary URL</option>
- <option value="9">search result page not doing search term replacement</option>
- <option value="7">new tab page omnibox</option>
- <option value="8">new tab page fakebox</option>
- <option value="1">(OBSOLETE) new tab page</option>
- <option value="6">(OBSOLETE) search result page doing search term replacement</option>
- </select>
- </p>
- <p>Display parameters:</p>
- <p>
- <label>
- <input id="show-incomplete-results" type="checkbox" accesskey="i">
- Show <span class="accesskey">i</span>ncomplete results
- </label>
- </p>
- <p>
- <label>
- <input id="show-details" type="checkbox" accesskey="t">
- Show all de<span class="accesskey">t</span>ails
- </label>
- </p>
- <p>
- <label>
- <input id="show-all-providers" type="checkbox" accesskey="p">
- Show results per <span class="accesskey">p</span>rovider, not just merged results
- </label>
- </p>
- <div class="section">
- <button id="copy-text" title="Copy visible table in text format. This is affected by the visibility of ouput; i.e. toggling 'Show all details' affects what will be copied.">Copy as text</button>
- <button id="copy-json" title="Copy responses in JSON format. This is not affected by the visibility of output and will copy responses in their entirety.">Copy as JSON</button>
- </div>
- <div class="section">
- <input id="filter-text" type="text" size="60" placeholder="Enter filter text (e.g. 'google', 'is:star', 'not:del') [Alt+G]" accesskey="g" autocomplete="off" title="Checks each cell individually; i.e. filter text should not span multiple columns. Supports fuzzyness; each character of filter text must be present in the cell, either adjacent to the previous matched character, or at the start of a new word. Words are defined as being delimited by either capital letters, groups of digits, or non alpha characters. E.g. 'abc' matches 'abc', 'a big cat', 'a-bigCat', 'a very big cat', and 'an amBer cat'; but does not match 'abigcat' or 'an amber cat'. 'green rainbow' is matched by 'gre rain', but not by 'gre bow'. One exception is the first character, which may be matched mid-word. E.g. 'een rain' can also match 'green rainbow'. Boolean properties can be searched for via the property name prefixed by 'is:' or 'not:'. Boolean property names are: 'Can Be Default', 'Starred', 'Has Tab Match', 'Del', 'Prev', and 'Done'.">
+ <div class="top text">
+ <div class="top-column">
+ <input id="input-text" type="text" class="row unindented input-icon-container search-icon" accesskey="l" autofocus autocomplete="off" placeholder="Enter omnibox input [Alt+L]">
+ </div>
+
+ <div class="top-column">
+ <p class="row section-header">Input parameters</p>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="reset-autocomplete-controller" type="checkbox" accesskey="r">
+ <span>
+ <span class="accesskey">R</span>eset autocomplete controller
+ </span>
+ </label>
+ </div>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="lock-cursor-position" type="checkbox" accesskey="c">
+ <span>
+ Lock <span class="accesskey">c</span>ursor position to end of input
+ </span>
+ </label>
+ </div>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="zero-suggest" type="checkbox" accesskey="z">
+ <span>
+ <span class="accesskey">Z</span>ero suggest
+ </span>
+ </label>
+ </div>
+ <div class="row indented">
+ <label class="checkbox-container">
+ <input id="prevent-inline-autocomplete" type="checkbox" accesskey="a">
+ <span>
+ Prevent inline <span class="accesskey">a</span>utocomplete
+ </span>
+ </label>
+ </div>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="prefer-keyword" type="checkbox" accesskey="k">
+ <span>
+ In <span class="accesskey">k</span>eyword mode
+ </span>
+ </label>
+ </div>
+ </div>
+
+ <div class="top-column">
+ <p class="row section-header">Current page c<span class="accesskey">o</span>ntext:</p>
+ <input id="current-url" type="text" class="row unindented" accesskey="u" placeholder="Enter current url (e.g. 'https://www.google.com') [Alt+U]" title="Mostly useful when zero-suggest is enabled, but may also affect clipboard and search providers.">
+ <select id="page-classification" class="row unindented" accesskey="o">
+ <option value="0">Invalid spec</option>
+ <option value="2">about:blank</option>
+ <option value="3">user's home page</option>
+ <option value="4" selected>arbitrary URL</option>
+ <option value="9">search result page not doing search term replacement</option>
+ <option value="7">new tab page omnibox</option>
+ <option value="8">new tab page fakebox</option>
+ <option value="1">(OBSOLETE) new tab page</option>
+ <option value="6">(OBSOLETE) search result page doing search term replacement</option>
+ </select>
+ </div>
+
+ <div class="top-column">
+ <p class="row section-header">Display paramters</p>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="show-incomplete-results" type="checkbox" accesskey="i">
+ <span>
+ Show <span class="accesskey">i</span>ncomplete results
+ </span>
+ </label>
+ </div>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="show-details" type="checkbox" accesskey="t">
+ <span>
+ Show all de<span class="accesskey">t</span>ails
+ </span>
+ </label>
+ </div>
+ <div class="row">
+ <label class="checkbox-container">
+ <input id="show-all-providers" type="checkbox" accesskey="p">
+ <span>
+ Show results per <span class="accesskey">p</span>rovider
+ </span>
+ </label>
+ </div>
+ </div>
+
+ <div class="top-column">
+ <p class="row section-header">Output controls</p>
+ <input id="filter-text" type="text" class="row unindented input-icon-container filter-icon" accesskey="g" autocomplete="off" placeholder="Enter filter (e.g. 'google', 'is:star', 'not:del') [Alt+G]" title="Checks each cell individually; i.e. filter text should not span multiple columns. Supports fuzzyness; each character of filter text must be present in the cell, either adjacent to the previous matched character, or at the start of a new word. Words are defined as being delimited by either capital letters, groups of digits, or non alpha characters. E.g. 'abc' matches 'abc', 'a big cat', 'a-bigCat', 'a very big cat', and 'an amBer cat'; but does not match 'abigcat' or 'an amber cat'. 'green rainbow' is matched by 'gre rain', but not by 'gre bow'. One exception is the first character, which may be matched mid-word. E.g. 'een rain' can also match 'green rainbow'. Boolean properties can be searched for via the property name prefixed by 'is:' or 'not:'. Boolean property names are: 'Can Be Default', 'Starred', 'Has Tab Match', 'Del', 'Prev', and 'Done'.">
+ <div class="row unindented">
+ <span id="copy-text" class="icon-button button" title="Copy visible table in text format. This is affected by the visibility of ouput; i.e. toggling 'Show all details' affects what will be copied.">
+ <i class="icon copy-white-icon"></i>
+ <span>Copy as text</span>
+ </span>
+ </div>
+ <div class="row unindented">
+ <span id="copy-json" class="icon-button button" title="Copy responses in JSON format. This is not affected by the visibility of output and will copy responses in their entirety.">
+ <i class="icon copy-black-icon"></i>
+ <span>Copy as JSON</span>
+ </span>
+ </div>
+ <!--TODO(manukh): import button-->
+ </div>
</div>
</template>
@@ -119,11 +150,7 @@
<p>host = <span class="host"></span>, has isTypedHost = <span class="is-typed-host"></span></p>
</template>
- <div class="section">
- <omnibox-inputs id="omnibox-inputs"></omnibox-inputs>
- </div>
- <div class="section">
- <omnibox-output id="omnibox-output"></omnibox-output>
- </div>
+ <omnibox-inputs id="omnibox-inputs"></omnibox-inputs>
+ <omnibox-output id="omnibox-output"></omnibox-output>
</body>
</html>
