Bug 1670916 - Add placeholder icon for sponsored top sites. r=mikedeboer

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

Author: daogottwald

browser/components/newtab/content-src/components/TopSites/TopSite.jsx

@@ -261,8 +261,15 @@ export class TopSiteLink extends React.PureComponent {
                 />
               )}
             </div>
-            <div className={`title ${link.isPinned ? "pinned" : ""}`}>
+            <div
+              className={`title${
+                link.isPinned || link.sponsored_position ? " has-icon" : ""
+              }${link.isPinned ? " pinned" : ""}`}
+            >
               {link.isPinned && <div className="icon icon-pin-small" />}
+              {link.sponsored_position && (
+                <div className="icon icon-sponsored-small" />
+              )}
               <span dir="auto">{title}</span>
             </div>
             {link.type === SPOC_TYPE ? (

browser/components/newtab/content-src/components/TopSites/_TopSites.scss

@@ -263,7 +263,7 @@ $hover-transition-duration: 150ms;
       white-space: nowrap;
     }
 
-    &.pinned {
+    &.has-icon {
       span {
         padding: 0 13px;
       }

browser/components/newtab/content-src/styles/_icons.scss

@@ -138,6 +138,13 @@
     width: $smaller-icon-size;
   }
 
+  &.icon-sponsored-small {
+    background-image: url('chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg');
+    background-size: $smaller-icon-size;
+    height: $smaller-icon-size;
+    width: $smaller-icon-size;
+  }
+
   &.icon-check {
     background-image: url('chrome://global/skin/icons/check.svg');
   }

browser/components/newtab/css/activity-stream-linux.css

@@ -220,6 +220,11 @@ body {
     width: 12px; }
     .icon.icon-pin-small:dir(rtl) {
       transform: scaleX(-1); }
+  .icon.icon-sponsored-small {
+    background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
+    background-size: 12px;
+    height: 12px;
+    width: 12px; }
   .icon.icon-check {
     background-image: url("chrome://global/skin/icons/check.svg"); }
   .icon.icon-download {
@@ -676,7 +681,7 @@ main {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-    .top-site-outer .title.pinned span {
+    .top-site-outer .title.has-icon span {
       padding: 0 13px; }
   .top-site-outer .edit-button {
     background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); }

browser/components/newtab/css/activity-stream-mac.css

@@ -223,6 +223,11 @@ body {
     width: 12px; }
     .icon.icon-pin-small:dir(rtl) {
       transform: scaleX(-1); }
+  .icon.icon-sponsored-small {
+    background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
+    background-size: 12px;
+    height: 12px;
+    width: 12px; }
   .icon.icon-check {
     background-image: url("chrome://global/skin/icons/check.svg"); }
   .icon.icon-download {
@@ -679,7 +684,7 @@ main {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-    .top-site-outer .title.pinned span {
+    .top-site-outer .title.has-icon span {
       padding: 0 13px; }
   .top-site-outer .edit-button {
     background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); }

browser/components/newtab/css/activity-stream-windows.css

@@ -220,6 +220,11 @@ body {
     width: 12px; }
     .icon.icon-pin-small:dir(rtl) {
       transform: scaleX(-1); }
+  .icon.icon-sponsored-small {
+    background-image: url("chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg");
+    background-size: 12px;
+    height: 12px;
+    width: 12px; }
   .icon.icon-check {
     background-image: url("chrome://global/skin/icons/check.svg"); }
   .icon.icon-download {
@@ -676,7 +681,7 @@ main {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-    .top-site-outer .title.pinned span {
+    .top-site-outer .title.has-icon span {
       padding: 0 13px; }
   .top-site-outer .edit-button {
     background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); }

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -9592,9 +9592,11 @@ class TopSiteLink extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureCompo
       "data-fallback": smallFaviconFallback && letterFallback,
       style: smallFaviconStyle
     })), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
-      className: `title ${link.isPinned ? "pinned" : ""}`
+      className: `title${link.isPinned || link.sponsored_position ? " has-icon" : ""}${link.isPinned ? " pinned" : ""}`
     }, link.isPinned && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
       className: "icon icon-pin-small"
+    }), link.sponsored_position && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
+      className: "icon icon-sponsored-small"
     }), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
       dir: "auto"
     }, title)), link.type === SPOC_TYPE ? react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {