/* 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; }