Bug 1593825 - Implement badged favicons. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D53148

--HG--
extra : moz-landing-system : lando

browser/components/urlbar/UrlbarView.jsm

@@ -761,13 +761,20 @@ class UrlbarView {
   _createRowContent(item) {
     let typeIcon = this._createElement("span");
     typeIcon.className = "urlbarView-type-icon";
-    item._content.appendChild(typeIcon);
+
+    if (!this.input.megabar) {
+      item._content.appendChild(typeIcon);
+    }
 
     let favicon = this._createElement("img");
     favicon.className = "urlbarView-favicon";
     item._content.appendChild(favicon);
     item._elements.set("favicon", favicon);
 
+    if (this.input.megabar) {
+      item._content.appendChild(typeIcon);
+    }
+
     let title = this._createElement("span");
     title.className = "urlbarView-title";
     item._content.appendChild(title);

browser/themes/shared/icons/bookmark-12.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path d="M11.89 4.45a1.7 1.7 0 00-1.31-1.13L8.5 3l-1-2A1.75 1.75 0 006 0a1.71 1.71 0 00-1.52 1l-1 2-2.08.37a1.69 1.69 0 00-.92 2.77L2 7.77 1.68 10a1.69 1.69 0 00.7 1.63 1.71 1.71 0 001.76.11l1.86-1 1.87 1a1.79 1.79 0 00.78.19 1.72 1.72 0 001-.31 1.69 1.69 0 00.7-1.62L10 7.77l1.52-1.62a1.69 1.69 0 00.37-1.7z" fill="context-stroke"/>
+  <path d="M10.94 4.77a.7.7 0 00-.53-.47l-2.58-.46-1.21-2.43A.74.74 0 006 1a.69.69 0 00-.62.39L4.17 3.84 1.6 4.3a.71.71 0 00-.54.46.69.69 0 00.15.7l1.84 2-.38 2.74a.69.69 0 00.28.67.73.73 0 00.4.13.72.72 0 00.32-.08L6 9.69l2.33 1.21a.69.69 0 00.72-.05.68.68 0 00.28-.66L9 7.44l1.84-2a.69.69 0 00.1-.67z" fill="context-fill"/>
+</svg>

browser/themes/shared/icons/tab-12.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path d="M11 6.28V4.19A2.23 2.23 0 008.75 2H3.27A2.23 2.23 0 001 4.19v2.07A2 2 0 002 10h8a2 2 0 002-2 2 2 0 00-1-1.72z" fill="context-stroke"/>
+  <path d="M10 7V4.19A1.23 1.23 0 008.75 3H3.27A1.23 1.23 0 002 4.19V7a1 1 0 000 2h8a1 1 0 000-2z" fill="context-fill"/>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -161,6 +161,7 @@
   skin/classic/browser/back.svg                       (../shared/icons/back.svg)
   skin/classic/browser/back-12.svg                    (../shared/icons/back-12.svg)
   skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
+  skin/classic/browser/bookmark-12.svg                (../shared/icons/bookmark-12.svg)
   skin/classic/browser/bookmark-animation.svg         (../shared/icons/bookmark-animation.svg)
   skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
   skin/classic/browser/bookmark-star-on-tray.svg      (../shared/icons/bookmark-star-on-tray.svg)
@@ -227,6 +228,7 @@
   skin/classic/browser/stop-to-reload.svg             (../shared/icons/stop-to-reload.svg)
   skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
   skin/classic/browser/tab.svg                        (../shared/icons/tab.svg)
+  skin/classic/browser/tab-12.svg                     (../shared/icons/tab-12.svg)
   skin/classic/browser/tip.svg                        (../shared/icons/tip.svg)
   skin/classic/browser/toggle.svg                     (../shared/icons/toggle.svg)
   skin/classic/browser/undo.svg                       (../shared/icons/undo.svg)

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -9,8 +9,7 @@
 %define urlbarViewIconMarginEnd (@identityBoxPaddingInline@ + @identityBoxMarginInlineEnd@)
 %define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)
 %define urlbarViewMarginInline 7px
-%define urlbarViewPaddingInline 30px
-%define urlbarViewItemPaddingStart (@urlbarViewPaddingInline@ - (/* type icon: */ 16px + @urlbarViewIconMarginEnd@))
+%define urlbarViewItemInlinePadding 6px
 
 :root {
   --autocomplete-popup-background: var(--arrowpanel-background);
@@ -80,8 +79,7 @@
   display: flex;
   padding-top: 24px;
   padding-bottom: 24px;
-  padding-inline-start: calc(@urlbarViewItemPaddingStart@);
-  padding-inline-end: @urlbarViewPaddingInline@;
+  padding-inline: @urlbarViewItemInlinePadding@;
 }
 
 .urlbarView:not(.megabar) #urlbar-contextual-tip {
@@ -137,7 +135,7 @@
 .urlbarView:not(.megabar) .urlbarView-row,
 .urlbarView.megabar .urlbarView-row-inner {
   border-radius: 2px;
-  padding-inline-start: calc(@urlbarViewItemPaddingStart@);
+  padding-inline-start: @urlbarViewItemInlinePadding@;
 }
 
 .urlbarView:not(.megabar) .urlbarView-row:not([type=tip]),
@@ -161,7 +159,7 @@
 .urlbarView.megabar .urlbarView-row[type=tip] {
   padding-block: 18px;
   /* Compensating for the 4px focus ring on tip buttons. */
-  padding-inline-end: calc(@urlbarViewItemPaddingStart@ + 4px);
+  padding-inline-end: calc(@urlbarViewItemInlinePadding@ + 4px);
 }
 
 .urlbarView-row-inner {
@@ -201,19 +199,35 @@
 .urlbarView-favicon {
   min-width: 16px;
   height: 16px;
-  margin-inline-end: calc(@urlbarViewIconMarginEnd@);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill, fill-opacity;
 }
 
+.urlbarView:not(.megabar) .urlbarView-type-icon,
+.urlbarView-favicon {
+  margin-inline-end: calc(@urlbarViewIconMarginEnd@);
+}
+
+.urlbarView.megabar .urlbarView-type-icon {
+  position: absolute;
+  min-width: 12px;
+  height: 12px;
+  margin-bottom: -4px;
+  margin-inline-start: 8px;
+  -moz-context-properties: fill, stroke;
+}
+
 .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon {
   min-width: 24px;
   height: 24px;
-  margin-inline-start: calc(12px + @urlbarViewIconMarginEnd@);
   margin-inline-end: 12px;
 }
 
+.urlbarView:not(.megabar) .urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon {
+  margin-inline-start: calc(12px + @urlbarViewIconMarginEnd@);
+}
+
 /* The help icon is a standard Photon ghost button. */
 .urlbarView-tip-help {
   min-width: 16px;
@@ -256,6 +270,30 @@
   }
 }
 
+.urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
+  background-image: url(chrome://browser/skin/bookmark-12.svg);
+  color: #0060df; /* Blue-60 */
+  stroke: #fff;
+}
+
+.urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
+.urlbarView.megabar:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
+  background-image: url(chrome://browser/skin/tab-12.svg);
+  color: #008eaf; /* Teal-70 */
+  stroke: #fff;
+}
+
+:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
+  color: #0a84ff; /* Blue-50 */
+  stroke: #38383d; /* Grey-70 */
+}
+
+:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
+:root[lwt-toolbar-field-brighttext] .urlbarView.megabar:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
+  color: #00c8d7; /* Teal-60 */
+  stroke: #38383d; /* Grey-70 */
+}
+
 .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
   background-image: url(chrome://browser/skin/bookmark.svg);
 }