Bug 1861530 - Implement the updated UX spec for Switch to tab in containers feature.r=mak,desktop-theme-reviewers,fluent-reviewers,bolsson,dao

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

Author: Marc Seibert

browser/components/contextualidentity/test/browser/browser_switchTab_across_user_context.js

@@ -69,9 +69,10 @@ add_task(async function test_switch_tab() {
   );
   let element = UrlbarTestUtils.getRowAt(window, resultIndex);
   is(
-    element.querySelectorAll(".urlbarView-action").length,
-    2,
-    "Has switch to tab and user-context chiclet"
+    element.querySelectorAll(".urlbarView-action.urlbarView-userContext")
+      .length,
+    1,
+    "Has switch to tab with user-context chiclet"
   );
   let tabSwitchDonePromise = BrowserTestUtils.waitForEvent(
     window,

browser/components/urlbar/UrlbarView.sys.mjs

@@ -1372,10 +1372,6 @@ export class UrlbarView {
     noWrap.appendChild(action);
     item._elements.set("action", action);
 
-    let userContextBox = this.#createElement("span");
-    noWrap.appendChild(userContextBox);
-    item._elements.set("user-context", userContextBox);
-
     let url = this.#createElement("span");
     url.className = "urlbarView-url";
     item._content.appendChild(url);
@@ -1711,13 +1707,6 @@ export class UrlbarView {
     let favicon = item._elements.get("favicon");
     favicon.src = this.#iconForResult(result);
 
-    let userContextBox = item._elements.get("user-context");
-    if (result.type == lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH) {
-      this.#setResultUserContextBox(result, userContextBox);
-    } else if (userContextBox) {
-      this.#removeElementL10n(userContextBox);
-    }
-
     let title = item._elements.get("title");
     this.#setResultTitle(result, title);
 
@@ -1759,9 +1748,7 @@ export class UrlbarView {
     switch (result.type) {
       case lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH:
         actionSetter = () => {
-          this.#setElementL10n(action, {
-            id: "urlbar-result-action-switch-tab",
-          });
+          this.#setSwitchTabActionChiclet(result, action);
         };
         setURL = true;
         break;
@@ -2626,58 +2613,86 @@ export class UrlbarView {
   }
 
   /**
-   * Sets `result`'s userContext in `userContextNode`'s DOM.
+   * Sets the content of the 'Switch To Tab' chiclet.
    *
    * @param {UrlbarResult} result
    *   The result for which the userContext is being set.
-   * @param {Element} userContextNode
-   *   The DOM node for the result's userContext.
+   * @param {Element} actionNode
+   *   The DOM node for the result's action.
    */
-  #setResultUserContextBox(result, userContextNode) {
-    // clear the element
-    while (userContextNode.firstChild) {
-      userContextNode.firstChild.remove();
-    }
+  #setSwitchTabActionChiclet(result, actionNode) {
     if (
       lazy.UrlbarPrefs.get("switchTabs.searchAllContainers") &&
       result.type == lazy.UrlbarUtils.RESULT_TYPE.TAB_SWITCH &&
       result.payload.userContextId
     ) {
-      let userContextBox = this.#createElement("span");
-      userContextBox.classList.add("urlbarView-userContext-indicator");
-      let identity = lazy.ContextualIdentityService.getPublicIdentityFromId(
-        result.payload.userContextId
-      );
       let label = lazy.ContextualIdentityService.getUserContextLabel(
         result.payload.userContextId
+      ).toLowerCase();
+      // To avoid flicker don't update the label unless necessary.
+      if (
+        actionNode.classList.contains("urlbarView-userContext") &&
+        label &&
+        actionNode.querySelector("span").innerText == label
+      ) {
+        return;
+      }
+      actionNode.innerHTML = "";
+      let identity = lazy.ContextualIdentityService.getPublicIdentityFromId(
+        result.payload.userContextId
       );
       if (identity) {
-        userContextNode.classList.add("urlbarView-action");
-        let userContextLabel = this.#createElement("label");
-        userContextLabel.classList.add("urlbarView-userContext-label");
-        userContextBox.appendChild(userContextLabel);
+        actionNode.classList.add("urlbarView-userContext");
+        if (identity.color) {
+          actionNode.className = actionNode.className.replace(
+            /identity-color-\w*/g,
+            ""
+          );
+          actionNode.classList.add("identity-color-" + identity.color);
+        }
+
+        let textModeLabel = this.#createElement("div");
+        textModeLabel.classList.add("urlbarView-userContext-textMode");
 
-        let userContextIcon = this.#createElement("img");
-        userContextIcon.classList.add("urlbarView-userContext-icons");
-        userContextBox.appendChild(userContextIcon);
+        if (label) {
+          this.#setElementL10n(textModeLabel, {
+            id: "urlbar-result-action-switch-tab-with-container",
+            args: {
+              container: label.toLowerCase(),
+            },
+          });
+          actionNode.appendChild(textModeLabel);
+        }
 
+        let iconModeLabel = this.#createElement("div");
+        iconModeLabel.classList.add("urlbarView-userContext-iconMode");
+        actionNode.appendChild(iconModeLabel);
         if (identity.icon) {
+          let userContextIcon = this.#createElement("img");
+          userContextIcon.classList.add("urlbarView-userContext-icon");
+
           userContextIcon.classList.add("identity-icon-" + identity.icon);
           userContextIcon.src =
             "resource://usercontext-content/" + identity.icon + ".svg";
+          this.#setElementL10n(iconModeLabel, {
+            id: "urlbar-result-action-switch-tab",
+          });
+          iconModeLabel.appendChild(userContextIcon);
         }
-        if (identity.color) {
-          userContextBox.classList.add("identity-color-" + identity.color);
-        }
-        if (label) {
-          userContextLabel.setAttribute("value", label);
-          userContextLabel.innerText = label;
-        }
-        userContextBox.setAttribute("tooltiptext", label);
-        userContextNode.appendChild(userContextBox);
+        actionNode.setAttribute("tooltiptext", label);
       }
     } else {
-      userContextNode.classList.remove("urlbarView-action");
+      actionNode.classList.remove("urlbarView-userContext");
+      // identity needs to be removed as well..
+      actionNode
+        .querySelectorAll(
+          ".urlbarView-userContext-textMode, .urlbarView-userContext-iconMode"
+        )
+        .forEach(node => node.remove());
+
+      this.#setElementL10n(actionNode, {
+        id: "urlbar-result-action-switch-tab",
+      });
     }
   }
 

