Bug 1671000 - When activating items in menu popups, stay clear of overlapping scroll buttons. r=mstange

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

browser/components/places/content/places-menupopup.js

@@ -27,7 +27,7 @@
         "dragend",
       ];
       for (let event_name of event_names) {
-        this.addEventListener(event_name, ev => this[`on_${event_name}`](ev));
+        this.addEventListener(event_name, this);
       }
     }
 
@@ -360,6 +360,10 @@
     }
 
     on_DOMMenuItemActive(event) {
+      if (super.on_DOMMenuItemActive) {
+        super.on_DOMMenuItemActive(event);
+      }
+
       let elt = event.target;
       if (elt.parentNode != this) {
         return;
@@ -575,7 +579,7 @@
         "popuphidden",
       ];
       for (let event_name of event_names) {
-        this.addEventListener(event_name, ev => this[`on_${event_name}`](ev));
+        this.addEventListener(event_name, this);
       }
     }
 

toolkit/content/widgets/menupopup.js

@@ -57,6 +57,8 @@
       });
 
       this.attachShadow({ mode: "open" });
+
+      this.addEventListener("DOMMenuItemActive", this);
     }
 
     connectedCallback() {
@@ -65,7 +67,7 @@
       }
 
       this.hasConnected = true;
-      if (this.parentNode && this.parentNode.localName == "menulist") {
+      if (this.parentNode?.localName == "menulist") {
         this._setUpMenulistPopup();
       }
     }
@@ -258,6 +260,31 @@
         this._scrollTimer = 0;
       }
     }
+
+    on_DOMMenuItemActive(event) {
+      // Scroll buttons may overlap the active item. In that case, scroll
+      // further to stay clear of the buttons.
+      if (
+        this.parentNode?.localName == "menulist" ||
+        !this.scrollBox.hasAttribute("overflowing")
+      ) {
+        return;
+      }
+      let item = event.target;
+      if (item.parentNode != this) {
+        return;
+      }
+      let itemRect = item.getBoundingClientRect();
+      let buttonRect = this.scrollBox._scrollButtonUp.getBoundingClientRect();
+      if (buttonRect.bottom > itemRect.top) {
+        this.scrollBox.scrollByPixels(itemRect.top - buttonRect.bottom, true);
+      } else {
+        buttonRect = this.scrollBox._scrollButtonDown.getBoundingClientRect();
+        if (buttonRect.top < itemRect.bottom) {
+          this.scrollBox.scrollByPixels(itemRect.bottom - buttonRect.top, true);
+        }
+      }
+    }
   }
 
   customElements.define("menupopup", MozMenuPopup);