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 454733 22b28921759054aa25d1bc4b78e3a2761af40d81
parent 454732 a3de18f0e694c78002f76cfdf228b673953aac06
child 454734 0d9a334f6ae8011d712a69c751aabd81e31764c7
push id35411
push usercsabou@mozilla.com
push dateTue, 22 Jan 2019 03:53:40 +0000
treeherdermozilla-central@ada22b635f8d [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);
 }