Bug 1472557 - Remove the "scrollbox" anonymous element from "richlistbox". r=bgrins

Differential Revision: https://phabricator.services.mozilla.com/D15388 --HG-- extra : source : b46be9dd9fe019870b2e33b26db8204db79aad23
2018-12-30 13:48:45 +00:00 · 2018-12-30 13:48:45 +00:00 · 55e0dac60d
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -624,7 +624,7 @@ html|input.urlbar-input {

 /* Never show a scrollbar for the Location Bar popup.  This overrides the
   richlistbox inline overflow: auto style.*/
-#PopupAutoCompleteRichResult > richlistbox > scrollbox {
+#PopupAutoCompleteRichResult > richlistbox {
  overflow: hidden !important;
 }

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@ -150,11 +150,8 @@ button > hbox > label {

 /* Category List */

-#categories > scrollbox {
+#categories {
  overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */
-}
-
-#categories > scrollbox > box {
  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
 }

--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@ -1503,7 +1503,7 @@ fuzzy-if(!contentSameGfxBackendAsCanvas,0-128,0-91) random-if(d2d) skip-if(azure
 fuzzy-if(skiaContent,0-4,0-5) == 557087-1.html 557087-ref.html
 fuzzy-if(skiaContent&&!Android,0-2,0-5) == 557087-2.html 557087-ref.html
 == 557736-1.html 557736-1-ref.html
-!= 558011-1.xul 558011-1-ref.xul
+skip-if(Android) != 558011-1.xul 558011-1-ref.xul
 == 559284-1.html 559284-1-ref.html
 fails-if(Android) == 560455-1.xul 560455-1-ref.xul
 fuzzy-if(skiaContent,0-2,0-5) == 561981-1.html 561981-1-ref.html
--- a/toolkit/content/tests/chrome/test_richlistbox.xul
+++ b/toolkit/content/tests/chrome/test_richlistbox.xul
@ -30,9 +30,7 @@ function getScrollIndexAmount(aDirection) {

 function test_richlistbox()
 {
-  richListBox.minHeight = richListBox.maxHeight = richListBox.height =
-    80 + (80 - richListBox._scrollbox.clientHeight);
-  var height = richListBox._scrollbox.clientHeight;
+  var height = richListBox.clientHeight;
  var item;
  do {
    item = richListBox.appendItem("Test", "");
--- a/toolkit/content/widgets/richlistbox.xml
+++ b/toolkit/content/widgets/richlistbox.xml
@ -14,17 +14,9 @@

  <binding id="richlistbox"
           extends="chrome://global/content/bindings/general.xml#basecontrol">
-    <content>
-      <xul:scrollbox allowevents="true" orient="vertical" anonid="main-box"
-                     flex="1" style="overflow: auto;" xbl:inherits="dir,pack">
-        <children/>
-      </xul:scrollbox>
-    </content>
+    <content allowevents="true" orient="vertical"/>

    <implementation implements="nsIDOMXULMultiSelectControlElement">
-      <field name="_scrollbox">
-        document.getAnonymousElementByAttribute(this, "anonid", "main-box");
-      </field>
      <constructor>
        <![CDATA[
          this._refreshSelection();
@ -471,21 +463,26 @@

      <method name="ensureElementIsVisible">
        <parameter name="aElement"/>
+        <parameter name="aAlignToTop"/>
        <body>
          <![CDATA[
-            if (!aElement)
+            if (!aElement) {
              return;
+            }
+
+            // These calculations assume that there is no padding on the
+            // "richlistbox" element, although there might be a margin.
            var targetRect = aElement.getBoundingClientRect();
-            var scrollRect = this._scrollbox.getBoundingClientRect();
+            var scrollRect = this.getBoundingClientRect();
            var offset = targetRect.top - scrollRect.top;
-            if (offset >= 0) {
+            if (!aAlignToTop && offset >= 0) {
              // scrollRect.bottom wouldn't take a horizontal scroll bar into account
-              let scrollRectBottom = scrollRect.top + this._scrollbox.clientHeight;
+              let scrollRectBottom = scrollRect.top + this.clientHeight;
              offset = targetRect.bottom - scrollRectBottom;
              if (offset <= 0)
                return;
            }
-            this._scrollbox.scrollTop += offset;
+            this.scrollTop += offset;
          ]]>
        </body>
      </method>
@ -495,8 +492,9 @@
        <body>
          <![CDATA[
            var item = this.getItemAtIndex(aIndex);
-            if (item)
-              this._scrollbox.scrollToElement(item);
+            if (item) {
+              this.ensureElementIsVisible(item, true);
+            }
          ]]>
        </body>
      </method>
@ -541,15 +539,15 @@
            // the new current item is at approximately the same position as
            // the existing current item.
            if (this._isItemVisible(this.currentItem))
-              this._scrollbox.scrollBy(0, this._scrollbox.boxObject.height * aDirection);
+              this.scrollBy(0, this.clientHeight * aDirection);

            // Figure out, how many items fully fit into the view port
            // (including the currently selected one), and determine
            // the index of the first one lying (partially) outside
-            var height = this._scrollbox.boxObject.height;
+            var height = this.clientHeight;
            var startBorder = this.currentItem.boxObject.y;
            if (aDirection == -1)
-              startBorder += this.currentItem.boxObject.height;
+              startBorder += this.currentItem.clientHeight;

            var index = this.currentIndex;
            for (var ix = index; 0 <= ix && ix < children.length; ix += aDirection) {
@ -607,7 +605,7 @@
                if (this.selType != "multiple" && this.selectedCount == 0)
                  this.selectedItem = currentItem;

-                if (this._scrollbox.boxObject.height) {
+                if (this.clientHeight) {
                  this.ensureElementIsVisible(currentItem);
                } else {
                  // XXX hack around a bug in ensureElementIsVisible as it will
@ -670,11 +668,11 @@
            if (!aItem)
              return false;

-            var y = this._scrollbox.scrollTop + this._scrollbox.boxObject.y;
+            var y = this.scrollTop + this.boxObject.y;

            // Partially visible items are also considered visible
-            return (aItem.boxObject.y + aItem.boxObject.height > y) &&
-                   (aItem.boxObject.y < y + this._scrollbox.boxObject.height);
+            return (aItem.boxObject.y + aItem.clientHeight > y) &&
+                   (aItem.boxObject.y < y + this.clientHeight);
          ]]>
        </body>
      </method>
@ -908,7 +906,7 @@
      <handler event="click">
        <![CDATA[
          // clicking into nothing should unselect
-          if (event.originalTarget == this._scrollbox) {
+          if (event.originalTarget == this) {
            this.clearSelection();
            this.currentItem = null;
          }
@ -920,10 +918,10 @@
          // Only handle swipe gestures up and down
          switch (event.direction) {
            case event.DIRECTION_DOWN:
-              this._scrollbox.scrollTop = this._scrollbox.scrollHeight;
+              this.scrollTop = this.scrollHeight;
              break;
            case event.DIRECTION_UP:
-              this._scrollbox.scrollTop = 0;
+              this.scrollTop = 0;
              break;
          }
        ]]>
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@ -595,9 +595,6 @@ panel[type="autocomplete-richlistbox"] {
 .autocomplete-richlistbox {
  -moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistbox");
  -moz-user-focus: ignore;
-}
-
-.autocomplete-richlistbox > scrollbox {
  overflow-x: hidden !important;
 }

--- a/toolkit/themes/linux/global/richlistbox.css
+++ b/toolkit/themes/linux/global/richlistbox.css
@ -9,6 +9,7 @@ richlistbox {
  margin: 2px 4px;
  background-color: -moz-Field;
  color: -moz-FieldText;
+  overflow: auto;
 }

 richlistbox[disabled="true"] {
--- a/toolkit/themes/linux/mozapps/update/updates.css
+++ b/toolkit/themes/linux/mozapps/update/updates.css
@ -122,9 +122,5 @@ update {
 #historyItems {
  -moz-appearance: listbox;
  height: 200px;
-  margin: 1px 5px 4px 5px;
-}
-
-#historyItems > scrollbox {
-  margin-bottom: 1px;
+  margin: 1px 5px 5px 5px;
 }
--- a/toolkit/themes/osx/global/richlistbox.css
+++ b/toolkit/themes/osx/global/richlistbox.css
@ -9,6 +9,7 @@ richlistbox {
  margin: 2px 4px;
  background-color: -moz-Field;
  color: -moz-FieldText;
+  overflow: auto;
 }

 richlistbox[disabled="true"] {
--- a/toolkit/themes/osx/mozapps/update/updates.css
+++ b/toolkit/themes/osx/mozapps/update/updates.css
@ -165,9 +165,5 @@ update {
 #historyItems {
  -moz-appearance: listbox;
  height: 200px;
-  margin: 1px 5px 4px 5px;
-}
-
-#historyItems > scrollbox {
-  margin-bottom: 1px;
+  margin: 1px 5px 5px 5px;
 }
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@ -13,7 +13,7 @@
  min-height: 39px;
 }

-.view-pane > .list > scrollbox {
+.view-pane > .list {
  padding-right: 24px;
  padding-left: 24px;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@ -603,8 +603,7 @@ xul|*.radio-label-box {
 *|*#categories {
  -moz-appearance: none;
  background-color: initial; /* override the background-color set on all richlistboxes in common.inc.css */
-  padding-top: 70px;
-  margin: 0;
+  margin: 70px 0 0;
  border-width: 0;
  width: 240px;
 }
--- a/toolkit/themes/windows/global/richlistbox.css
+++ b/toolkit/themes/windows/global/richlistbox.css
@ -9,6 +9,7 @@ richlistbox {
  margin: 2px 4px;
  background-color: -moz-Field;
  color: -moz-FieldText;
+  overflow: auto;
 }

 richlistbox[disabled="true"] {
--- a/toolkit/themes/windows/mozapps/update/updates.css
+++ b/toolkit/themes/windows/mozapps/update/updates.css
@ -141,9 +141,6 @@ update {
 #historyItems {
  -moz-appearance: listbox;
  height: 200px;
-  margin: 1px 5px 4px 5px;
-}
-
-#historyItems > scrollbox {
+  margin: 1px 5px 5px 5px;
  margin-bottom: 1px;
 }