Bug 1355078 - Restore scroll position after updating select popup. r=mossop a=gchang
authorJared Wein <jwein@mozilla.com>
Tue, 11 Apr 2017 01:36:07 -0400
changeset 396027 db1d45543c1b1b8585c7f907a91dccf2201223a8
parent 396026 a50aaf501b398cd6a16fe8e7e9b14bb7e14f3cb6
child 396028 8619db383886e1237486792ff33d5eb331cdec7d
push id1468
push userasasaki@mozilla.com
push dateMon, 05 Jun 2017 19:31:07 +0000
treeherdermozilla-release@0641fc6ee9d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop, gchang
bugs1355078
milestone54.0
Bug 1355078 - Restore scroll position after updating select popup. r=mossop a=gchang MozReview-Commit-ID: 7HfuUCymDz
browser/base/content/test/forms/browser_selectpopup_colors.js
toolkit/modules/SelectParentHelper.jsm
--- a/browser/base/content/test/forms/browser_selectpopup_colors.js
+++ b/browser/base/content/test/forms/browser_selectpopup_colors.js
@@ -142,16 +142,29 @@ const SELECT_STYLE_OF_OPTION_CHANGES_AFT
 const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW =
   "<html><head><style>" +
   "  select { color: transparent; text-shadow: 0 0 0 #303030; }" +
   "</style></head><body><select id='one'>" +
   '  <option>{"color": "rgba(0, 0, 0, 0)", "backgroundColor": "rgba(0, 0, 0, 0)", "textShadow": "rgb(48, 48, 48) 0px 0px 0px"}</option>' +
   '  <option selected="true">{"end": "true"}</option>' +
   "</select></body></html>";
 
+let SELECT_LONG_WITH_TRANSITION =
+  "<html><head><style>" +
+  "  select { transition: all .2s linear; }" +
+  "  select:focus { color: purple; }" +
+  "</style></head><body><select id='one'>";
+for (let i = 0; i < 75; i++) {
+  SELECT_LONG_WITH_TRANSITION +=
+    '  <option>{"color": "rgb(128, 0, 128)", "backgroundColor": "rgba(0, 0, 0, 0)"}</option>';
+}
+SELECT_LONG_WITH_TRANSITION +=
+    '  <option selected="true">{"end": "true"}</option>' +
+  "</select></body></html>";
+
 function getSystemColor(color) {
   // Need to convert system color to RGB color.
   let textarea = document.createElementNS("http://www.w3.org/1999/xhtml", "textarea");
   textarea.style.color = color;
   return getComputedStyle(textarea).color;
 }
 
 function testOptionColors(index, item, menulist) {
@@ -252,19 +265,20 @@ function* testSelectColors(select, itemC
 
   ok(!child.selected, "The first child should not be selected");
   while (child) {
     testOptionColors(idx, child, menulist);
     idx++;
     child = child.nextSibling;
   }
 
-  yield hideSelectPopup(selectPopup, "escape");
-
-  yield BrowserTestUtils.removeTab(tab);
+  if (!options.leaveOpen) {
+    yield hideSelectPopup(selectPopup, "escape");
+    yield BrowserTestUtils.removeTab(tab);
+  }
 }
 
 add_task(function* setup() {
   yield SpecialPowers.pushPrefEnv({
     "set": [
       ["dom.select_popup_in_parent.enabled", true],
       ["dom.forms.select.customstyling", true]
     ]
@@ -409,8 +423,31 @@ add_task(function* test_transparent_colo
   let options = {
     selectColor: "rgba(0, 0, 0, 0)",
     selectTextShadow: "rgb(48, 48, 48) 0px 0px 0px",
     selectBgColor: "rgb(255, 255, 255)"
   };
 
   yield testSelectColors(SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW, 2, options);
 });
+
+add_task(function* test_select_with_transition_doesnt_lose_scroll_position() {
+  let options = {
+    selectColor: "rgb(128, 0, 128)",
+    selectBgColor: "rgb(255, 255, 255)",
+    waitForComputedStyle: {
+      property: "color",
+      value: "rgb(128, 0, 128)"
+    },
+    leaveOpen: true
+  };
+
+  yield testSelectColors(SELECT_LONG_WITH_TRANSITION, 76, options);
+
+  let menulist = document.getElementById("ContentSelectDropdown");
+  let selectPopup = menulist.menupopup;
+  let scrollBox = selectPopup.scrollBox;
+  is(scrollBox.scrollTop, scrollBox.scrollTopMax,
+    "The popup should be scrolled to the bottom of the list (where the selected item is)");
+
+  yield hideSelectPopup(selectPopup, "escape");
+  yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -188,29 +188,35 @@ this.SelectParentHelper = {
   receiveMessage(msg) {
     if (msg.name == "Forms:UpdateDropDown") {
       // Sanity check - we'd better know what the currently
       // opened menulist is, and what browser it belongs to...
       if (!currentMenulist || !currentBrowser) {
         return;
       }
 
+      let scrollBox = currentMenulist.menupopup.scrollBox;
+      let scrollTop = scrollBox.scrollTop;
+
       let options = msg.data.options;
       let selectedIndex = msg.data.selectedIndex;
       let uaBackgroundColor = msg.data.uaBackgroundColor;
       let uaColor = msg.data.uaColor;
       let uaSelectBackgroundColor = msg.data.uaSelectBackgroundColor;
       let uaSelectColor = msg.data.uaSelectColor;
       let selectBackgroundColor = msg.data.selectBackgroundColor;
       let selectColor = msg.data.selectColor;
       let selectTextShadow = msg.data.selectTextShadow;
       this.populate(currentMenulist, options, selectedIndex,
                     currentZoom, uaBackgroundColor, uaColor,
                     uaSelectBackgroundColor, uaSelectColor,
                     selectBackgroundColor, selectColor, selectTextShadow);
+
+      // Restore scroll position to what it was prior to the update.
+      scrollBox.scrollTop = scrollTop;
     }
   },
 
   _registerListeners(browser, popup) {
     popup.addEventListener("command", this);
     popup.addEventListener("popuphidden", this);
     popup.addEventListener("mouseover", this);
     popup.addEventListener("mouseout", this);