Bug 386228: Unify back and forward button and provide a single dropdown, patch by Dão Gottwald <dao@mozilla.com>, r=me, sr=mconnor, a=mconnor

2024-09-13 09:24:08 -07:00 · 2008-01-29 23:17:45 -08:00 · 2008-01-29 23:17:45 -08:00 · 7c4dd1d028
commit 7c4dd1d028
parent 7d64d9a402
5 changed files with 165 additions and 177 deletions
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -23,6 +23,15 @@ toolbar[printpreview="true"] {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
 }

+/* ::::: Unified Back-/Forward Button ::::: */
+#back-forward-dropmarker > image ,
+#back-forward-dropmarker > label {
+  display: none;
+}
+.unified-nav-current {
+  font-weight: bold;
+}
+
 menuitem.spell-suggestion {
  font-weight: bold;
 }
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@ -1440,16 +1440,6 @@ function BrowserHandleShiftBackspace()
  }
 }

-function BrowserBackMenu(event)
-{
-  return FillHistoryMenu(event.target, "back");
-}
-
-function BrowserForwardMenu(event)
-{
-  return FillHistoryMenu(event.target, "forward");
-}
-
 function BrowserStop()
 {
  try {
@ -2925,47 +2915,59 @@ const BrowserSearch = {
  }
 }

-function FillHistoryMenu(aParent, aMenu)
-  {
-    // Remove old entries if any
-    deleteHistoryItems(aParent);
-
-    var webNav = getWebNavigation();
-    var sessionHistory = webNav.sessionHistory;
-
-    var count = sessionHistory.count;
-    var index = sessionHistory.index;
-    var end;
-    var j;
-    var entry;
-
-    switch (aMenu)
-      {
-        case "back":
-          end = (index > MAX_HISTORY_MENU_ITEMS) ? index - MAX_HISTORY_MENU_ITEMS : 0;
-          if ((index - 1) < end) return false;
-          for (j = index - 1; j >= end; j--)
-            {
-              entry = sessionHistory.getEntryAtIndex(j, false);
-              if (entry)
-                createMenuItem(aParent, j, entry.title);
-            }
-          break;
-        case "forward":
-          end  = ((count-index) > MAX_HISTORY_MENU_ITEMS) ? index + MAX_HISTORY_MENU_ITEMS : count - 1;
-          if ((index + 1) > end) return false;
-          for (j = index + 1; j <= end; j++)
-            {
-              entry = sessionHistory.getEntryAtIndex(j, false);
-              if (entry)
-                createMenuItem(aParent, j, entry.title);
-            }
-          break;
-      }
-
-    return true;
+function FillHistoryMenu(aParent) {
+  // Remove old entries if any
+  var children = aParent.childNodes;
+  for (var i = children.length - 1; i >= 0; --i) {
+    if (children[i].hasAttribute("index"))
+      aParent.removeChild(children[i]);
  }

+  var webNav = getWebNavigation();
+  var sessionHistory = webNav.sessionHistory;
+  var bundle_browser = document.getElementById("bundle_browser");
+
+  var count = sessionHistory.count;
+  var index = sessionHistory.index;
+  var end;
+
+  if (count <= 1) // don't display the popup for a single item
+    return false;
+
+  var half_length = Math.floor(MAX_HISTORY_MENU_ITEMS / 2);
+  var start = Math.max(index - half_length, 0);
+  end = Math.min(start == 0 ? MAX_HISTORY_MENU_ITEMS : index + half_length + 1, count);
+  if (end == count)
+    start = Math.max(count - MAX_HISTORY_MENU_ITEMS, 0);
+
+  var tooltipBack = bundle_browser.getString("tabHistory.goBack");
+  var tooltipCurrent = bundle_browser.getString("tabHistory.current");
+  var tooltipForward = bundle_browser.getString("tabHistory.goForward");
+
+  for (var j = end - 1; j >= start; j--) {
+    let item = document.createElement("menuitem");
+    let entry = sessionHistory.getEntryAtIndex(j, false);
+
+    item.setAttribute("label", entry.title || entry.URI.spec);
+    item.setAttribute("index", j);
+    if (j < index) {
+      item.className = "unified-nav-back";
+      item.setAttribute("tooltiptext", tooltipBack);
+    } else if (j == index) {
+      item.setAttribute("type", "radio");
+      item.setAttribute("checked", "true");
+      item.className = "unified-nav-current";
+      item.setAttribute("tooltiptext", tooltipCurrent);
+    } else {
+      item.className = "unified-nav-forward";
+      item.setAttribute("tooltiptext", tooltipForward);
+    }
+
+    aParent.appendChild(item);
+  }
+  return true;
+}
+
 function addToUrlbarHistory(aUrlToAdd)
 {
  if (!aUrlToAdd)
@ -2982,25 +2984,6 @@ function addToUrlbarHistory(aUrlToAdd)
   }
 }

-function createMenuItem( aParent, aIndex, aLabel)
-  {
-    var menuitem = document.createElement( "menuitem" );
-    menuitem.setAttribute( "label", aLabel );
-    menuitem.setAttribute( "index", aIndex );
-    aParent.appendChild( menuitem );
-  }
-
-function deleteHistoryItems(aParent)
-{
-  var children = aParent.childNodes;
-  for (var i = children.length - 1; i >= 0; --i)
-    {
-      var index = children[i].getAttribute("index");
-      if (index)
-        aParent.removeChild(children[i]);
-    }
-}
-
 function toJavaScriptConsole()
 {
  toOpenWindowByType("global:console", "chrome://global/content/console.xul");
@ -3123,8 +3106,14 @@ function BrowserToolboxCustomizeDone(aToolboxChanged)
    gIdentityHandler._cacheElements();
    window.XULBrowserWindow.init();

+    var backForwardDropmarker = document.getElementById("back-forward-dropmarker");
+    if (backForwardDropmarker)
+      backForwardDropmarker.disabled =
+        document.getElementById('Browser:Back').hasAttribute('disabled') &&
+        document.getElementById('Browser:Forward').hasAttribute('disabled');
+
 #ifndef XP_MACOSX
-  updateEditUIVisibility();
+    updateEditUIVisibility();
 #endif
  }

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -87,16 +87,10 @@
 #include browser-sets.inc

  <popupset id="mainPopupSet">
-    <popup id="backMenu" 
-           position="after_start" 
-           onpopupshowing="return BrowserBackMenu(event);"
-           oncommand="gotoHistoryIndex(event);"
-           onclick="checkForMiddleClick(this, event);"/>
-    <popup id="forwardMenu"
-           position="after_start"
-           onpopupshowing="return BrowserForwardMenu(event);"
-           oncommand="gotoHistoryIndex(event);"
-           onclick="checkForMiddleClick(this, event);"/>
+    <menupopup id="backForwardMenu"
+               onpopupshowing="return FillHistoryMenu(event.target);"
+               oncommand="gotoHistoryIndex(event);"
+               onclick="checkForMiddleClick(this, event);"/>
    <tooltip id="aHTMLTooltip" onpopupshowing="return FillInHTMLTooltip(document.tooltipNode);"/>

    <!-- for search and content formfill/pw manager -->
@ -232,33 +226,37 @@
    </toolbar>

    <toolbarpalette id="BrowserToolbarPalette">
-      <toolbarbutton id="back-button" type="menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                     chromedir="&locale.dir;"
-                     label="&backCmd.label;"
-                     oncommand="BrowserBack(event)"
-                     onclick="checkForMiddleClick(this, event);"
-                     context="backMenu"
-                     tooltiptext="&backButton.tooltip;">
-        <observes element="Browser:Back" attribute="disabled"/>
-        <menupopup context=""
-                   onpopupshowing="BrowserBackMenu(event);"
-                   oncommand="gotoHistoryIndex(event); event.stopPropagation();"
-                   onclick="checkForMiddleClick(this, event);"/>
-      </toolbarbutton>

-      <toolbarbutton id="forward-button" type="menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                     chromedir="&locale.dir;"
-                     label="&forwardCmd.label;"
-                     oncommand="BrowserForward(event)"
-                     onclick="checkForMiddleClick(this, event);"
-                     context="forwardMenu"
-                     tooltiptext="&forwardButton.tooltip;">
-        <observes element="Browser:Forward" attribute="disabled"/>
-        <menupopup context=""
-                   onpopupshowing="BrowserForwardMenu(event);"
-                   oncommand="gotoHistoryIndex(event); event.stopPropagation()"
-                   onclick="checkForMiddleClick(this, event);"/>
-      </toolbarbutton>
+      <toolbaritem id="unified-back-forward-button" class="chromeclass-toolbar-additional"
+                   context="backForwardMenu"
+                   onbroadcast="document.getElementById('back-forward-dropmarker').disabled =
+                                  document.getElementById('Browser:Back').hasAttribute('disabled') &amp;&amp;
+                                  document.getElementById('Browser:Forward').hasAttribute('disabled');">
+        <toolbarbutton id="back-button" class="toolbarbutton-1"
+                       chromedir="&locale.dir;"
+                       label="&backCmd.label;"
+                       oncommand="BrowserBack(event)"
+                       onclick="checkForMiddleClick(this, event);"
+                       tooltiptext="&backButton.tooltip;">
+          <observes element="Browser:Back" attribute="disabled"/>
+        </toolbarbutton>
+        <toolbarbutton id="forward-button" class="toolbarbutton-1"
+                       chromedir="&locale.dir;"
+                       label="&forwardCmd.label;"
+                       oncommand="BrowserForward(event)"
+                       onclick="checkForMiddleClick(this, event);"
+                       tooltiptext="&forwardButton.tooltip;">
+          <observes element="Browser:Forward" attribute="disabled"/>
+        </toolbarbutton>
+        <toolbarbutton id="back-forward-dropmarker" type="menu" chromedir="&locale.dir;"
+                       disabled="true">
+          <menupopup context=""
+                     position="after_start"
+                     onpopupshowing="return FillHistoryMenu(event.target);"
+                     oncommand="gotoHistoryIndex(event);"
+                     onclick="checkForMiddleClick(this, event);"/>
+        </toolbarbutton>
+      </toolbaritem>

      <toolbarbutton id="reload-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                     label="&reloadCmd.label;"
@ -430,9 +428,9 @@
             fullscreentoolbar="true" mode="icons"
             customizable="true"
 #ifdef XP_MACOSX
-             defaultset="back-button,forward-button,reload-button,stop-button,home-button,urlbar-container,splitter,search-container,throbber-box"
+             defaultset="unified-back-forward-button,reload-button,stop-button,home-button,urlbar-container,splitter,search-container,throbber-box"
 #else
-             defaultset="back-button,forward-button,reload-button,stop-button,home-button,urlbar-container,splitter,search-container,fullscreenflex,window-controls"
+             defaultset="unified-back-forward-button,reload-button,stop-button,home-button,urlbar-container,splitter,search-container,fullscreenflex,window-controls"
 #endif
             context="toolbar-context-menu">
 #ifndef XP_MACOSX
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@ -367,50 +367,36 @@ toolbar[mode="icons"] #forward-button .toolbarbutton-text-box,

 /* ----- DEFAULT BACK BUTTON, PAIRED----- */	

-toolbar[mode="icons"]:not([currentset]) #back-button,
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #back-button {
-  -moz-image-region: rect(0px, 617px, 23px, 584px);
-  -moz-margin-end: 0;
-  -moz-padding-end: 0;
-  border-left: none;
-  border-right: none;
+toolbar[mode="icons"] #back-button {
+  -moz-image-region: rect(0px, 617px, 23px, 584px) !important;
+  -moz-margin-end: 0 !important;
+  -moz-padding-end: 0 !important;
+  border-left: none !important;
+  border-right: none !important;
 }