browser/locales/en-US/browser/browser.ftl

@@ -603,6 +603,11 @@ urlbar-result-action-search-w-engine = Search with { $engine }
 urlbar-result-action-sponsored = Sponsored
 urlbar-result-action-switch-tab = Switch to Tab
 urlbar-result-action-visit = Visit
+# "Switch to tab with container" is used when the target tab is located in a
+# different container.
+# Variables
+# $container (String): the name of the target container
+urlbar-result-action-switch-tab-with-container = Switch to Tab · <span>{ $container }</span>
 # Allows the user to visit a URL that was previously copied to the clipboard.
 urlbar-result-action-visit-from-clipboard = Visit from clipboard
 # Directs a user to press the Tab key to perform a search with the specified

browser/themes/shared/urlbarView.css

@@ -224,16 +224,6 @@
   }
 }
 
-/* Display userContext icon instead of text, when window is too narrow. */
-.urlbarView-results[wrap] > .urlbarView-row[type=switchtab] {
-  .urlbarView-userContext-label {
-    display: none;
-  }
-  .urlbarView-userContext-icons {
-    display: inline-block;
-  }
-}
-
 .urlbarView-overflowable,
 .urlbarView-url {
   overflow: hidden;
@@ -549,26 +539,41 @@
 }
 
 /* user context box */
-.urlbarView-userContext-indicator {
-  align-items: center;
-}
-
-.urlbarView-userContext-label {
-  color: var(--identity-tab-color);
+.urlbarView-userContext {
+  border-top: 4px solid var(--identity-tab-color);
 }
 
-.urlbarView-userContext-icons {
-  height: var(--urlbarView-favicon-width);
-  vertical-align: middle;
+.urlbarView-userContext-icon {
+  height: 14px;
   background-image: var(--identity-icon);
   -moz-context-properties: fill;
-  fill: var(--identity-icon-color);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
+  vertical-align: top;
+  margin-inline-start: 0.35em;
+}
+
+.urlbarView-userContext-iconMode {
   display: none;
 }
 
+.urlbarView-userContext-textMode {
+  display: inline-block;
+  > span {
+    font-variant: small-caps;
+  }
+}
+
+/* Display userContext icon instead of text, when window is too narrow. */
+.urlbarView-results[wrap] {
+  .urlbarView-userContext-textMode {
+    display: none;
+  }
+  .urlbarView-userContext-iconMode {
+    display: inline-block;
+  }
+}
 
 /* Tail suggestions */
 
@@ -661,6 +666,10 @@
     background-color: var(--urlbar-box-focus-bgcolor);
     border-radius: var(--toolbarbutton-border-radius);
     padding: 6px 8px;
+
+    &.urlbarView-userContext {
+      padding-top: 2px;
+    }
     margin-block: -6px;
     margin-inline-start: 8px;