Bug 1454360 - Use "arrowscrollbox" in the "popup-scrollbars" binding. r=NeilDeakin

This prepares this binding for the unification with the "popup" binding, and removes the last consumer of the scrollByIndex method of XULScrollElement.

Because some code paths in "arrowscrollbox" are optimized using requestAnimationFrame, the related scrolling tests are now asynchronous.

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

--HG--
extra : rebase_source : f5d26df106785f2c0d158b8a23a648a71ab06b2d

browser/base/content/tabbrowser.xml

@@ -34,7 +34,7 @@
         // - for vertical orientation
         // - corresponding to an overflow event that we ignored
         let tabs = document.getBindingParent(this);
-        if (event.originalTarget != this._scrollbox ||
+        if (event.originalTarget != this.scrollbox ||
             event.detail == 0 ||
             !tabs.hasAttribute("overflow")) {
           return;
@@ -56,7 +56,7 @@
         // Ignore overflow events:
         // - from nested scrollable elements
         // - for vertical orientation
-        if (event.originalTarget != this._scrollbox ||
+        if (event.originalTarget != this.scrollbox ||
             event.detail == 0) {
           return;
         }
@@ -634,7 +634,7 @@
           let leftMovingTabScreenX = movingTabs[0].boxObject.screenX;
           let translateX = screenX - draggedTab._dragData.screenX;
           if (!pinned) {
-            translateX += this.arrowScrollbox._scrollbox.scrollLeft - draggedTab._dragData.scrollX;
+            translateX += this.arrowScrollbox.scrollbox.scrollLeft - draggedTab._dragData.scrollX;
           }
           let leftBound = leftTab.boxObject.screenX - leftMovingTabScreenX;
           let rightBound = (rightTab.boxObject.screenX + rightTab.boxObject.width) -
@@ -1555,7 +1555,7 @@
         tab._dragData = {
           offsetX: event.screenX - window.screenX - tabOffsetX,
           offsetY: event.screenY - window.screenY,
-          scrollX: this.arrowScrollbox._scrollbox.scrollLeft,
+          scrollX: this.arrowScrollbox.scrollbox.scrollLeft,
           screenX: event.screenX,
           movingTabs: (tab.multiselected ? gBrowser.selectedTabs : [tab])
                       .filter(t => t.pinned == tab.pinned),

browser/base/content/test/forms/browser_selectpopup.js

@@ -462,51 +462,64 @@ async function performLargePopupTests(win) {
   // Check if a drag-select works and scrolls the list.
   await openSelectPopup(selectPopup, "mousedown", "select", win);
 
-  let scrollPos = selectPopup.scrollBox.scrollTop;
+  let getScrollPos = () => selectPopup.scrollBox.scrollbox.scrollTop;
+  let scrollPos = getScrollPos();
   let popupRect = selectPopup.getBoundingClientRect();
 
   // First, check that scrolling does not occur when the mouse is moved over the
   // anchor button but not the popup yet.
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 5, popupRect.top - 10, { type: "mousemove" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position after mousemove over button should not change");
+  is(getScrollPos(), scrollPos, "scroll position after mousemove over button should not change");
 
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top + 10, { type: "mousemove" }, win);
 
   // Dragging above the popup scrolls it up.
+  let scrolledPromise = BrowserTestUtils.waitForEvent(selectPopup, "scroll", false,
+    () => getScrollPos() < scrollPos - 5);
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" }, win);
-  ok(selectPopup.scrollBox.scrollTop < scrollPos - 5, "scroll position at drag up");
+  await scrolledPromise;
+  ok(true, "scroll position at drag up");
 
   // Dragging below the popup scrolls it down.
-  scrollPos = selectPopup.scrollBox.scrollTop;
+  scrollPos = getScrollPos();
+  scrolledPromise = BrowserTestUtils.waitForEvent(selectPopup, "scroll", false,
+    () => getScrollPos() > scrollPos + 5);
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" }, win);
-  ok(selectPopup.scrollBox.scrollTop > scrollPos + 5, "scroll position at drag down");
+  await scrolledPromise;
+  ok(true, "scroll position at drag down");
 
   // Releasing the mouse button and moving the mouse does not change the scroll position.
-  scrollPos = selectPopup.scrollBox.scrollTop;
+  scrollPos = getScrollPos();
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position at mouseup should not change");
+  is(getScrollPos(), scrollPos, "scroll position at mouseup should not change");
 
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position at mousemove after mouseup should not change");
+  is(getScrollPos(), scrollPos, "scroll position at mousemove after mouseup should not change");
 
   // Now check dragging with a mousedown on an item
   let menuRect = selectPopup.children[51].getBoundingClientRect();
   EventUtils.synthesizeMouseAtPoint(menuRect.left + 5, menuRect.top + 5, { type: "mousedown" }, win);
 
   // Dragging below the popup scrolls it down.
+  scrolledPromise = BrowserTestUtils.waitForEvent(selectPopup, "scroll", false,
+    () => getScrollPos() > scrollPos + 5);
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" }, win);
-  ok(selectPopup.scrollBox.scrollTop > scrollPos + 5, "scroll position at drag down from option");
+  await scrolledPromise;
+  ok(true, "scroll position at drag down from option");
 
   // Dragging above the popup scrolls it up.
+  scrolledPromise = BrowserTestUtils.waitForEvent(selectPopup, "scroll", false,
+    () => getScrollPos() < scrollPos - 5);
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position at drag up from option");
+  await scrolledPromise;
+  ok(true, "scroll position at drag up from option");
 
-  scrollPos = selectPopup.scrollBox.scrollTop;
+  scrollPos = getScrollPos();
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position at mouseup from option should not change");
+  is(getScrollPos(), scrollPos, "scroll position at mouseup from option should not change");
 
   EventUtils.synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" }, win);
-  is(selectPopup.scrollBox.scrollTop, scrollPos, "scroll position at mousemove after mouseup should not change");
+  is(getScrollPos(), scrollPos, "scroll position at mousemove after mouseup should not change");
 
   await hideSelectPopup(selectPopup, "escape", win);
 

browser/base/content/test/tabs/browser_overflowScroll.js

@@ -8,7 +8,7 @@ requestLongerTimeout(2);
  */
 add_task(async function() {
   let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
-  let scrollbox = arrowScrollbox._scrollbox;
+  let scrollbox = arrowScrollbox.scrollbox;
   let originalSmoothScroll = arrowScrollbox.smoothScroll;
   let tabs = gBrowser.tabs;
   let tabMinWidth = parseInt(getComputedStyle(gBrowser.selectedTab, null).minWidth);

layout/xul/nsMenuFrame.cpp

@@ -1208,8 +1208,7 @@ bool nsMenuFrame::SizeToPopup(nsBoxLayoutState& aState, nsSize& aSize) {
 
       // if there is a scroll frame, add the desired width of the scrollbar as
       // well
-      nsIScrollableFrame* scrollFrame =
-          do_QueryFrame(popupFrame->PrincipalChildList().FirstChild());
+      nsIScrollableFrame* scrollFrame = popupFrame->GetScrollFrame(popupFrame);
       nscoord scrollbarWidth = 0;
       if (scrollFrame) {
         scrollbarWidth =

layout/xul/nsMenuPopupFrame.cpp

@@ -1048,8 +1048,7 @@ nsPoint nsMenuPopupFrame::AdjustPositionForAnchorAlign(nsRect& anchorRect,
       nsIFrame* selectedItemFrame = GetSelectedItemForAlignment();
       if (selectedItemFrame) {
         int32_t scrolly = 0;
-        nsIScrollableFrame* scrollframe =
-            do_QueryFrame(nsBox::GetChildXULBox(this));
+        nsIScrollableFrame* scrollframe = GetScrollFrame(this);
         if (scrollframe) {
           scrolly = scrollframe->GetScrollPosition().y;
         }

toolkit/content/tests/chrome/test_menulist.xul

@@ -21,7 +21,7 @@
 <richlistbox id="scroller-in-listbox" style="overflow: auto" height="60">
   <richlistitem allowevents="true">
     <menulist id="menulist-in-listbox" onpopupshown="test_menulist_open(this, this.parentNode.parentNode)"
-              onpopuphidden="SimpleTest.executeSoon(checkScrollAndFinish)">
+              onpopuphidden="SimpleTest.executeSoon(() => checkScrollAndFinish().catch(ex => ok(false, ex)));">
       <menupopup id="menulist-in-listbox-popup">
         <menuitem label="One" value="one"/>
         <menuitem label="Two" value="two"/>
@@ -74,6 +74,18 @@
 <script class="testbody" type="application/javascript">
 <![CDATA[
 
+function waitForEvent(subject, eventName, checkFn) {
+  return new Promise(resolve => {
+    subject.addEventListener(eventName, function listener(event) {
+      if (checkFn && !checkFn(event)) {
+        return;
+      }
+      subject.removeEventListener(eventName, listener);
+      SimpleTest.executeSoon(() => resolve(event));
+    });
+  });
+}
+
 SimpleTest.waitForExplicitFinish();
 
 function testtag_menulists()
@@ -225,92 +237,105 @@ function test_menulist_open(element, scroller)
   element.open = false;
 }
 
-function checkScrollAndFinish()
+async function checkScrollAndFinish()
 {
   is($("scroller").scrollTop, 0, "mousewheel on menulist does not scroll vbox parent");
   is($("scroller-in-listbox").scrollTop, 0, "mousewheel on menulist does not scroll listbox parent");
 
   let menulist = $("menulist-size");
-  menulist.addEventListener("popupshown", function testAltClose() {
-    menulist.removeEventListener("popupshown", testAltClose);
-
-    sendKey("ALT");
-    is(menulist.menupopup.state, "open", "alt doesn't close menulist");
-    menulist.open = false;
-
-    dragScroll();
-  });
-
+  let shownPromise = waitForEvent(menulist, "popupshown");
   menulist.open = true;
+  await shownPromise;
+
+  sendKey("ALT");
+  is(menulist.menupopup.state, "open", "alt doesn't close menulist");
+  menulist.open = false;
+
+  await dragScroll();
 }
 
-function dragScroll()
+async function dragScroll()
 {
   let menulist = $("menulist-clipped");
-  menulist.addEventListener("popupshown", function testDragScroll() {
-    menulist.removeEventListener("popupshown", testDragScroll);
-
-    let popup = menulist.menupopup;
-    let scrollPos = popup.scrollBox.scrollTop;
-    let popupRect = popup.getBoundingClientRect();
-
-    // First, check that scrolling does not occur when the mouse is moved over the
-    // anchor button but not the popup yet.
-    synthesizeMouseAtPoint(popupRect.left + 5, popupRect.top - 10, { type: "mousemove" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position after mousemove over button should not change");
-
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top + 10, { type: "mousemove" });
-
-    // Dragging above the popup scrolls it up.
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" });
-    ok(popup.scrollBox.scrollTop < scrollPos - 5, "scroll position at drag up");
-
-    // Dragging below the popup scrolls it down.
-    scrollPos = popup.scrollBox.scrollTop;
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
-    ok(popup.scrollBox.scrollTop > scrollPos + 5, "scroll position at drag down");
-
-    // Releasing the mouse button and moving the mouse does not change the scroll position.
-    scrollPos = popup.scrollBox.scrollTop;
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position at mouseup should not change");
-
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position at mousemove after mouseup should not change");
-
-    // Now check dragging with a mousedown on an item
-    let menuRect = popup.childNodes[4].getBoundingClientRect();
-    synthesizeMouseAtPoint(menuRect.left + 5, menuRect.top + 5, { type: "mousedown" });
-
-    // Dragging below the popup scrolls it down.
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
-    ok(popup.scrollBox.scrollTop > scrollPos + 5, "scroll position at drag down from item");
-
-    // Dragging above the popup scrolls it up.
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position at drag up from item");
-
-    scrollPos = popup.scrollBox.scrollTop;
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position at mouseup should not change");
-
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
-    is(popup.scrollBox.scrollTop, scrollPos, "scroll position at mousemove after mouseup should not change");
-
-    menulist.open = false;
-
-    let mouseMoveTarget = null;
-    popup.childNodes[4].click();
-    addEventListener("mousemove", function checkMouseMove(event) {
-      mouseMoveTarget = event.target;
-    }, {once: true});
-    synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
-    isnot(mouseMoveTarget, popup, "clicking on item when popup closed doesn't start dragging");
-
-    SimpleTest.finish();
-  });
 
+  let shownPromise = waitForEvent(menulist, "popupshown");
   menulist.open = true;
+  await shownPromise;
+
+  let popup = menulist.menupopup;
+  let getScrollPos = () => popup.scrollBox.scrollbox.scrollTop;
+  let scrollPos = getScrollPos();
+  let popupRect = popup.getBoundingClientRect();
+
+  // First, check that scrolling does not occur when the mouse is moved over the
+  // anchor button but not the popup yet.
+  synthesizeMouseAtPoint(popupRect.left + 5, popupRect.top - 10, { type: "mousemove" });
+  is(getScrollPos(), scrollPos, "scroll position after mousemove over button should not change");
+
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top + 10, { type: "mousemove" });
+
+  // Dragging above the popup scrolls it up.
+  let scrolledPromise = waitForEvent(popup, "scroll", false,
+    () => getScrollPos() < scrollPos - 5);
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" });
+  await scrolledPromise;
+  ok(true, "scroll position at drag up");
+
+  // Dragging below the popup scrolls it down.
+  scrollPos = getScrollPos();
+  scrolledPromise = waitForEvent(popup, "scroll", false,
+    () => getScrollPos() > scrollPos + 5);
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
+  await scrolledPromise;
+  ok(true, "scroll position at drag down");
+
+  // Releasing the mouse button and moving the mouse does not change the scroll position.
+  scrollPos = getScrollPos();
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" });
+  is(getScrollPos(), scrollPos, "scroll position at mouseup should not change");
+
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
+  is(getScrollPos(), scrollPos, "scroll position at mousemove after mouseup should not change");
+
+  // Now check dragging with a mousedown on an item. Make sure the element is
+  // visible, as the asynchronous scrolling may have moved it out of view.
+  popup.childNodes[4].scrollIntoView({ block: "nearest", behavior: "instant" });
+  let menuRect = popup.childNodes[4].getBoundingClientRect();
+  synthesizeMouseAtPoint(menuRect.left + 5, menuRect.top + 5, { type: "mousedown" });
+
+  // Dragging below the popup scrolls it down.
+  scrolledPromise = waitForEvent(popup, "scroll", false,
+    () => getScrollPos() > scrollPos + 5);
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
+  await scrolledPromise;
+  ok(true, "scroll position at drag down from item");
+
+  // Dragging above the popup scrolls it up.
+  scrollPos = getScrollPos();
+  scrolledPromise = waitForEvent(popup, "scroll", false,
+    () => getScrollPos() < scrollPos - 5);
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.top - 20, { type: "mousemove" });
+  await scrolledPromise;
+  ok(true, "scroll position at drag up from item");
+
+  scrollPos = getScrollPos();
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 25, { type: "mouseup" });
+  is(getScrollPos(), scrollPos, "scroll position at mouseup should not change");
+
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
+  is(getScrollPos(), scrollPos, "scroll position at mousemove after mouseup should not change");
+
+  menulist.open = false;
+
+  let mouseMoveTarget = null;
+  popup.childNodes[4].click();
+  addEventListener("mousemove", function checkMouseMove(event) {
+    mouseMoveTarget = event.target;
+  }, {once: true});
+  synthesizeMouseAtPoint(popupRect.left + 20, popupRect.bottom + 20, { type: "mousemove" });
+  isnot(mouseMoveTarget, popup, "clicking on item when popup closed doesn't start dragging");
+
+  SimpleTest.finish();
 }
 
 ]]>

toolkit/content/tests/chrome/test_mousescroll.xul

@@ -149,7 +149,7 @@ function* testRichListbox(id)
 
 function* testArrowScrollbox(id)
 {
-  var scrollbox = document.getElementById(id)._scrollbox;
+  var scrollbox = document.getElementById(id).scrollbox;
   var orient = scrollbox.getAttribute("orient");
 
   function* helper(aStart, aDelta, aDeltaMode, aExpected)

toolkit/content/tests/chrome/window_largemenu.xul

@@ -103,7 +103,7 @@ function popupShown()
 
   var popup = document.getElementById("popup");
   var rect = popup.getBoundingClientRect();
-  var scrollbox = document.getAnonymousNodes(popup)[0]._scrollbox;
+  var scrollbox = document.getAnonymousNodes(popup)[0].scrollbox;
   var expectedScrollPos = 0;
 
   if (gTestIndex == 0) {

toolkit/content/widgets/popup.xml

@@ -265,9 +265,10 @@
 
   <binding id="popup-scrollbars" extends="chrome://global/content/bindings/popup.xml#popup">
     <content>
-      <xul:scrollbox class="popup-internal-box" flex="1" orient="vertical" style="overflow: auto;">
+      <xul:arrowscrollbox class="popup-internal-box" flex="1" orient="vertical"
+                          smoothscroll="false">
         <children/>
-      </xul:scrollbox>
+      </xul:arrowscrollbox>
     </content>
     <implementation>
       <field name="AUTOSCROLL_INTERVAL">25</field>
@@ -368,11 +369,11 @@
           if (this._draggingState == this.DRAG_OVER_POPUP &&
               (event.screenY <= popupRect.top || event.screenY >= popupRect.bottom)) {
             let scrollAmount = event.screenY <= popupRect.top ? -1 : 1;
-            this.scrollBox.scrollByIndex(scrollAmount);
+            this.scrollBox.scrollByIndex(scrollAmount, true);
 
             let win = this.ownerGlobal;
             this._scrollTimer = win.setInterval(() => {
-              this.scrollBox.scrollByIndex(scrollAmount);
+              this.scrollBox.scrollByIndex(scrollAmount, true);
             }, this.AUTOSCROLL_INTERVAL);
           }
         }

toolkit/content/widgets/scrollbox.xml

@@ -66,7 +66,7 @@
         }
       ]]></destructor>
 
-      <field name="_scrollbox">
+      <field name="scrollbox">
         document.getAnonymousElementByAttribute(this, "anonid", "scrollbox");
       </field>
       <field name="_scrollButtonUp">
@@ -153,29 +153,29 @@
 
       <property name="scrollBoxObject" readonly="true">
         <getter><![CDATA[
-          return this._scrollbox.boxObject;
+          return this.scrollbox.boxObject;
         ]]></getter>
       </property>
 
       <property name="scrollClientRect" readonly="true">
         <getter><![CDATA[
-          return this._scrollbox.getBoundingClientRect();
+          return this.scrollbox.getBoundingClientRect();
         ]]></getter>
       </property>
 
       <property name="scrollClientSize" readonly="true">
         <getter><![CDATA[
           return this.orient == "vertical" ?
-                 this._scrollbox.clientHeight :
-                 this._scrollbox.clientWidth;
+                 this.scrollbox.clientHeight :
+                 this.scrollbox.clientWidth;
         ]]></getter>
       </property>
 
       <property name="scrollSize" readonly="true">
         <getter><![CDATA[
           return this.orient == "vertical" ?
-                 this._scrollbox.scrollHeight :
-                 this._scrollbox.scrollWidth;
+                 this.scrollbox.scrollHeight :
+                 this.scrollbox.scrollWidth;
         ]]></getter>
       </property>
 
@@ -193,8 +193,8 @@
       <property name="scrollPosition" readonly="true">
         <getter><![CDATA[
           return this.orient == "vertical" ?
-                 this._scrollbox.scrollTop :
-                 this._scrollbox.scrollLeft;
+                 this.scrollbox.scrollTop :
+                 this.scrollbox.scrollLeft;
         ]]></getter>
       </property>
 
@@ -204,7 +204,7 @@
 
       <field name="_isRTLScrollbox"><![CDATA[
         this.orient != "vertical" &&
-        document.defaultView.getComputedStyle(this._scrollbox).direction == "rtl";
+        document.defaultView.getComputedStyle(this.scrollbox).direction == "rtl";
       ]]></field>
 
       <method name="_onButtonClick">
@@ -298,7 +298,8 @@
             window.cancelAnimationFrame(this._ensureElementIsVisibleAnimationFrame);
           }
           this._ensureElementIsVisibleAnimationFrame = window.requestAnimationFrame(() => {
-            element.scrollIntoView({ behavior: aInstant ? "instant" : "auto" });
+            element.scrollIntoView({ block: "nearest",
+                                     behavior: aInstant ? "instant" : "auto" });
             this._ensureElementIsVisibleAnimationFrame = 0;
           });
         ]]></body>
@@ -538,7 +539,7 @@
         <body><![CDATA[
           let scrollOptions = { behavior: aInstant ? "instant" : "auto" };
           scrollOptions[this._startEndProps[0]] = aPixels;
-          this._scrollbox.scrollBy(scrollOptions);
+          this.scrollbox.scrollBy(scrollOptions);
         ]]></body>
       </method>
 
@@ -564,6 +565,11 @@
           // getBoundsWithoutFlushing.
           window.requestAnimationFrame(() => {
             setTimeout(() => {
+              if (!this._startEndProps) {
+                // We've been destroyed in the meantime.
+                return;
+              }
+
               this._scrollButtonUpdatePending = false;
 
               let scrolledToStart = false;
@@ -584,11 +590,11 @@
                 }
 
                 if (leftOrTopElement &&
-                    leftOrTopEdge(leftOrTopElement) >= leftOrTopEdge(this._scrollbox)) {
+                    leftOrTopEdge(leftOrTopElement) >= leftOrTopEdge(this.scrollbox)) {
                   scrolledToStart = !this._isRTLScrollbox;
                   scrolledToEnd = this._isRTLScrollbox;
                 } else if (rightOrBottomElement &&
-                           rightOrBottomEdge(rightOrBottomElement) <= rightOrBottomEdge(this._scrollbox)) {
+                           rightOrBottomEdge(rightOrBottomElement) <= rightOrBottomEdge(this.scrollbox)) {
                   scrolledToStart = this._isRTLScrollbox;
                   scrolledToEnd = !this._isRTLScrollbox;
                 }

toolkit/content/xul.css

@@ -636,6 +636,17 @@ menulist > menupopup > menuitem {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic-noaccel");
 }
 
+menulist > menupopup > .popup-internal-box > .scrollbutton-up,
+menulist > menupopup > .popup-internal-box > .arrowscrollbox-overflow-start-indicator,
+menulist > menupopup > .popup-internal-box > .arrowscrollbox-overflow-end-indicator,
+menulist > menupopup > .popup-internal-box > .scrollbutton-down {
+  display: none;
+}
+
+menulist > menupopup > .popup-internal-box > .arrowscrollbox-scrollbox {
+  overflow: auto;
+}
+
 dropmarker > .dropmarker-icon {
   pointer-events: none;
 }

toolkit/modules/SelectParentHelper.jsm

@@ -245,7 +245,7 @@ var SelectParentHelper = {
         return;
       }
 
-      let scrollBox = currentMenulist.menupopup.scrollBox;
+      let scrollBox = currentMenulist.menupopup.scrollBox.scrollbox;
       let scrollTop = scrollBox.scrollTop;
 
       let options = msg.data.options;