-toolbar[mode="icons"]:not([currentset]) #back-button[disabled="true"],
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #back-button[disabled="true"] {
+toolbar[mode="icons"] #back-button[disabled="true"] {
 -moz-image-region: rect(23px, 617px, 46px, 584px) !important;
 }

-toolbar[mode="icons"]:not([currentset]) #back-button:hover:active,
-toolbar[mode="icons"]:not([currentset]) #back-button[buttondown="true"],
-toolbar[mode="icons"]:not([currentset]) #back-button[open="true"],
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #back-button:hover:active,
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #back-button[buttondown="true"]
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #back-button[open="true"] {
-  -moz-image-region: rect(46px, 617px, 69px, 584px);
+toolbar[mode="icons"] #back-button:hover:active:not([disabled]) {
+  -moz-image-region: rect(46px, 617px, 69px, 584px) !important;
 }

 /* ----- DEFAULT FORWARD BUTTON, PAIRED ----- */	

-toolbar[mode="icons"]:not([currentset]) #forward-button,
-toolbar[mode="icons"][currentset*='back-button,forward-button'] #forward-button {
-  -moz-image-region: rect(0px, 651px, 23px, 617px);
-  -moz-margin-start: 0;
-  -moz-padding-start: 0;
-  border-left: none;
-  border-right: none;
+toolbar[mode="icons"] #forward-button {
+  -moz-image-region: rect(0px, 651px, 23px, 617px) !important;
+  -moz-margin-start: 0 !important;
+  -moz-padding-start: 0 !important;
+  border-left: none !important;
+  border-right: none !important;
 }
