[chrome://omnibox]: Compact row heights.
Currently, table rows are 66px high, fitting 4 14px lines. Additionally,
the 'elide cells' checkbox, which is enabled by default, limits all
cells except 'additional info' to 1 or 2 lines depending on the number
of properties the cell contains. This leaves at least 38px of vertical
whitespace per row unused.
Certain providers and incomplete results usually require vertical
scrolling to view. Moreover, since adjusting the input clears and
regenerates the output, the scroll position is reset to the top.
With this CL, to avoid having to re-scroll or hack scroll position when
adjusting inputs, 'elide cells' shrinks each row to 38px high,
sufficient for the 2 14px lines displayed.
The display when 'elide cells' is disabled is unchanged; rows remain
66px high, and cell contents fill all 4 lines if necessary.
Change-Id: If3e0babf1ca1f1408df3286ebe3a6512d082c439
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1680983
Commit-Queue: manuk hovanesian <manukh@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#673766}
diff --git a/chrome/browser/resources/omnibox/omnibox.html b/chrome/browser/resources/omnibox/omnibox.html
index 679a77d..1ef66f7 100644
--- a/chrome/browser/resources/omnibox/omnibox.html
+++ b/chrome/browser/resources/omnibox/omnibox.html
@@ -149,13 +149,23 @@
</span>
</label>
</div>
- <div class="row">
- <label class="checkbox-container">
- <input id="elide-cells" type="checkbox" accesskey="s">
- <span>
- Elide Cell<span class="accesskey">s</span>
- </span>
- </label>
+ <div class="column-container">
+ <div class="column">
+ <label class="row checkbox-container">
+ <input id="elide-cells" type="checkbox" accesskey="s">
+ <span>
+ Elide cell<span class="accesskey">s</span>
+ </span>
+ </label>
+ </div>
+ <div class="column">
+ <label class="row checkbox-container">
+ <input id="thin-rows" type="checkbox" accesskey="h">
+ <span>
+ T<span class="accesskey">h</span>in rows
+ </span>
+ </label>
+ </div>
</div>
</div>
@@ -166,8 +176,8 @@
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="buttons-container">
- <div class="buttons-column">
+ <div class="column-container">
+ <div class="column">
<span id="export-clipboard" class="row button" accesskey="c"
tabindex="0"
title="Copy responses in JSON format. This is not affected by the visibility of output and will include responses in their entirety as well as query and display inputs.">
@@ -180,7 +190,7 @@
<span>Dow<span class="accesskey">n</span>load</span>
</span>
</div>
- <div class="buttons-column">
+ <div class="column">
<label id="import-clipboard"
class="row icon-button button drag-container" accesskey="v"
tabindex="0"
diff --git a/chrome/browser/resources/omnibox/omnibox_input.css b/chrome/browser/resources/omnibox/omnibox_input.css
index 249e1b9..d9473fa 100644
--- a/chrome/browser/resources/omnibox/omnibox_input.css
+++ b/chrome/browser/resources/omnibox/omnibox_input.css
@@ -51,11 +51,11 @@
margin-inline-start: var(--input-alignment-indentation);
}
-.buttons-container {
+.column-container {
display: flex;
}
-.buttons-column {
+.column {
display: flex;
flex-direction: column;
}
diff --git a/chrome/browser/resources/omnibox/omnibox_input.js b/chrome/browser/resources/omnibox/omnibox_input.js
index 5ce07fc9..9d07a1a8 100644
--- a/chrome/browser/resources/omnibox/omnibox_input.js
+++ b/chrome/browser/resources/omnibox/omnibox_input.js
@@ -23,6 +23,7 @@
* showDetails: boolean,
* showAllProviders: boolean,
* elideCells: boolean,
+ * thinRows: boolean,
* }}
*/
let DisplayInputs;
@@ -68,6 +69,7 @@
'#show-details',
'#show-all-providers',
'#elide-cells',
+ '#thin-rows',
].forEach(query => {
this.$$(query).addEventListener(
'input', this.onDisplayInputsChanged_.bind(this));
@@ -218,6 +220,7 @@
showDetails: this.$$('#show-details').checked,
showAllProviders: this.$$('#show-all-providers').checked,
elideCells: this.$$('#elide-cells').checked,
+ thinRows: this.$$('#thin-rows').checked,
};
}
@@ -228,6 +231,7 @@
this.$$('#show-details').checked = displayInputs.showDetails;
this.$$('#show-all-providers').checked = displayInputs.showAllProviders;
this.$$('#elide-cells').checked = displayInputs.elideCells;
+ this.$$('#thin-rows').checked = displayInputs.thinRows;
}
/** @private */
@@ -336,6 +340,7 @@
showDetails: false,
showAllProviders: true,
elideCells: true,
+ thinRows: false,
};
}
}
diff --git a/chrome/browser/resources/omnibox/omnibox_output.js b/chrome/browser/resources/omnibox/omnibox_output.js
index 48c19794..4fa0ac2 100644
--- a/chrome/browser/resources/omnibox/omnibox_output.js
+++ b/chrome/browser/resources/omnibox/omnibox_output.js
@@ -50,8 +50,7 @@
/** @param {!DisplayInputs} displayInputs */
updateDisplayInputs(displayInputs) {
this.displayInputs_ = displayInputs;
- this.updateVisibility_();
- this.updateEliding_();
+ this.updateDisplay_();
}
/** @param {string} filterText */
@@ -112,8 +111,7 @@
this.resultsGroups_.push(resultsGroup);
this.$$('#contents').appendChild(resultsGroup);
- this.updateVisibility_();
- this.updateEliding_();
+ this.updateDisplay_();
this.updateFilterHighlights_();
}
@@ -126,6 +124,13 @@
match => match.updateAnswerImage(url, data));
}
+ /** @private */
+ updateDisplay_() {
+ this.updateVisibility_();
+ this.updateEliding_();
+ this.updateRowHeights_();
+ }
+
/**
* Show or hide various output elements depending on display inputs.
* 1) Show non-last result groups only if showIncompleteResults is true.
@@ -158,6 +163,13 @@
}
/** @private */
+ updateRowHeights_() {
+ this.resultsGroups_.forEach(
+ resultsGroup =>
+ resultsGroup.updateRowHeights(this.displayInputs_.thinRows));
+ }
+
+ /** @private */
updateFilterHighlights_() {
this.autocompleteMatches.forEach(match => match.filter(this.filterText_));
}
@@ -310,6 +322,12 @@
match => match.updateEliding(elideCells));
}
+ /** @param {boolean} thinRows */
+ updateRowHeights(thinRows) {
+ this.autocompleteMatches.forEach(
+ match => match.classList.toggle('thin', thinRows));
+ }
+
/**
* @private
* @return {boolean}
diff --git a/chrome/browser/resources/omnibox/output_results_group.css b/chrome/browser/resources/omnibox/output_results_group.css
index cb30594..1e6455eb 100644
--- a/chrome/browser/resources/omnibox/output_results_group.css
+++ b/chrome/browser/resources/omnibox/output_results_group.css
@@ -19,7 +19,7 @@
table {
--header-bg-color: #fafafa;
- --row-hover-color: #fafafa;
+ --row-hover-color: #f5f5f5;
background-color: white;
border: 1px solid var(--border-color);
@@ -35,6 +35,7 @@
}
.body tr {
+ /* sufficient to display 4 lines at 14px with 5px vert padding */
height: 66px;
}
@@ -43,6 +44,15 @@
max-height: 56px;
}
+.body tr.thin {
+ /* sufficient to display 2 lines at 14px with 5px vert padding */
+ height: 38px;
+}
+
+.body tr.thin td > * {
+ max-height: 28px;
+}
+
.body td {
word-break: break-all;
}
@@ -73,7 +83,13 @@
white-space: pre-wrap;
}
-.body tr:hover td {
+.body tr.thin:nth-child(even) td {
+ background-color: #fafafa;
+}
+
+.body tr:hover td,
+/* must explicitly select .thin tr's to override above .thin styling */
+.body tr.thin:hover td {
background-color: var(--row-hover-color);
}
@@ -87,6 +103,10 @@
text-align: start;
}
+tbody.head th {
+ border-top: 1px solid var(--border-color);
+}
+
.header-container {
display: block;
overflow: hidden;
