Bug 1879609 - Add pinned indicator for urls pinned in New Tab r=fxview-reviewers,desktop-theme-reviewers,emilio

- added pin icons to the tab row for tabs pinned in New Tab

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

browser/components/firefoxview/firefoxview.css

@@ -16,6 +16,7 @@
   --fxview-text-color-hover: var(--newtab-text-primary-color);
   --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
   --fxview-border: var(--fc-border-light, #CFCFD8);
+  --fxview-indicator-stroke-color-hover: #DEDDDE;
 
   /* ensure utility button hover states match those of the rest of the page */
   --in-content-button-background-hover: var(--fxview-element-background-hover);
@@ -37,6 +38,7 @@
     --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
     --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
     --fxview-border: #8F8F9D;
+    --fxview-indicator-stroke-color-hover:#5D5C66;
 
     /* copy over newtab colors from activity-stream-[os].css files */
     --newtab-background-color: #2B2A33;

browser/components/firefoxview/fxview-tab-list.mjs

@@ -727,6 +727,7 @@ export class FxviewTabRow extends MozLitElement {
       class="${classMap({
         "fxview-tab-row-favicon-wrapper": true,
         pinned: this.indicators?.includes("pinned"),
+        pinnedOnNewTab: this.indicators?.includes("pinnedOnNewTab"),
         attention: this.indicators?.includes("attention"),
       })}"
     >