-toolbar[mode="icons"]:not([currentset]) #forward-button[disabled="true"],
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #forward-button[disabled="true"] {
+toolbar[mode="icons"] #forward-button[disabled="true"] {
 -moz-image-region: rect(23px, 651px, 46px, 617px) !important;
 }
-toolbar[mode="icons"]:not([currentset]) #forward-button:hover:active,
-toolbar[mode="icons"]:not([currentset]) #forward-button[buttondown="true"],
-toolbar[mode="icons"]:not([currentset]) #forward-button[open="true"],
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #forward-button:hover:active,
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #forward-button[buttondown="true"]
-toolbar[mode="icons"][currentset*="back-button,forward-button"] #forward-button[open="true"] {
-  -moz-image-region: rect(46px, 651px, 69px, 617px);
+toolbar[mode="icons"] #forward-button:hover:active:not([disabled]) {
+  -moz-image-region: rect(46px, 651px, 69px, 617px) !important;
 }

 /* ----- DEFAULT RELOAD BUTTON ----- */	
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@ -254,121 +254,127 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
  padding: 5px !important;
 }

-/* ::::: unified back and forward buttons - see Bug 386228 ::::: */
+/* ::::: unified back and forward buttons ::::: */

 /* wrapper containing back, forward, and dropmarker, when unified with keyhole icons */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button {
  -moz-padding-start: 2px;
  -moz-padding-end: 2px;
 }

