Bug 1921731: Keep actions' layout until changing the results r=urlbar-reviewers,daleharvey,adw

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

browser/components/urlbar/UrlbarInput.sys.mjs

@@ -3733,9 +3733,6 @@ export class UrlbarInput {
     this._searchModeIndicatorTitle.removeAttribute("data-l10n-id");
     this._searchModeLabel.removeAttribute("data-l10n-id");
 
-    let results = this.querySelector(".urlbarView-results");
-    results.removeAttribute("searchmodesource");
-
     if (!engineName && !source) {
       try {
         // This will throw before DOMContentLoaded in
@@ -3767,7 +3764,6 @@ export class UrlbarInput {
         this.inputField,
         `urlbar-placeholder-search-mode-other-${sourceName}`
       );
-      results.setAttribute("searchmodesource", sourceName);
     }
 
     this.toggleAttribute("searchmode", true);

browser/components/urlbar/UrlbarView.sys.mjs

@@ -2255,6 +2255,11 @@ export class UrlbarView {
     } else {
       this.panel.setAttribute("noresults", "true");
     }
+
+    this.#rows.toggleAttribute(
+      "actionmode",
+      this.visibleResults[0]?.source == lazy.UrlbarUtils.RESULT_SOURCE.ACTIONS
+    );
   }
 
   /**

browser/components/urlbar/tests/UrlbarTestUtils.sys.mjs

@@ -831,21 +831,12 @@ export var UrlbarTestUtils = {
     );
 
     let results = window.gURLBar.querySelector(".urlbarView-results");
-    if (
-      window.gURLBar.searchMode?.source &&
-      window.gURLBar.searchMode.source !== UrlbarUtils.RESULT_SOURCE.SEARCH
-    ) {
-      this.Assert.equal(
-        results.getAttribute("searchmodesource"),
-        UrlbarUtils.getResultSourceName(window.gURLBar.searchMode.source),
-        "Urlbar results have proper searchmodesource attribute"
-      );
-    } else {
-      this.Assert.ok(
-        !results.hasAttribute("searchmodesource"),
-        "Urlbar results does not have searchmodesource attribute"
-      );
-    }
+    await lazy.BrowserTestUtils.waitForCondition(
+      () =>
+        results.hasAttribute("actionmode") ==
+        (window.gURLBar.searchMode?.source == UrlbarUtils.RESULT_SOURCE.ACTIONS)
+    );
+    this.Assert.ok(true, "Urlbar results have proper actionmode attribute");
 
     if (!expectedSearchMode) {
       // Check the input's placeholder.
@@ -853,11 +844,20 @@ export var UrlbarTestUtils = {
         "browser.urlbar.placeholderName" +
         (lazy.PrivateBrowsingUtils.isWindowPrivate(window) ? ".private" : "");
       let engineName = Services.prefs.getStringPref(prefName, "");
-      this.Assert.deepEqual(
-        window.document.l10n.getAttributes(window.gURLBar.inputField),
-        engineName
-          ? { id: "urlbar-placeholder-with-name", args: { name: engineName } }
-          : { id: "urlbar-placeholder", args: null },
+      let expectedPlaceholder = engineName
+        ? { id: "urlbar-placeholder-with-name", args: { name: engineName } }
+        : { id: "urlbar-placeholder", args: null };
+      await lazy.BrowserTestUtils.waitForCondition(() => {
+        let l10nAttributes = window.document.l10n.getAttributes(
+          window.gURLBar.inputField
+        );
+        return (
+          l10nAttributes.id == expectedPlaceholder.id &&
+          l10nAttributes.args?.name == expectedPlaceholder.args?.name
+        );
+      });
+      this.Assert.ok(
+        true,
         "Expected placeholder l10n when search mode is inactive"
       );
       return;

browser/themes/shared/urlbarView.css

@@ -940,16 +940,16 @@
 }
 
 /* Actions */
-
-.urlbarView-results[searchmodesource=actions] {
+.urlbarView-results[actionmode] {
   white-space: wrap;
-
-  > .urlbarView-row[dynamicType="actions"] {
-    display: inline-flex;
-  }
 }
 
-.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) {
+.urlbarView-row[dynamicType="actions"] {
+  display: inline-flex;
+}
+
+/* To align the label and action button */
+.urlbarView-row:has(.urlbarView-actions-container) {
   flex-direction: column;
   align-items: flex-start;
 }