Bug 1898356 - go back one page arrow (button) turns grey after clearing browsing & download history. r=hsohaney

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

Author: cmphilpot

browser/base/content/browser.js

@@ -1025,16 +1025,21 @@ const gClickAndHoldListenersOnElement = {
   },
 };
 
+// See bug 1898356 - Navigation buttons aren't being properly disabled
+// when clearing the history. This is due that this callback is called
+// before the panel is closed. By setting "wasdisabled" attribute instead
+// of "disabled" attribute, we are sort of "lying" to `_updateMenuAndCommandState`
+// that they where previously disabled, so it will not enable them.
 const gSessionHistoryObserver = {
   observe(subject, topic) {
     if (topic != "browser:purge-session-history") {
       return;
     }
 
     var backCommand = document.getElementById("Browser:Back");
-    backCommand.setAttribute("disabled", "true");
+    backCommand.setAttribute("wasdisabled", "true");
     var fwdCommand = document.getElementById("Browser:Forward");
-    fwdCommand.setAttribute("disabled", "true");
+    fwdCommand.setAttribute("wasdisabled", "true");
 
     // Clear undo history of the URL bar
     gURLBar.editor.clearUndoRedo();

browser/base/content/test/backforward/browser.toml

@@ -3,3 +3,5 @@
 ["browser_history_menu.js"]
 fail-if = ["a11y_checks"] # Bug 1854233 navigator-toolbox may not be focusable
 https_first_disabled = true
+
+["browser_history_menu_clear.js"]

browser/base/content/test/backforward/browser_history_menu_clear.js

@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(async function test_back_button_disabled_after_history_clear() {
+  // Start with a clean slate
+  let tab = await BrowserTestUtils.openNewForegroundTab(
+    gBrowser,
+    "https://example.com/"
+  );
+
+  registerCleanupFunction(() => {
+    gBrowser.removeTab(tab);
+  });
+
+  // Navigate to create session history
+  BrowserTestUtils.startLoadingURIString(
+    tab.linkedBrowser,
+    "https://example.org/"
+  );
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+
+  let backButton = document.getElementById("back-button");
+
+  // Wait for back button to be enabled
+  await TestUtils.waitForCondition(
+    () => !backButton.disabled,
+    "Back button should be enabled with history"
+  );
+
+  // Clear history using Sanitizer
+  await Sanitizer.sanitize(["history"]);
+
+  // Check webNavigation state
+  await TestUtils.waitForCondition(
+    () => !tab.linkedBrowser.webNavigation.canGoBack,
+    "webNavigation.canGoBack should be false after clearing"
+  );
+
+  // Trigger UI update to reflect navigation state changes
+  if (typeof gBrowser.updateBackForwardButtons === "function") {
+    gBrowser.updateBackForwardButtons();
+  } else {
+    goUpdateCommand("Browser:Back");
+  }
+
+  // Wait for UI to update
+  await TestUtils.waitForCondition(
+    () => backButton.hasAttribute("disabled"),
+    "Back button should be disabled after clearing history"
+  );
+
+  Assert.ok(
+    backButton.hasAttribute("disabled"),
+    "Back button should be disabled"
+  );
+
+  // To check that arrow is 'grayed out'
+  let computedStyle = window.getComputedStyle(backButton);
+  Assert.equal(
+    computedStyle.getPropertyValue("opacity"),
+    "0.4", // the opacity value
+    "Back button should appear grayed out when disabled"
+  );
+});