+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > .toolbarbutton-1 {
+  -moz-appearance: none;
+  border: none;
+  padding: 0;
+}
+
 /* unified back button with keyhole icons */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button {
  -moz-image-region: rect(0px 394px 34px 360px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button:not([disabled="true"]):hover {
  -moz-image-region: rect(34px 394px 68px 360px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button[disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button[disabled="true"] {
  -moz-image-region: rect(68px 394px 102px 360px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button:not([disabled="true"]):hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button:not([disabled="true"]):active {
  -moz-image-region: rect(102px 394px 136px 360px);
 }

 /* unified back button with keyhole icons, RTL version */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button[chromedir="rtl"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button[chromedir="rtl"] {
  -moz-image-region: rect(0px 504px 34px 470px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button[chromedir="rtl"]:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button[chromedir="rtl"]:not([disabled="true"]):hover {
  -moz-image-region: rect(34px 504px 68px 470px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button[chromedir="rtl"][disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button[chromedir="rtl"][disabled="true"] {
  -moz-image-region: rect(68px 504px 102px 470px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #back-button[chromedir="rtl"]:not([disabled="true"]):hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-button[chromedir="rtl"]:not([disabled="true"]):active {
  -moz-image-region: rect(102px 504px 136px 470px);
 }

 /* unified forward button with keyhole icons */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button {
  -moz-image-region: rect(3px 420px 31px 394px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button:not([disabled="true"]):hover {
  -moz-image-region: rect(37px 420px 65px 394px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button[disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button[disabled="true"] {
  -moz-image-region: rect(71px 420px 99px 394px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button:not([disabled="true"]):hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button:not([disabled="true"]):active {
  -moz-image-region: rect(105px 420px 133px 394px);
 }

 /* unified forward button with keyhole icons, RTL version */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button[chromedir="rtl"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button[chromedir="rtl"] {
  -moz-image-region: rect(3px 470px 31px 432px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button[chromedir="rtl"]:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button[chromedir="rtl"]:not([disabled="true"]):hover {
  -moz-image-region: rect(37px 470px 65px 432px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button[chromedir="rtl"][disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button[chromedir="rtl"][disabled="true"] {
  -moz-image-region: rect(71px 470px 99px 432px);
 }
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > #forward-button[chromedir="rtl"]:not([disabled="true"]):hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #forward-button[chromedir="rtl"]:not([disabled="true"]):active {
  -moz-image-region: rect(105px 470px 133px 432px);
 }

-/* unified button with keyhole icons never shows a border and hence doesn't need padding to offset it either */
-/* this rule covers both the unified forward and unified back buttons */
-
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-1 > .toolbarbutton-menubutton-button:hover,
-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-1 > .toolbarbutton-menubutton-button:hover:active {
-  border: none;
-  padding: 0px;
-}
-
 /* dropmarker for unified back and forward buttons with keyhole icons */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker {
+  -moz-appearance: none;
  list-style-image: url("chrome://browser/skin/Toolbar.png");
  -moz-image-region: rect(3px 432px 31px 420px);
-  padding: 0px;
+  padding: 0;
+  border: none;
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker > image {
+  display: -moz-box;
+  margin: 0;
+}
+
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker > dropmarker {
+  display: none;
+}
+
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker:not([disabled="true"]):hover {
  -moz-image-region: rect(37px 432px 65px 420px);
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker[disabled="true"] {
  -moz-image-region: rect(71px 432px 99px 420px);
-  padding: 0px !important; /* !important to overcome toolbarbutton.css and dropmarker.css */
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker:hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker:not([disabled="true"]):active {
  -moz-image-region: rect(105px 432px 133px 420px);
 }

 /* unified dropmarker with keyhole icons, RTL version */

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker[chromedir="rtl"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker[chromedir="rtl"] {
  -moz-image-region: rect(3px 444px 31px 432px);
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker[chromedir="rtl"]:not([disabled="true"]):hover {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker[chromedir="rtl"]:not([disabled="true"]):hover {
  -moz-image-region: rect(37px 444px 65px 432px);
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker[chromedir="rtl"][disabled="true"] {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker[chromedir="rtl"][disabled="true"] {
  -moz-image-region: rect(71px 444px 99px 432px);
 }

-toolbar[iconsize="large"][mode="icons"] > #unified-back-forward-button > .toolbarbutton-menubutton-dropmarker[chromedir="rtl"]:hover:active {
+toolbar[iconsize="large"][mode="icons"] #unified-back-forward-button > #back-forward-dropmarker[chromedir="rtl"]:not([disabled="true"]):active {
  -moz-image-region: rect(105px 444px 133px 432px);
 }