import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

toolkit/modules/SelectContentHelper.jsm

@@ -0,0 +1,246 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
+                                  "resource://gre/modules/BrowserUtils.jsm");
+XPCOMUtils.defineLazyServiceGetter(this, "DOMUtils",
+                                   "@mozilla.org/inspector/dom-utils;1", "inIDOMUtils");
+XPCOMUtils.defineLazyModuleGetter(this, "DeferredTask",
+                                  "resource://gre/modules/DeferredTask.jsm");
+
+const kStateActive = 0x00000001; // NS_EVENT_STATE_ACTIVE
+const kStateHover = 0x00000004; // NS_EVENT_STATE_HOVER
+
+// A process global state for whether or not content thinks
+// that a <select> dropdown is open or not. This is managed
+// entirely within this module, and is read-only accessible
+// via SelectContentHelper.open.
+var gOpen = false;
+
+this.EXPORTED_SYMBOLS = [
+  "SelectContentHelper"
+];
+
+this.SelectContentHelper = function (aElement, aOptions, aGlobal) {
+  this.element = aElement;
+  this.initialSelection = aElement[aElement.selectedIndex] || null;
+  this.global = aGlobal;
+  this.closedWithEnter = false;
+  this.isOpenedViaTouch = aOptions.isOpenedViaTouch;
+  this.init();
+  this.showDropDown();
+  this._updateTimer = new DeferredTask(this._update.bind(this), 0);
+}
+
+Object.defineProperty(SelectContentHelper, "open", {
+  get: function() {
+    return gOpen;
+  },
+});
+
+this.SelectContentHelper.prototype = {
+  init: function() {
+    this.global.addMessageListener("Forms:SelectDropDownItem", this);
+    this.global.addMessageListener("Forms:DismissedDropDown", this);
+    this.global.addMessageListener("Forms:MouseOver", this);
+    this.global.addMessageListener("Forms:MouseOut", this);
+    this.global.addEventListener("pagehide", this);
+    this.global.addEventListener("mozhidedropdown", this);
+    let MutationObserver = this.element.ownerDocument.defaultView.MutationObserver;
+    this.mut = new MutationObserver(mutations => {
+      // Something changed the <select> while it was open, so
+      // we'll poke a DeferredTask to update the parent sometime
+      // in the very near future.
+      this._updateTimer.arm();
+    });
+    this.mut.observe(this.element, {childList: true, subtree: true});
+  },
+
+  uninit: function() {
+    this.element.openInParentProcess = false;
+    this.global.removeMessageListener("Forms:SelectDropDownItem", this);
+    this.global.removeMessageListener("Forms:DismissedDropDown", this);
+    this.global.removeMessageListener("Forms:MouseOver", this);
+    this.global.removeMessageListener("Forms:MouseOut", this);
+    this.global.removeEventListener("pagehide", this);
+    this.global.removeEventListener("mozhidedropdown", this);
+    this.element = null;
+    this.global = null;
+    this.mut.disconnect();
+    this._updateTimer.disarm();
+    this._updateTimer = null;
+    gOpen = false;
+  },
+
+  showDropDown: function() {
+    this.element.openInParentProcess = true;
+    let rect = this._getBoundingContentRect();
+    this.global.sendAsyncMessage("Forms:ShowDropDown", {
+      rect: rect,
+      options: this._buildOptionList(),
+      selectedIndex: this.element.selectedIndex,
+      direction: getComputedStyles(this.element).direction,
+      isOpenedViaTouch: this.isOpenedViaTouch
+    });
+    gOpen = true;
+  },
+
+  _getBoundingContentRect: function() {
+    return BrowserUtils.getElementBoundingScreenRect(this.element);
+  },
+
+  _buildOptionList: function() {
+    return buildOptionListForChildren(this.element);
+  },
+
+  _update() {
+    // The <select> was updated while the dropdown was open.
+    // Let's send up a new list of options.
+    this.global.sendAsyncMessage("Forms:UpdateDropDown", {
+      options: this._buildOptionList(),
+      selectedIndex: this.element.selectedIndex,
+    });
+  },
+
+  receiveMessage: function(message) {
+    switch (message.name) {
+      case "Forms:SelectDropDownItem":
+        this.element.selectedIndex = message.data.value;
+        this.closedWithEnter = message.data.closedWithEnter;
+        break;
+
+      case "Forms:DismissedDropDown":
+        let selectedOption = this.element.item(this.element.selectedIndex);
+        if (this.initialSelection != selectedOption) {
+          let win = this.element.ownerDocument.defaultView;
+          // For ordering of events, we're using non-e10s as our guide here,
+          // since the spec isn't exactly clear. In non-e10s, we fire:
+          // mousedown, mouseup, input, change, click if the user clicks
+          // on an element in the dropdown. If the user uses the keyboard
+          // to select an element in the dropdown, we only fire input and
+          // change events.
+          if (!this.closedWithEnter) {
+            const MOUSE_EVENTS = ["mousedown", "mouseup"];
+            for (let eventName of MOUSE_EVENTS) {
+              let mouseEvent = new win.MouseEvent(eventName, {
+                view: win,
+                bubbles: true,
+                cancelable: true,
+              });
+              selectedOption.dispatchEvent(mouseEvent);
+            }
+            DOMUtils.removeContentState(this.element, kStateActive);
+          }
+
+          let inputEvent = new win.UIEvent("input", {
+            bubbles: true,
+          });
+          this.element.dispatchEvent(inputEvent);
+
+          let changeEvent = new win.Event("change", {
+            bubbles: true,
+          });
+          this.element.dispatchEvent(changeEvent);
+
+          if (!this.closedWithEnter) {
+            let mouseEvent = new win.MouseEvent("click", {
+              view: win,
+              bubbles: true,
+              cancelable: true,
+            });
+            selectedOption.dispatchEvent(mouseEvent);
+          }
+        }
+
+        this.uninit();
+        break;
+
+      case "Forms:MouseOver":
+        DOMUtils.setContentState(this.element, kStateHover);
+        break;
+
+      case "Forms:MouseOut":
+        DOMUtils.removeContentState(this.element, kStateHover);
+        break;
+
+    }
+  },
+
+  handleEvent: function(event) {
+    switch (event.type) {
+      case "pagehide":
+        if (this.element.ownerDocument === event.target) {
+          this.global.sendAsyncMessage("Forms:HideDropDown", {});
+          this.uninit();
+        }
+        break;
+      case "mozhidedropdown":
+        if (this.element === event.target) {
+          this.global.sendAsyncMessage("Forms:HideDropDown", {});
+          this.uninit();
+        }
+        break;
+    }
+  }
+
+}
+
+function getComputedStyles(element) {
+  return element.ownerDocument.defaultView.getComputedStyle(element);
+}
+
+function buildOptionListForChildren(node) {
+  let result = [];
+
+  let win = node.ownerDocument.defaultView;
+
+  for (let child of node.children) {
+    let tagName = child.tagName.toUpperCase();
+
+    if (tagName == 'OPTION' || tagName == 'OPTGROUP') {
+      if (child.hidden) {
+        continue;
+      }
+
+      let textContent =
+        tagName == 'OPTGROUP' ? child.getAttribute("label")
+                              : child.text;
+      if (textContent == null) {
+        textContent = "";
+      }
+
+      let cs = getComputedStyles(child);
+
+      let info = {
+        index: child.index,
+        tagName: tagName,
+        textContent: textContent,
+        disabled: child.disabled,
+        display: cs.display,
+        // We need to do this for every option element as each one can have
+        // an individual style set for direction
+        textDirection: cs.direction,
+        tooltip: child.title,
+        // XXX this uses a highlight color when this is the selected element.
+        // We need to suppress such highlighting in the content process to get
+        // the option's correct unhighlighted color here.
+        // We also need to detect default color vs. custom so that a standard
+        // color does not override color: menutext in the parent.
+        // backgroundColor: computedStyle.backgroundColor,
+        // color: computedStyle.color,
+        children: tagName == 'OPTGROUP' ? buildOptionListForChildren(child) : []
+      };
+      result.push(info);
+    }
+  }
+  return result;
+}