Bug 1512663 - Show bookmark tags in UrlbarView rows. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 21 Jan 2019 21:57:22 +0000
changeset 454750 22b28921759054aa25d1bc4b78e3a2761af40d81
parent 454749 a3de18f0e694c78002f76cfdf228b673953aac06
child 454751 0d9a334f6ae8011d712a69c751aabd81e31764c7
push id76502
push userntim.bugs@gmail.com
push dateMon, 21 Jan 2019 21:58:47 +0000
treeherderautoland@22b289217590 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1512663
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1512663 - Show bookmark tags in UrlbarView rows. r=dao Differential Revision: https://phabricator.services.mozilla.com/D17078
browser/components/urlbar/UrlbarView.jsm
browser/themes/shared/urlbar-autocomplete.inc.css
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -279,16 +279,29 @@ class UrlbarView {
     content.appendChild(favicon);
 
     let title = this._createElement("span");
     title.className = "urlbarView-title";
     this._addTextContentWithHighlights(
       title, result.title, result.titleHighlights);
     content.appendChild(title);
 
+    if (result.payload.tags && result.payload.tags.length > 0) {
+      const tagsContainer = this._createElement("div");
+      tagsContainer.className = "urlbarView-tags";
+      tagsContainer.append(...result.payload.tags.map((tag, i) => {
+        const element = this._createElement("span");
+        element.className = "urlbarView-tag";
+        this._addTextContentWithHighlights(
+          element, tag, result.payloadHighlights.tags[i]);
+        return element;
+      }));
+      content.appendChild(tagsContainer);
+    }
+
     let secondary = this._createElement("span");
     secondary.className = "urlbarView-secondary";
     switch (result.type) {
       case UrlbarUtils.MATCH_TYPE.TAB_SWITCH:
         secondary.classList.add("urlbarView-action");
         secondary.textContent = bundle.GetStringFromName("switchToTab2");
         break;
       case UrlbarUtils.MATCH_TYPE.SEARCH:
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -94,41 +94,59 @@
 .urlbarView-row[type=tab] > .urlbarView-row-inner > .urlbarView-type-icon {
   background-image: url(chrome://browser/skin/tab.svg);
 }
 
 .urlbarView-title {
   font-size: 1.05em;
 }
 
-.urlbarView-title::after {
+.urlbarView-secondary::before {
   content: "\2014";
   color: var(--panel-disabled-color);
   margin: 0 .4em;
 }
 
 .urlbarView-secondary {
   color: var(--urlbar-popup-action-color);
   font-size: 0.9em;
 }
 
 .urlbarView-url {
   color: var(--urlbar-popup-url-color);
 }
 
 .urlbarView-title > strong,
-.urlbarView-url > strong {
+.urlbarView-url > strong,
+.urlbarView-tag > strong {
   font-weight: 600;
 }
 
 .urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-title::after,
 .urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-secondary {
   color: inherit;
 }
 
+.urlbarView-tags {
+  display: inline-block;
+}
+
+.urlbarView-tag {
+  background-color: var(--arrowpanel-dimmed);
+  border-radius: 2px;
+  border: 1px solid var(--panel-separator-color);
+  padding: 0 1px;
+  margin-inline-start: .4em;
+}
+
+.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-tags > .urlbarView-tag {
+  background-color: var(--autocomplete-popup-highlight-color);
+  color: var(--autocomplete-popup-highlight-background);
+}
+
 /* legacy URL bar styles below */
 
 #PopupAutoCompleteRichResult,
 #PopupSearchAutoComplete {
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
   border-color: var(--autocomplete-popup-border-color);
 }