@@ -796,6 +797,7 @@ export class FxviewTabRow extends MozLitElement {
     const timeString = this.timeFluentId(this.dateTimeFormat);
     const time = this.time;
     const timeArgs = JSON.stringify({ time });
+
     return html`<a
         href=${ifDefined(this.url)}
         class="fxview-tab-row-main"

browser/components/firefoxview/fxview-tab-row.css

@@ -50,6 +50,10 @@
 .fxview-tab-row-button.ghost-button.icon-button:enabled:hover {
   background-color: var(--fxviewtabrow-element-background-hover);
   color: var(--fxviewtabrow-text-color-hover);
+
+  & .fxview-tab-row-favicon-wrapper .fxview-tab-row-favicon::after {
+    stroke: var(--fxview-indicator-stroke-color-hover);
+  }
 }
 
 .fxview-tab-row-main:hover:active,
@@ -93,14 +97,22 @@
     stroke: var(--fxview-background-color-secondary);
   }
 
+  &:is(.pinnedOnNewTab, .bookmark) .fxview-tab-row-favicon::after {
+    inset-block-start: 9px;
+    inset-inline-end: -6px;
+  }
+
   &.bookmark .fxview-tab-row-favicon::after,
   &.bookmark .fxview-tab-row-button::after {
     background-image: url("chrome://browser/skin/bookmark-12.svg");
-    inset-block-start: 9px;
-    inset-inline-end: -6px;
     fill: var(--fxview-primary-action-background);
   }
 
+  &.pinnedOnNewTab .fxview-tab-row-favicon::after,
+  &.pinnedOnNewTab .fxview-tab-row-button::after {
+    background-image: url("chrome://browser/skin/pin-12.svg");
+  }
+
   &.attention .fxview-tab-row-favicon::after,
   &.attention .fxview-tab-row-button::after {
     background-image: radial-gradient(circle, light-dark(rgb(42, 195, 162), rgb(84, 255, 189)), light-dark(rgb(42, 195, 162), rgb(84, 255, 189)) 2px, transparent 2px);
@@ -109,14 +121,6 @@
     inset-block-start: 20px;
   }
 
-  &.pinnedNewTab .fxview-tab-row-favicon::after,
-  &.pinnedNewTab .fxview-tab-row-button::after {
-    background-image: url("chrome://browser/skin/pin-12.svg");
-    inset-block-start: 9px;
-    inset-inline-end: -10px;
-    fill: var(--fxview-primary-action-background);
-  }
-
   &.pinned .fxview-tab-row-pinned-media-button {
     inset-block-start: -10px;
     inset-inline-end: -10px;

browser/components/firefoxview/opentabs.mjs

@@ -23,6 +23,7 @@ const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
   ContextualIdentityService:
     "resource://gre/modules/ContextualIdentityService.sys.mjs",
+  NewTabUtils: "resource://gre/modules/NewTabUtils.sys.mjs",
   NonPrivateTabs: "resource:///modules/OpenTabs.sys.mjs",
   getTabsTargetForWindow: "resource:///modules/OpenTabs.sys.mjs",
   PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
@@ -861,11 +862,13 @@ function getContainerObj(tab) {
  *  Array of named tab indicators
  */
 function getIndicatorsForTab(tab) {
+  const url = tab.linkedBrowser?.currentURI?.spec || "";
   let tabIndicators = [];
   let hasAttention =
     (tab.pinned &&
       (tab.hasAttribute("attention") || tab.hasAttribute("titlechanged"))) ||
     (!tab.pinned && tab.hasAttribute("attention"));
+
   if (tab.pinned) {
     tabIndicators.push("pinned");
   }
@@ -881,9 +884,12 @@ function getIndicatorsForTab(tab) {
   if (tab.hasAttribute("muted")) {
     tabIndicators.push("muted");
   }
+  if (checkIfPinnedNewTab(url)) {
+    tabIndicators.push("pinnedOnNewTab");
+  }
+
   return tabIndicators;
 }
-
 /**
  * Gets the primary l10n id for a tab when normalizing for fxview-tab-list
  *
@@ -924,6 +930,18 @@ function getPrimaryL10nArgs(tab, isRecentBrowsing, url) {
   return indicatorArgs;
 }
 
+/**
+ * Check if a given url is pinned on the new tab page
+ *
+ * @param {string} url
+ *   url to check
+ * @returns {boolean}
+ *   is tabbed pinned on new tab page
+ */
+function checkIfPinnedNewTab(url) {
+  return url && lazy.NewTabUtils.pinnedLinks.isPinned({ url });
+}
+
 /**
  * Convert a list of tabs into the format expected by the fxview-tab-list
  * component.
@@ -941,7 +959,7 @@ function getTabListItems(tabs, isRecentBrowsing) {
   return filtered.map(tab => {
     let tabIndicators = getIndicatorsForTab(tab);
     let containerObj = getContainerObj(tab);
-    const url = tab.linkedBrowser?.currentURI?.spec || "";
+    const url = tab?.linkedBrowser?.currentURI?.spec || "";
     return {
       containerObj,
       indicators: tabIndicators,

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

@@ -1,6 +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" width="12" height="12" fill-opacity="context-fill-opacity">
-  <path fill="context-fill" d="m9.05 4.055-1.45 0-.444-.165c0 0-.966-.964-1.544-1.541l.494-.494a.5.5 0 1 0-.708-.708l-.709.708-3.542 3.543a.5.5 0 1 0 .708.708l.494-.494c.581.582 1.555 1.558 1.555 1.558l.15.427.001 1.452a.922.922 0 0 0 .926.926.92.92 0 0 0 .653-.272l1.68-1.68 2.83 2.83a.5.5 0 1 0 .708-.708l-2.83-2.83 1.68-1.68a.923.923 0 0 0 .201-1.008.918.918 0 0 0-.853-.572z"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.39904 1.15594C5.49334 1.06486 5.61964 1.01447 5.75074 1.01561C5.88183 1.01675 6.00724 1.06933 6.09994 1.16203C6.19265 1.25474 6.24523 1.38014 6.24637 1.51124C6.24751 1.64234 6.19711 1.76864 6.10604 1.86294L5.61304 2.35694C6.19004 2.93194 7.15404 3.89494 7.15404 3.89494L7.59804 4.05994H9.04403C9.22675 4.05951 9.40545 4.11349 9.55736 4.21501C9.70928 4.31652 9.82753 4.46097 9.89704 4.62994C9.9672 4.79856 9.98565 4.98423 9.95004 5.16336C9.91442 5.34249 9.82636 5.50699 9.69703 5.63594L8.02004 7.31294L10.844 10.1369C10.9351 10.2312 10.9855 10.3575 10.9844 10.4886C10.9832 10.6197 10.9306 10.7451 10.8379 10.8379C10.7452 10.9306 10.6198 10.9831 10.4887 10.9843C10.3576 10.9854 10.2313 10.935 10.137 10.8439L7.31304 8.01994L5.63604 9.69694C5.63504 9.69794 5.63504 9.69794 5.63404 9.69894C5.50542 9.82816 5.34122 9.91611 5.16238 9.95155C4.98355 9.987 4.79821 9.96834 4.63004 9.89794C4.46106 9.82843 4.31661 9.71019 4.2151 9.55827C4.11358 9.40636 4.0596 9.22765 4.06004 9.04494L4.05804 7.59394L3.90804 7.16794C3.90804 7.16794 2.93604 6.19294 2.35604 5.61294L1.86304 6.10594C1.76873 6.19702 1.64243 6.24742 1.51133 6.24628C1.38024 6.24514 1.25483 6.19256 1.16213 6.09985C1.06942 6.00715 1.01684 5.88174 1.0157 5.75064C1.01456 5.61955 1.06496 5.49324 1.15604 5.39894L4.69204 1.86294L5.39904 1.15594V1.15594ZM4.69004 0.438944L3.98104 1.14794L0.439035 4.68994C0.157585 4.97192 -0.000488281 5.35404 -0.000488281 5.75244C-0.000488281 6.15085 0.157585 6.53297 0.439035 6.81494C0.683733 7.059 1.00497 7.2114 1.34878 7.24655C1.69259 7.28169 2.03802 7.19744 2.32704 7.00794L3.03504 7.71694L3.05304 7.76894L3.05404 9.04994C3.05404 9.83194 3.52104 10.5299 4.24304 10.8289C4.59456 10.9755 4.98174 11.0142 5.35533 10.9401C5.72891 10.8661 6.07203 10.6825 6.34104 10.4129L7.31404 9.43994L9.43504 11.5609C9.71701 11.8424 10.0991 12.0005 10.4975 12.0005C10.8959 12.0005 11.2781 11.8424 11.56 11.5609C11.8415 11.279 11.9996 10.8968 11.9996 10.4984C11.9996 10.1 11.8415 9.71792 11.56 9.43594L9.44003 7.31394L10.412 6.34194C10.6821 6.07284 10.8661 5.72949 10.9406 5.35554C11.015 4.9816 10.9765 4.59396 10.83 4.24194C10.6848 3.88952 10.438 3.58827 10.121 3.37654C9.80402 3.16481 9.43122 3.05216 9.05004 3.05294H7.78104L7.70904 3.02694L7.00804 2.32694C7.19753 2.03793 7.28178 1.6925 7.24664 1.34869C7.21149 1.00488 7.05909 0.683642 6.81504 0.438944C6.5328 0.157981 6.15078 0.000244141 5.75254 0.000244141C5.3543 0.000244141 4.97227 0.157981 4.69004 0.438944V0.438944Z" fill="context-stroke transparent"/>
+  <path d="M9.05012 4.055H7.60012L7.15612 3.89C7.15612 3.89 6.19012 2.926 5.61212 2.349L6.10612 1.855C6.15261 1.80851 6.18948 1.75332 6.21464 1.69258C6.2398 1.63184 6.25275 1.56674 6.25275 1.501C6.25275 1.43525 6.2398 1.37015 6.21464 1.30941C6.18948 1.24867 6.15261 1.19349 6.10612 1.147C6.05963 1.10051 6.00444 1.06363 5.9437 1.03847C5.88296 1.01332 5.81786 1.00037 5.75212 1.00037C5.68638 1.00037 5.62128 1.01332 5.56054 1.03847C5.4998 1.06363 5.44461 1.10051 5.39812 1.147L4.68912 1.855L1.14712 5.398C1.10063 5.44449 1.06376 5.49967 1.0386 5.56041C1.01344 5.62115 1.00049 5.68625 1.00049 5.752C1.00049 5.81774 1.01344 5.88284 1.0386 5.94358C1.06376 6.00432 1.10063 6.05951 1.14712 6.106C1.19361 6.15249 1.2488 6.18936 1.30954 6.21452C1.37028 6.23968 1.43538 6.25263 1.50112 6.25263C1.56686 6.25263 1.63196 6.23968 1.6927 6.21452C1.75344 6.18936 1.80863 6.15249 1.85512 6.106L2.34912 5.612C2.93012 6.194 3.90412 7.17 3.90412 7.17L4.05412 7.597L4.05512 9.049C4.05459 9.17075 4.07818 9.2914 4.12453 9.40399C4.17088 9.51657 4.23907 9.61887 4.32516 9.70496C4.41125 9.79105 4.51354 9.85924 4.62613 9.90559C4.73872 9.95194 4.85937 9.97553 4.98112 9.975C5.10253 9.97499 5.22273 9.95095 5.33481 9.90427C5.44688 9.85758 5.54861 9.78918 5.63412 9.703L7.31412 8.023L10.1441 10.853C10.1906 10.8995 10.2458 10.9364 10.3065 10.9615C10.3673 10.9867 10.4324 10.9996 10.4981 10.9996C10.5639 10.9996 10.629 10.9867 10.6897 10.9615C10.7504 10.9364 10.8056 10.8995 10.8521 10.853C10.8986 10.8065 10.9355 10.7513 10.9606 10.6906C10.9858 10.6298 10.9988 10.5647 10.9988 10.499C10.9988 10.4333 10.9858 10.3682 10.9606 10.3074C10.9355 10.2467 10.8986 10.1915 10.8521 10.145L8.02212 7.315L9.70212 5.635C9.83178 5.50584 9.92012 5.34105 9.95591 5.16156C9.9917 4.98208 9.97333 4.79601 9.90312 4.627C9.83415 4.45749 9.71609 4.31247 9.5641 4.21055C9.4121 4.10863 9.23312 4.05446 9.05012 4.055Z" fill="context-fill"/>
 </svg>