Bug 1355078 - Restore scroll position after updating select popup. r=mossop
authorJared Wein <jwein@mozilla.com>
Tue, 11 Apr 2017 01:36:07 -0400
changeset 400601 64ba6efd97222a83c08d56f0f2e772aec688ec8c
parent 400600 7545a6eab53bfd974ba81a9adc8f4c86cd71c2e6
child 400602 bb0c3ac257626ab547739bdd8ea6e2ef915f9017
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmossop
bugs1355078
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1355078 - Restore scroll position after updating select popup. r=mossop 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);