/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- / /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ /* 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"; dump("###################################### forms.js loaded\n"); let Ci = Components.interfaces; let Cc = Components.classes; let Cu = Components.utils; Cu.import("resource://gre/modules/Services.jsm"); Cu.import('resource://gre/modules/XPCOMUtils.jsm'); XPCOMUtils.defineLazyServiceGetter(Services, "fm", "@mozilla.org/focus-manager;1", "nsIFocusManager"); XPCOMUtils.defineLazyGetter(this, "domWindowUtils", function () { return content.QueryInterface(Ci.nsIInterfaceRequestor) .getInterface(Ci.nsIDOMWindowUtils); }); const RESIZE_SCROLL_DELAY = 20; let HTMLDocument = Ci.nsIDOMHTMLDocument; let HTMLHtmlElement = Ci.nsIDOMHTMLHtmlElement; let HTMLBodyElement = Ci.nsIDOMHTMLBodyElement; let HTMLIFrameElement = Ci.nsIDOMHTMLIFrameElement; let HTMLInputElement = Ci.nsIDOMHTMLInputElement; let HTMLTextAreaElement = Ci.nsIDOMHTMLTextAreaElement; let HTMLSelectElement = Ci.nsIDOMHTMLSelectElement; let HTMLOptGroupElement = Ci.nsIDOMHTMLOptGroupElement; let HTMLOptionElement = Ci.nsIDOMHTMLOptionElement; let FormVisibility = { /** * Searches upwards in the DOM for an element that has been scrolled. * * @param {HTMLElement} node element to start search at. * @return {Window|HTMLElement|Null} null when none are found window/element otherwise. */ findScrolled: function fv_findScrolled(node) { let win = node.ownerDocument.defaultView; while (!(node instanceof HTMLBodyElement)) { // We can skip elements that have not been scrolled. // We only care about top now remember to add the scrollLeft // check if we decide to care about the X axis. if (node.scrollTop !== 0) { // the element has been scrolled so we may need to adjust // where we think the root element is located. // // Otherwise it may seem visible but be scrolled out of the viewport // inside this scrollable node. return node; } else { // this node does not effect where we think // the node is even if it is scrollable it has not hidden // the element we are looking for. node = node.parentNode; continue; } } // we also care about the window this is the more // common case where the content is larger then // the viewport/screen. if (win.scrollMaxX || win.scrollMaxY) { return win; } return null; }, /** * Checks if "top and "bottom" points of the position is visible. * * @param {Number} top position. * @param {Number} height of the element. * @param {Number} maxHeight of the window. * @return {Boolean} true when visible. */ yAxisVisible: function fv_yAxisVisible(top, height, maxHeight) { return (top > 0 && (top + height) < maxHeight); }, /** * Searches up through the dom for scrollable elements * which are not currently visible (relative to the viewport). * * @param {HTMLElement} element to start search at. * @param {Object} pos .top, .height and .width of element. */ scrollablesVisible: function fv_scrollablesVisible(element, pos) { while ((element = this.findScrolled(element))) { if (element.window && element.self === element) break; // remember getBoundingClientRect does not care // about scrolling only where the element starts // in the document. let offset = element.getBoundingClientRect(); // the top of both the scrollable area and // the form element itself are in the same document. // We adjust the "top" so if the elements coordinates // are relative to the viewport in the current document. let adjustedTop = pos.top - offset.top; let visible = this.yAxisVisible( adjustedTop, pos.height, pos.width ); if (!visible) return false; element = element.parentNode; } return true; }, /** * Verifies the element is visible in the viewport. * Handles scrollable areas, frames and scrollable viewport(s) (windows). * * @param {HTMLElement} element to verify. * @return {Boolean} true when visible. */ isVisible: function fv_isVisible(element) { // scrollable frames can be ignored we just care about iframes... let rect = element.getBoundingClientRect(); let parent = element.ownerDocument.defaultView; // used to calculate the inner position of frames / scrollables. // The intent was to use this information to scroll either up or down. // scrollIntoView(true) will _break_ some web content so we can't do // this today. If we want that functionality we need to manually scroll // the individual elements. let pos = { top: rect.top, height: rect.height, width: rect.width }; let visible = true; do { let frame = parent.frameElement; visible = visible && this.yAxisVisible(pos.top, pos.height, parent.innerHeight) && this.scrollablesVisible(element, pos); // nothing we can do about this now... // In the future we can use this information to scroll // only the elements we need to at this point as we should // have all the details we need to figure out how to scroll. if (!visible) return false; if (frame) { let frameRect = frame.getBoundingClientRect(); pos.top += frameRect.top + frame.clientTop; } } while ( (parent !== parent.parent) && (parent = parent.parent) ); return visible; } }; let FormAssistant = { init: function fa_init() { addEventListener("focus", this, true, false); addEventListener("blur", this, true, false); addEventListener("resize", this, true, false); addEventListener("submit", this, true, false); addEventListener("pagehide", this, true, false); addEventListener("beforeunload", this, true, false); addEventListener("input", this, true, false); addEventListener("keydown", this, true, false); addEventListener("keyup", this, true, false); addMessageListener("Forms:Select:Choice", this); addMessageListener("Forms:Input:Value", this); addMessageListener("Forms:Select:Blur", this); addMessageListener("Forms:SetSelectionRange", this); addMessageListener("Forms:ReplaceSurroundingText", this); addMessageListener("Forms:GetText", this); addMessageListener("Forms:Input:SendKey", this); addMessageListener("Forms:GetContext", this); addMessageListener("Forms:SetComposition", this); addMessageListener("Forms:EndComposition", this); }, ignoredInputTypes: new Set([ 'button', 'file', 'checkbox', 'radio', 'reset', 'submit', 'image', 'range' ]), isKeyboardOpened: false, selectionStart: -1, selectionEnd: -1, textBeforeCursor: "", textAfterCursor: "", scrollIntoViewTimeout: null, _focusedElement: null, _focusCounter: 0, // up one for every time we focus a new element _observer: null, _documentEncoder: null, _editor: null, _editing: false, _ignoreEditActionOnce: false, get focusedElement() { if (this._focusedElement && Cu.isDeadWrapper(this._focusedElement)) this._focusedElement = null; return this._focusedElement; }, set focusedElement(val) { this._focusCounter++; this._focusedElement = val; }, setFocusedElement: function fa_setFocusedElement(element) { let self = this; if (element === this.focusedElement) return; if (this.focusedElement) { this.focusedElement.removeEventListener('mousedown', this); this.focusedElement.removeEventListener('mouseup', this); this.focusedElement.removeEventListener('compositionend', this); if (this._observer) { this._observer.disconnect(); this._observer = null; } if (!element) { this.focusedElement.blur(); } } this._documentEncoder = null; if (this._editor) { // When the nsIFrame of the input element is reconstructed by // CSS restyling, the editor observers are removed. Catch // [nsIEditor.removeEditorObserver] failure exception if that // happens. try { this._editor.removeEditorObserver(this); } catch (e) {} this._editor = null; } if (element) { element.addEventListener('mousedown', this); element.addEventListener('mouseup', this); element.addEventListener('compositionend', this); if (isContentEditable(element)) { this._documentEncoder = getDocumentEncoder(element); } this._editor = getPlaintextEditor(element); if (this._editor) { // Add a nsIEditorObserver to monitor the text content of the focused // element. this._editor.addEditorObserver(this); } // If our focusedElement is removed from DOM we want to handle it properly let MutationObserver = element.ownerDocument.defaultView.MutationObserver; this._observer = new MutationObserver(function(mutations) { var del = [].some.call(mutations, function(m) { return [].some.call(m.removedNodes, function(n) { return n.contains(element); }); }); if (del && element === self.focusedElement) { // item was deleted, fake a blur so all state gets set correctly self.handleEvent({ target: element, type: "blur" }); } }); this._observer.observe(element.ownerDocument.body, { childList: true, subtree: true }); } this.focusedElement = element; }, get documentEncoder() { return this._documentEncoder; }, // Get the nsIPlaintextEditor object of current input field. get editor() { return this._editor; }, // Implements nsIEditorObserver get notification when the text content of // current input field has changed. EditAction: function fa_editAction() { if (this._editing) { return; } else if (this._ignoreEditActionOnce) { this._ignoreEditActionOnce = false; return; } this.sendKeyboardState(this.focusedElement); }, handleEvent: function fa_handleEvent(evt) { let target = evt.target; let range = null; switch (evt.type) { case "focus": if (!target) { break; } // Focusing on Window, Document or iFrame should focus body if (target instanceof HTMLHtmlElement) { target = target.document.body; } else if (target instanceof HTMLDocument) { target = target.body; } else if (target instanceof HTMLIFrameElement) { target = target.contentDocument ? target.contentDocument.body : null; } if (!target) { break; } if (isContentEditable(target)) { this.showKeyboard(this.getTopLevelEditable(target)); this.updateSelection(); break; } if (this.isFocusableElement(target)) { this.showKeyboard(target); this.updateSelection(); } break; case "pagehide": case "beforeunload": // We are only interested to the pagehide and beforeunload events from // the root document. if (target && target != content.document) { break; } // fall through case "blur": case "submit": if (this.focusedElement) { this.hideKeyboard(); this.selectionStart = -1; this.selectionEnd = -1; } break; case 'mousedown': if (!this.focusedElement) { break; } // We only listen for this event on the currently focused element. // When the mouse goes down, note the cursor/selection position this.updateSelection(); break; case 'mouseup': if (!this.focusedElement) { break; } // We only listen for this event on the currently focused element. // When the mouse goes up, see if the cursor has moved (or the // selection changed) since the mouse went down. If it has, we // need to tell the keyboard about it range = getSelectionRange(this.focusedElement); if (range[0] !== this.selectionStart || range[1] !== this.selectionEnd) { this.updateSelection(); } break; case "resize": if (!this.isKeyboardOpened) return; if (this.scrollIntoViewTimeout) { content.clearTimeout(this.scrollIntoViewTimeout); this.scrollIntoViewTimeout = null; } // We may receive multiple resize events in quick succession, so wait // a bit before scrolling the input element into view. if (this.focusedElement) { this.scrollIntoViewTimeout = content.setTimeout(function () { this.scrollIntoViewTimeout = null; if (this.focusedElement && !FormVisibility.isVisible(this.focusedElement)) { scrollSelectionOrElementIntoView(this.focusedElement); } }.bind(this), RESIZE_SCROLL_DELAY); } break; case "input": if (this.focusedElement) { // When the text content changes, notify the keyboard this.updateSelection(); } break; case "keydown": if (!this.focusedElement) { break; } CompositionManager.endComposition(''); // Don't monitor the text change resulting from key event. this._ignoreEditActionOnce = true; // We use 'setTimeout' to wait until the input element accomplishes the // change in selection range. content.setTimeout(function() { this.updateSelection(); }.bind(this), 0); break; case "keyup": if (!this.focusedElement) { break; } CompositionManager.endComposition(''); this._ignoreEditActionOnce = false; break; case "compositionend": if (!this.focusedElement) { break; } CompositionManager.onCompositionEnd(); break; } }, receiveMessage: function fa_receiveMessage(msg) { let target = this.focusedElement; let json = msg.json; // To not break mozKeyboard contextId is optional if ('contextId' in json && json.contextId !== this._focusCounter && json.requestId) { // Ignore messages that are meant for a previously focused element sendAsyncMessage("Forms:SequenceError", { requestId: json.requestId, error: "Expected contextId " + this._focusCounter + " but was " + json.contextId }); return; } if (!target) { switch (msg.name) { case "Forms:GetText": sendAsyncMessage("Forms:GetText:Result:Error", { requestId: json.requestId, error: "No focused element" }); break; } return; } this._editing = true; switch (msg.name) { case "Forms:Input:Value": { CompositionManager.endComposition(''); target.value = json.value; let event = target.ownerDocument.createEvent('HTMLEvents'); event.initEvent('input', true, false); target.dispatchEvent(event); break; } case "Forms:Input:SendKey": CompositionManager.endComposition(''); this._editing = true; let doKeypress = domWindowUtils.sendKeyEvent('keydown', json.keyCode, json.charCode, json.modifiers); if (doKeypress) { domWindowUtils.sendKeyEvent('keypress', json.keyCode, json.charCode, json.modifiers); } domWindowUtils.sendKeyEvent('keyup', json.keyCode, json.charCode, json.modifiers); this._editing = false; if (json.requestId && doKeypress) { sendAsyncMessage("Forms:SendKey:Result:OK", { requestId: json.requestId }); } else if (json.requestId && !doKeypress) { sendAsyncMessage("Forms:SendKey:Result:Error", { requestId: json.requestId, error: "Keydown event got canceled" }); } break; case "Forms:Select:Choice": let options = target.options; let valueChanged = false; if ("index" in json) { if (options.selectedIndex != json.index) { options.selectedIndex = json.index; valueChanged = true; } } else if ("indexes" in json) { for (let i = 0; i < options.length; i++) { let newValue = (json.indexes.indexOf(i) != -1); if (options.item(i).selected != newValue) { options.item(i).selected = newValue; valueChanged = true; } } } // only fire onchange event if any selected option is changed if (valueChanged) { let event = target.ownerDocument.createEvent('HTMLEvents'); event.initEvent('change', true, true); target.dispatchEvent(event); } break; case "Forms:Select:Blur": { this.setFocusedElement(null); break; } case "Forms:SetSelectionRange": { CompositionManager.endComposition(''); let start = json.selectionStart; let end = json.selectionEnd; setSelectionRange(target, start, end); this.updateSelection(); if (json.requestId) { sendAsyncMessage("Forms:SetSelectionRange:Result:OK", { requestId: json.requestId, selectioninfo: this.getSelectionInfo() }); } break; } case "Forms:ReplaceSurroundingText": { CompositionManager.endComposition(''); let selectionRange = getSelectionRange(target); replaceSurroundingText(target, json.text, selectionRange[0], selectionRange[1], json.offset, json.length); if (json.requestId) { sendAsyncMessage("Forms:ReplaceSurroundingText:Result:OK", { requestId: json.requestId, selectioninfo: this.getSelectionInfo() }); } break; } case "Forms:GetText": { let value = isContentEditable(target) ? getContentEditableText(target) : target.value; if (json.offset && json.length) { value = value.substr(json.offset, json.length); } else if (json.offset) { value = value.substr(json.offset); } sendAsyncMessage("Forms:GetText:Result:OK", { requestId: json.requestId, text: value }); break; } case "Forms:GetContext": { let obj = getJSON(target, this._focusCounter); sendAsyncMessage("Forms:GetContext:Result:OK", obj); break; } case "Forms:SetComposition": { CompositionManager.setComposition(target, json.text, json.cursor, json.clauses); sendAsyncMessage("Forms:SetComposition:Result:OK", { requestId: json.requestId, }); break; } case "Forms:EndComposition": { CompositionManager.endComposition(json.text); sendAsyncMessage("Forms:EndComposition:Result:OK", { requestId: json.requestId, }); break; } } this._editing = false; }, showKeyboard: function fa_showKeyboard(target) { if (this.focusedElement === target) return; if (target instanceof HTMLOptionElement) target = target.parentNode; this.setFocusedElement(target); let kbOpened = this.sendKeyboardState(target); if (this.isTextInputElement(target)) this.isKeyboardOpened = kbOpened; }, hideKeyboard: function fa_hideKeyboard() { sendAsyncMessage("Forms:Input", { "type": "blur" }); this.isKeyboardOpened = false; this.setFocusedElement(null); }, isFocusableElement: function fa_isFocusableElement(element) { if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) return true; if (element instanceof HTMLOptionElement && element.parentNode instanceof HTMLSelectElement) return true; return (element instanceof HTMLInputElement && !this.ignoredInputTypes.has(element.type)); }, isTextInputElement: function fa_isTextInputElement(element) { return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || isContentEditable(element); }, getTopLevelEditable: function fa_getTopLevelEditable(element) { function retrieveTopLevelEditable(element) { while (element && !isContentEditable(element)) element = element.parentNode; return element; } return retrieveTopLevelEditable(element) || element; }, sendKeyboardState: function(element) { // FIXME/bug 729623: work around apparent bug in the IME manager // in gecko. let readonly = element.getAttribute("readonly"); if (readonly) { return false; } sendAsyncMessage("Forms:Input", getJSON(element, this._focusCounter)); return true; }, getSelectionInfo: function fa_getSelectionInfo() { let element = this.focusedElement; let range = getSelectionRange(element); let text = isContentEditable(element) ? getContentEditableText(element) : element.value; let textAround = getTextAroundCursor(text, range); let changed = this.selectionStart !== range[0] || this.selectionEnd !== range[1] || this.textBeforeCursor !== textAround.before || this.textAfterCursor !== textAround.after; this.selectionStart = range[0]; this.selectionEnd = range[1]; this.textBeforeCursor = textAround.before; this.textAfterCursor = textAround.after; return { selectionStart: range[0], selectionEnd: range[1], textBeforeCursor: textAround.before, textAfterCursor: textAround.after, changed: changed }; }, // Notify when the selection range changes updateSelection: function fa_updateSelection() { if (!this.focusedElement) { return; } let selectionInfo = this.getSelectionInfo(); if (selectionInfo.changed) { sendAsyncMessage("Forms:SelectionChange", this.getSelectionInfo()); } } }; FormAssistant.init(); function isContentEditable(element) { if (!element) { return false; } if (element.isContentEditable || element.designMode == "on") return true; return element.ownerDocument && element.ownerDocument.designMode == "on"; } function isPlainTextField(element) { if (!element) { return false; } return element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && element.mozIsTextField(false)); } function getJSON(element, focusCounter) { // has a nested anonymous element that // takes focus on behalf of the number control when someone tries to focus // the number control. If |element| is such an anonymous text control then we // need it's number control here in order to get the correct 'type' etc.: element = element.ownerNumberControl || element; let type = element.type || ""; let value = element.value || ""; let max = element.max || ""; let min = element.min || ""; // Treat contenteditble element as a special text area field if (isContentEditable(element)) { type = "textarea"; value = getContentEditableText(element); } // Until the input type=date/datetime/range have been implemented // let's return their real type even if the platform returns 'text' let attributeType = element.getAttribute("type") || ""; if (attributeType) { var typeLowerCase = attributeType.toLowerCase(); switch (typeLowerCase) { case "datetime": case "datetime-local": case "range": type = typeLowerCase; break; } } // Gecko has some support for @inputmode but behind a preference and // it is disabled by default. // Gaia is then using @x-inputmode has its proprietary way to set // inputmode for fields. This shouldn't be used outside of pre-installed // apps because the attribute is going to disappear as soon as a definitive // solution will be find. let inputmode = element.getAttribute('x-inputmode'); if (inputmode) { inputmode = inputmode.toLowerCase(); } else { inputmode = ''; } let range = getSelectionRange(element); let textAround = getTextAroundCursor(value, range); return { "contextId": focusCounter, "type": type.toLowerCase(), "choices": getListForElement(element), "value": value, "inputmode": inputmode, "selectionStart": range[0], "selectionEnd": range[1], "max": max, "min": min, "lang": element.lang || "", "textBeforeCursor": textAround.before, "textAfterCursor": textAround.after }; } function getTextAroundCursor(value, range) { let textBeforeCursor = range[0] < 100 ? value.substr(0, range[0]) : value.substr(range[0] - 100, 100); let textAfterCursor = range[1] + 100 > value.length ? value.substr(range[0], value.length) : value.substr(range[0], range[1] - range[0] + 100); return { before: textBeforeCursor, after: textAfterCursor }; } function getListForElement(element) { if (!(element instanceof HTMLSelectElement)) return null; let optionIndex = 0; let result = { "multiple": element.multiple, "choices": [] }; // Build up a flat JSON array of the choices. // In HTML, it's possible for select element choices to be under a // group header (but not recursively). We distinguish between headers // and entries using the boolean "list.group". let children = element.children; for (let i = 0; i < children.length; i++) { let child = children[i]; if (child instanceof HTMLOptGroupElement) { result.choices.push({ "group": true, "text": child.label || child.firstChild.data, "disabled": child.disabled }); let subchildren = child.children; for (let j = 0; j < subchildren.length; j++) { let subchild = subchildren[j]; result.choices.push({ "group": false, "inGroup": true, "text": subchild.text, "disabled": child.disabled || subchild.disabled, "selected": subchild.selected, "optionIndex": optionIndex++ }); } } else if (child instanceof HTMLOptionElement) { result.choices.push({ "group": false, "inGroup": false, "text": child.text, "disabled": child.disabled, "selected": child.selected, "optionIndex": optionIndex++ }); } } return result; }; // Create a plain text document encode from the focused element. function getDocumentEncoder(element) { let encoder = Cc["@mozilla.org/layout/documentEncoder;1?type=text/plain"] .createInstance(Ci.nsIDocumentEncoder); let flags = Ci.nsIDocumentEncoder.SkipInvisibleContent | Ci.nsIDocumentEncoder.OutputRaw | // Bug 902847. Don't trim trailing spaces of a line. Ci.nsIDocumentEncoder.OutputDontRemoveLineEndingSpaces | Ci.nsIDocumentEncoder.OutputLFLineBreak | Ci.nsIDocumentEncoder.OutputNonTextContentAsPlaceholder; encoder.init(element.ownerDocument, "text/plain", flags); return encoder; } // Get the visible content text of a content editable element function getContentEditableText(element) { if (!element || !isContentEditable(element)) { return null; } let doc = element.ownerDocument; let range = doc.createRange(); range.selectNodeContents(element); let encoder = FormAssistant.documentEncoder; encoder.setRange(range); return encoder.encodeToString(); } function getSelectionRange(element) { let start = 0; let end = 0; if (isPlainTextField(element)) { // Get the selection range of and