Bug 1913204: Apply container color border to secondary action button for tab switch r=desktop-theme-reviewers,urlbar-reviewers,daleharvey,dao

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

browser/components/urlbar/UrlbarProviderInputHistory.sys.mjs

@@ -144,22 +144,21 @@ class ProviderInputHistory extends UrlbarProvider {
           // Don't suggest switching to the current page.
           continue;
         }
+        let userContextId = row.getResultByName("userContextId") || 0;
         let payload = lazy.UrlbarResult.payloadAndSimpleHighlights(
           queryContext.tokens,
           {
             url: [url, UrlbarUtils.HIGHLIGHT.TYPED],
             title: [resultTitle, UrlbarUtils.HIGHLIGHT.TYPED],
             icon: UrlbarUtils.getIconForUrl(url),
-            userContextId: row.getResultByName("userContextId") || 0,
+            userContextId,
           }
         );
         if (
           lazy.UrlbarPrefs.getScotchBonnetPref("secondaryActions.featureGate")
         ) {
-          payload[0].action = {
-            key: "tabswitch",
-            l10nId: "urlbar-result-action-switch-tab",
-          };
+          payload[0].action =
+            UrlbarUtils.createTabSwitchSecondaryAction(userContextId);
         }
         let result = new lazy.UrlbarResult(
           UrlbarUtils.RESULT_TYPE.TAB_SWITCH,

browser/components/urlbar/UrlbarProviderPlaces.sys.mjs

@@ -340,10 +340,9 @@ function makeUrlbarResult(tokens, info) {
         if (
           lazy.UrlbarPrefs.getScotchBonnetPref("secondaryActions.featureGate")
         ) {
-          payload[0].action = {
-            key: "tabswitch",
-            l10nId: "urlbar-result-action-switch-tab",
-          };
+          payload[0].action = UrlbarUtils.createTabSwitchSecondaryAction(
+            info.userContextId
+          );
         }
         return new lazy.UrlbarResult(
           UrlbarUtils.RESULT_TYPE.TAB_SWITCH,

browser/components/urlbar/UrlbarUtils.sys.mjs

@@ -10,6 +10,8 @@
 const lazy = {};
 
 ChromeUtils.defineESModuleGetters(lazy, {
+  ContextualIdentityService:
+    "resource://gre/modules/ContextualIdentityService.sys.mjs",
   FormHistory: "resource://gre/modules/FormHistory.sys.mjs",
   KeywordUtils: "resource://gre/modules/KeywordUtils.sys.mjs",
   PlacesUIUtils: "resource:///modules/PlacesUIUtils.sys.mjs",
@@ -1626,6 +1628,38 @@ export var UrlbarUtils = {
     }
     return obj;
   },
+
+  /**
+   * Create secondary action button data for tab switch.
+   *
+   * @param {number} userContextId
+   *   The container id for the tab.
+   * @returns {object} data to create secondary action button.
+   */
+  createTabSwitchSecondaryAction(userContextId) {
+    let action = { key: "tabswitch" };
+    let identity =
+      lazy.ContextualIdentityService.getPublicIdentityFromId(userContextId);
+
+    if (identity) {
+      let label =
+        lazy.ContextualIdentityService.getUserContextLabel(
+          userContextId
+        ).toLowerCase();
+      action.l10nId = "urlbar-result-action-switch-tab-with-container";
+      action.l10nArgs = {
+        container: label,
+      };
+      action.classList = [
+        "urlbarView-userContext",
+        `identity-color-${identity.color}`,
+      ];
+    } else {
+      action.l10nId = "urlbar-result-action-switch-tab";
+    }
+
+    return action;
+  },
 };
 
 ChromeUtils.defineLazyGetter(UrlbarUtils.ICON, "DEFAULT", () => {
@@ -1650,6 +1684,16 @@ UrlbarUtils.RESULT_PAYLOAD_SCHEMA = {
       action: {
         type: "object",
         properties: {
+          classList: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          l10nArgs: {
+            type: "object",
+            additionalProperties: true,
+          },
           l10nId: {
             type: "string",
           },

browser/components/urlbar/UrlbarView.sys.mjs

@@ -1673,6 +1673,9 @@ export class UrlbarView {
     if (global) {
       button.classList.add("urlbarView-global-action-btn");
     }
+    if (action.classList) {
+      button.classList.add(...action.classList);
+    }
     button.setAttribute("role", "button");
     if (action.icon) {
       let icon = this.#createElement("img");

browser/components/urlbar/tests/browser/browser_secondaryActions.js

@@ -100,6 +100,36 @@ add_task(async function test_switchtab() {
   BrowserTestUtils.closeWindow(win);
 });
 
+add_task(async function test_switchtab_with_userContextId() {
+  let url = "https://example.com";
+  let tab = BrowserTestUtils.addTab(gBrowser, url, { userContextId: 1 });
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+
+  info("Start query");
+  await UrlbarTestUtils.promiseAutocompleteResultPopup({
+    window,
+    value: "exa",
+  });
+
+  info("Check the button style");
+  let button = document.querySelector(
+    ".urlbarView-actions-container .urlbarView-action-btn.urlbarView-userContext"
+  );
+  await BrowserTestUtils.waitForCondition(() => button.textContent.length);
+
+  Assert.ok(button, "Action button with userContext is in the result");
+  Assert.ok(button.textContent.includes("personal"), "Label is correct");
+  Assert.ok(
+    button.classList.contains("identity-color-blue"),
+    "Style is correct"
+  );
+
+  info("Switch the tab");
+  EventUtils.synthesizeMouseAtCenter(button, {});
+  await BrowserTestUtils.waitForCondition(() => gBrowser.selectedTab == tab);
+  Assert.ok(true, "Expected tab is selected");
+});
+
 add_task(async function test_sitesearch() {
   await SearchTestUtils.installSearchExtension({
     name: "Contextual",

browser/themes/shared/urlbarView.css

@@ -918,6 +918,50 @@
   }
 }
 
+.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.urlbarView-actions-container {
+  margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
+  margin-block-end: var(--urlbarView-item-block-padding);
+}
+
+.urlbarView-action-btn {
+  font-size: smaller;
+  color: var(--toolbar-field-focus-color);
+  border-radius: var(--toolbarbutton-border-radius);
+  border: 1px solid transparent;
+  padding: .4em .6em;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--urlbarView-action-button-background-color);
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.23);
+
+  > img {
+    width: 16px;
+    height: 16px;
+    margin-inline-end: .4em;
+    -moz-context-properties: fill, fill-opacity;
+  }
+
+  &:hover {
+    color: var(--urlbarView-result-button-hover-color);
+    background-color: var(--urlbarView-action-button-hover-color);
+  }
+
+  &[selected] {
+    color: light-dark(var(--urlbarView-result-button-hover-color), var(--toolbar-field-focus-color));
+    background-color: var(--urlbarView-action-button-selected-color);
+    border-color: light-dark(transparent, white);
+  }
+
+  &.urlbarView-userContext {
+    border-top-color: var(--identity-tab-color);
+  }
+}
+
 /* Search one-offs */
 
 #urlbar .search-one-offs:not([hidden]) {
@@ -1041,43 +1085,3 @@
   background: var(--urlbarView-highlight-background);
   color: var(--urlbarView-highlight-color);
 }
-
-.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.urlbarView-actions-container {
-  margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
-  margin-block-end: var(--urlbarView-item-block-padding);
-}
-
-.urlbarView-action-btn {
-  font-size: smaller;
-  color: var(--toolbar-field-focus-color);
-  border-radius: var(--toolbarbutton-border-radius);
-  border: 1px solid transparent;
-  padding: .4em .6em;
-  display: inline-flex;
-  align-items: center;
-  background-color: var(--urlbarView-action-button-background-color);
-  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.23);
-}
-
-.urlbarView-action-btn img {
-  width: 16px;
-  height: 16px;
-  margin-inline-end: .4em;
-  -moz-context-properties: fill, fill-opacity;
-}
-
-.urlbarView-action-btn:hover {
-  color: var(--urlbarView-result-button-hover-color);
-  background-color: var(--urlbarView-action-button-hover-color);
-}
-
-.urlbarView-action-btn[selected] {
-  color: light-dark(var(--urlbarView-result-button-hover-color), var(--toolbar-field-focus-color));
-  background-color: var(--urlbarView-action-button-selected-color);
-  border-color: light-dark(transparent, white);
-}