The Tor Browser: comparison browser/devtools/shared/inplace-editor.js

comparison: browser/devtools/shared/inplace-editor.js

browser/devtools/shared/inplace-editor.js

changeset 0: 6474c204b198

equal deleted inserted replaced

--1:000000000000
+:d03402c1e0e9
+/* -*- Mode: javascript; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/**
+* 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/.
+*
+* Basic use:
+* let spanToEdit = document.getElementById("somespan");
+*
+* editableField({
+*   element: spanToEdit,
+*   done: function(value, commit) {
+*     if (commit) {
+*       spanToEdit.textContent = value;
+*     }
+*   },
+*   trigger: "dblclick"
+* });
+*
+* See editableField() for more options.
+*/
+"use strict";
+const {Ci, Cu, Cc} = require("chrome");
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const CONTENT_TYPES = {
+PLAIN_TEXT: 0,
+CSS_VALUE: 1,
+CSS_MIXED: 2,
+CSS_PROPERTY: 3,
+};
+const MAX_POPUP_ENTRIES = 10;
+const FOCUS_FORWARD = Ci.nsIFocusManager.MOVEFOCUS_FORWARD;
+const FOCUS_BACKWARD = Ci.nsIFocusManager.MOVEFOCUS_BACKWARD;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/devtools/event-emitter.js");
+/**
+* Mark a span editable.  |editableField| will listen for the span to
+* be focused and create an InlineEditor to handle text input.
+* Changes will be committed when the InlineEditor's input is blurred
+* or dropped when the user presses escape.
+*
+* @param {object} aOptions
+*    Options for the editable field, including:
+*    {Element} element:
+*      (required) The span to be edited on focus.
+*    {function} canEdit:
+*       Will be called before creating the inplace editor.  Editor
+*       won't be created if canEdit returns false.
+*    {function} start:
+*       Will be called when the inplace editor is initialized.
+*    {function} change:
+*       Will be called when the text input changes.  Will be called
+*       with the current value of the text input.
+*    {function} done:
+*       Called when input is committed or blurred.  Called with
+*       current value and a boolean telling the caller whether to
+*       commit the change.  This function is called before the editor
+*       has been torn down.
+*    {function} destroy:
+*       Called when the editor is destroyed and has been torn down.
+*    {string} advanceChars:
+*       If any characters in advanceChars are typed, focus will advance
+*       to the next element.
+*    {boolean} stopOnReturn:
+*       If true, the return key will not advance the editor to the next
+*       focusable element.
+*    {string} trigger: The DOM event that should trigger editing,
+*      defaults to "click"
+*/
+function editableField(aOptions)
+{
+return editableItem(aOptions, function(aElement, aEvent) {
+new InplaceEditor(aOptions, aEvent);
+});
+}
+exports.editableField = editableField;
+/**
+* Handle events for an element that should respond to
+* clicks and sit in the editing tab order, and call
+* a callback when it is activated.
+*
+* @param {object} aOptions
+*    The options for this editor, including:
+*    {Element} element: The DOM element.
+*    {string} trigger: The DOM event that should trigger editing,
+*      defaults to "click"
+* @param {function} aCallback
+*        Called when the editor is activated.
+*/
+function editableItem(aOptions, aCallback)
+{
+let trigger = aOptions.trigger || "click"
+let element = aOptions.element;
+element.addEventListener(trigger, function(evt) {
+if (evt.target.nodeName !== "a") {
+let win = this.ownerDocument.defaultView;
+let selection = win.getSelection();
+if (trigger != "click" || selection.isCollapsed) {
+aCallback(element, evt);
+}
+evt.stopPropagation();
+}
+}, false);
+// If focused by means other than a click, start editing by
+// pressing enter or space.
+element.addEventListener("keypress", function(evt) {
+if (evt.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RETURN ||
+evt.charCode === Ci.nsIDOMKeyEvent.DOM_VK_SPACE) {
+aCallback(element);
+}
+}, true);
+// Ugly workaround - the element is focused on mousedown but
+// the editor is activated on click/mouseup.  This leads
+// to an ugly flash of the focus ring before showing the editor.
+// So hide the focus ring while the mouse is down.
+element.addEventListener("mousedown", function(evt) {
+if (evt.target.nodeName !== "a") {
+let cleanup = function() {
+element.style.removeProperty("outline-style");
+element.removeEventListener("mouseup", cleanup, false);
+element.removeEventListener("mouseout", cleanup, false);
+};
+element.style.setProperty("outline-style", "none");
+element.addEventListener("mouseup", cleanup, false);
+element.addEventListener("mouseout", cleanup, false);
+}
+}, false);
+// Mark the element editable field for tab
+// navigation while editing.
+element._editable = true;
+}
+exports.editableItem = this.editableItem;
+/*
+* Various API consumers (especially tests) sometimes want to grab the
+* inplaceEditor expando off span elements. However, when each global has its
+* own compartment, those expandos live on Xray wrappers that are only visible
+* within this JSM. So we provide a little workaround here.
+*/
+function getInplaceEditorForSpan(aSpan)
+{
+return aSpan.inplaceEditor;
+};
+exports.getInplaceEditorForSpan = getInplaceEditorForSpan;
+function InplaceEditor(aOptions, aEvent)
+{
+this.elt = aOptions.element;
+let doc = this.elt.ownerDocument;
+this.doc = doc;
+this.elt.inplaceEditor = this;
+this.change = aOptions.change;
+this.done = aOptions.done;
+this.destroy = aOptions.destroy;
+this.initial = aOptions.initial ? aOptions.initial : this.elt.textContent;
+this.multiline = aOptions.multiline || false;
+this.stopOnReturn = !!aOptions.stopOnReturn;
+this.contentType = aOptions.contentType || CONTENT_TYPES.PLAIN_TEXT;
+this.property = aOptions.property;
+this.popup = aOptions.popup;
+this._onBlur = this._onBlur.bind(this);
+this._onKeyPress = this._onKeyPress.bind(this);
+this._onInput = this._onInput.bind(this);
+this._onKeyup = this._onKeyup.bind(this);
+this._createInput();
+this._autosize();
+this.inputCharWidth = this._getInputCharWidth();
+// Pull out character codes for advanceChars, listing the
+// characters that should trigger a blur.
+this._advanceCharCodes = {};
+let advanceChars = aOptions.advanceChars || '';
+for (let i = 0; i < advanceChars.length; i++) {
+this._advanceCharCodes[advanceChars.charCodeAt(i)] = true;
+}
+// Hide the provided element and add our editor.
+this.originalDisplay = this.elt.style.display;
+this.elt.style.display = "none";
+this.elt.parentNode.insertBefore(this.input, this.elt);
+if (typeof(aOptions.selectAll) == "undefined" || aOptions.selectAll) {
+this.input.select();
+}
+this.input.focus();
+if (this.contentType == CONTENT_TYPES.CSS_VALUE && this.input.value == "") {
+this._maybeSuggestCompletion(true);
+}
+this.input.addEventListener("blur", this._onBlur, false);
+this.input.addEventListener("keypress", this._onKeyPress, false);
+this.input.addEventListener("input", this._onInput, false);
+this.input.addEventListener("dblclick",
+(e) => { e.stopPropagation(); }, false);
+this.input.addEventListener("mousedown",
+(e) => { e.stopPropagation(); }, false);
+this.validate = aOptions.validate;
+if (this.validate) {
+this.input.addEventListener("keyup", this._onKeyup, false);
+}
+if (aOptions.start) {
+aOptions.start(this, aEvent);
+}
+EventEmitter.decorate(this);
+}
+exports.InplaceEditor = InplaceEditor;
+InplaceEditor.CONTENT_TYPES = CONTENT_TYPES;
+InplaceEditor.prototype = {
+_createInput: function InplaceEditor_createEditor()
+{
+this.input =
+this.doc.createElementNS(HTML_NS, this.multiline ? "textarea" : "input");
+this.input.inplaceEditor = this;
+this.input.classList.add("styleinspector-propertyeditor");
+this.input.value = this.initial;
+copyTextStyles(this.elt, this.input);
+},
+/**
+* Get rid of the editor.
+*/
+_clear: function InplaceEditor_clear()
+{
+if (!this.input) {
+// Already cleared.
+return;
+}
+this.input.removeEventListener("blur", this._onBlur, false);
+this.input.removeEventListener("keypress", this._onKeyPress, false);
+this.input.removeEventListener("keyup", this._onKeyup, false);
+this.input.removeEventListener("oninput", this._onInput, false);
+this._stopAutosize();
+this.elt.style.display = this.originalDisplay;
+this.elt.focus();
+this.elt.parentNode.removeChild(this.input);
+this.input = null;
+delete this.elt.inplaceEditor;
+delete this.elt;
+if (this.destroy) {
+this.destroy();
+}
+},
+/**
+* Keeps the editor close to the size of its input string.  This is pretty
+* crappy, suggestions for improvement welcome.
+*/
+_autosize: function InplaceEditor_autosize()
+{
+// Create a hidden, absolutely-positioned span to measure the text
+// in the input.  Boo.
+// We can't just measure the original element because a) we don't
+// change the underlying element's text ourselves (we leave that
+// up to the client), and b) without tweaking the style of the
+// original element, it might wrap differently or something.
+this._measurement =
+this.doc.createElementNS(HTML_NS, this.multiline ? "pre" : "span");
+this._measurement.className = "autosizer";
+this.elt.parentNode.appendChild(this._measurement);
+let style = this._measurement.style;
+style.visibility = "hidden";
+style.position = "absolute";
+style.top = "0";
+style.left = "0";
+copyTextStyles(this.input, this._measurement);
+this._updateSize();
+},
+/**
+* Clean up the mess created by _autosize().
+*/
+_stopAutosize: function InplaceEditor_stopAutosize()
+{
+if (!this._measurement) {
+return;
+}
+this._measurement.parentNode.removeChild(this._measurement);
+delete this._measurement;
+},
+/**
+* Size the editor to fit its current contents.
+*/
+_updateSize: function InplaceEditor_updateSize()
+{
+// Replace spaces with non-breaking spaces.  Otherwise setting
+// the span's textContent will collapse spaces and the measurement
+// will be wrong.
+this._measurement.textContent = this.input.value.replace(/ /g, '\u00a0');
+// We add a bit of padding to the end.  Should be enough to fit
+// any letter that could be typed, otherwise we'll scroll before
+// we get a chance to resize.  Yuck.
+let width = this._measurement.offsetWidth + 10;
+if (this.multiline) {
+// Make sure there's some content in the current line.  This is a hack to
+// account for the fact that after adding a newline the <pre> doesn't grow
+// unless there's text content on the line.
+width += 15;
+this._measurement.textContent += "M";
+this.input.style.height = this._measurement.offsetHeight + "px";
+}
+this.input.style.width = width + "px";
+},
+/**
+* Get the width of a single character in the input to properly position the
+* autocompletion popup.
+*/
+_getInputCharWidth: function InplaceEditor_getInputCharWidth()
+{
+// Just make the text content to be 'x' to get the width of any character in
+// a monospace font.
+this._measurement.textContent = "x";
+return this._measurement.offsetWidth;
+},
+/**
+* Increment property values in rule view.
+*
+* @param {number} increment
+*        The amount to increase/decrease the property value.
+* @return {bool} true if value has been incremented.
+*/
+_incrementValue: function InplaceEditor_incrementValue(increment)
+{
+let value = this.input.value;
+let selectionStart = this.input.selectionStart;
+let selectionEnd = this.input.selectionEnd;
+let newValue = this._incrementCSSValue(value, increment, selectionStart,
+selectionEnd);
+if (!newValue) {
+return false;
+}
+this.input.value = newValue.value;
+this.input.setSelectionRange(newValue.start, newValue.end);
+this._doValidation();
+// Call the user's change handler if available.
+if (this.change) {
+this.change(this.input.value.trim());
+}
+return true;
+},
+/**
+* Increment the property value based on the property type.
+*
+* @param {string} value
+*        Property value.
+* @param {number} increment
+*        Amount to increase/decrease the property value.
+* @param {number} selStart
+*        Starting index of the value.
+* @param {number} selEnd
+*        Ending index of the value.
+* @return {object} object with properties 'value', 'start', and 'end'.
+*/
+_incrementCSSValue: function InplaceEditor_incrementCSSValue(value, increment,
+selStart, selEnd)
+{
+let range = this._parseCSSValue(value, selStart);
+let type = (range && range.type) || "";
+let rawValue = (range ? value.substring(range.start, range.end) : "");
+let incrementedValue = null, selection;
+if (type === "num") {
+let newValue = this._incrementRawValue(rawValue, increment);
+if (newValue !== null) {
+incrementedValue = newValue;
+selection = [0, incrementedValue.length];
+}
+} else if (type === "hex") {
+let exprOffset = selStart - range.start;
+let exprOffsetEnd = selEnd - range.start;
+let newValue = this._incHexColor(rawValue, increment, exprOffset,
+exprOffsetEnd);
+if (newValue) {
+incrementedValue = newValue.value;
+selection = newValue.selection;
+}
+} else {
+let info;
+if (type === "rgb" || type === "hsl") {
+info = {};
+let part = value.substring(range.start, selStart).split(",").length - 1;
+if (part === 3) { // alpha
+info.minValue = 0;
+info.maxValue = 1;
+} else if (type === "rgb") {
+info.minValue = 0;
+info.maxValue = 255;
+} else if (part !== 0) { // hsl percentage
+info.minValue = 0;
+info.maxValue = 100;
+// select the previous number if the selection is at the end of a
+// percentage sign.
+if (value.charAt(selStart - 1) === "%") {
+--selStart;
+}
+}
+}
+return this._incrementGenericValue(value, increment, selStart, selEnd, info);
+}
+if (incrementedValue === null) {
+return;
+}
+let preRawValue = value.substr(0, range.start);
+let postRawValue = value.substr(range.end);
+return {
+value: preRawValue + incrementedValue + postRawValue,
+start: range.start + selection[0],
+end: range.start + selection[1]
+};
+},
+/**
+* Parses the property value and type.
+*
+* @param {string} value
+*        Property value.
+* @param {number} offset
+*        Starting index of value.
+* @return {object} object with properties 'value', 'start', 'end', and 'type'.
+*/
+_parseCSSValue: function InplaceEditor_parseCSSValue(value, offset)
+{
+const reSplitCSS = /(url\("?[^"\)]+"?\)?)|(rgba?\([^)]*\)?)|(hsla?\([^)]*\)?)|(#[\dA-Fa-f]+)|(-?\d+(\.\d+)?(%|[a-z]{1,4})?)|"([^"]*)"?|'([^']*)'?|([^,\s\/!\(\)]+)|(!(.*)?)/;
+let start = 0;
+let m;
+// retreive values from left to right until we find the one at our offset
+while ((m = reSplitCSS.exec(value)) &&
+(m.index + m[0].length < offset)) {
+value = value.substr(m.index + m[0].length);
+start += m.index + m[0].length;
+offset -= m.index + m[0].length;
+}
+if (!m) {
+return;
+}
+let type;
+if (m[1]) {
+type = "url";
+} else if (m[2]) {
+type = "rgb";
+} else if (m[3]) {
+type = "hsl";
+} else if (m[4]) {
+type = "hex";
+} else if (m[5]) {
+type = "num";
+}
+return {
+value: m[0],
+start: start + m.index,
+end: start + m.index + m[0].length,
+type: type
+};
+},
+/**
+* Increment the property value for types other than
+* number or hex, such as rgb, hsl, and file names.
+*
+* @param {string} value
+*        Property value.
+* @param {number} increment
+*        Amount to increment/decrement.
+* @param {number} offset
+*        Starting index of the property value.
+* @param {number} offsetEnd
+*        Ending index of the property value.
+* @param {object} info
+*        Object with details about the property value.
+* @return {object} object with properties 'value', 'start', and 'end'.
+*/
+_incrementGenericValue:
+function InplaceEditor_incrementGenericValue(value, increment, offset,
+offsetEnd, info)
+{
+// Try to find a number around the cursor to increment.
+let start, end;
+// Check if we are incrementing in a non-number context (such as a URL)
+if (/^-?[0-9.]/.test(value.substring(offset, offsetEnd)) &&
+!(/\d/.test(value.charAt(offset - 1) + value.charAt(offsetEnd)))) {
+// We have a number selected, possibly with a suffix, and we are not in
+// the disallowed case of just part of a known number being selected.
+// Use that number.
+start = offset;
+end = offsetEnd;
+} else {
+// Parse periods as belonging to the number only if we are in a known number
+// context. (This makes incrementing the 1 in 'image1.gif' work.)
+let pattern = "[" + (info ? "0-9." : "0-9") + "]*";
+let before = new RegExp(pattern + "$").exec(value.substr(0, offset))[0].length;
+let after = new RegExp("^" + pattern).exec(value.substr(offset))[0].length;
+start = offset - before;
+end = offset + after;
+// Expand the number to contain an initial minus sign if it seems
+// free-standing.
+if (value.charAt(start - 1) === "-" &&
+(start - 1 === 0 || /[ (:,='"]/.test(value.charAt(start - 2)))) {
+--start;
+}
+}
+if (start !== end)
+{
+// Include percentages as part of the incremented number (they are
+// common enough).
+if (value.charAt(end) === "%") {
+++end;
+}
+let first = value.substr(0, start);
+let mid = value.substring(start, end);
+let last = value.substr(end);
+mid = this._incrementRawValue(mid, increment, info);
+if (mid !== null) {
+return {
+value: first + mid + last,
+start: start,
+end: start + mid.length
+};
+}
+}
+},
+/**
+* Increment the property value for numbers.
+*
+* @param {string} rawValue
+*        Raw value to increment.
+* @param {number} increment
+*        Amount to increase/decrease the raw value.
+* @param {object} info
+*        Object with info about the property value.
+* @return {string} the incremented value.
+*/
+_incrementRawValue:
+function InplaceEditor_incrementRawValue(rawValue, increment, info)
+{
+let num = parseFloat(rawValue);
+if (isNaN(num)) {
+return null;
+}
+let number = /\d+(\.\d+)?/.exec(rawValue);
+let units = rawValue.substr(number.index + number[0].length);
+// avoid rounding errors
+let newValue = Math.round((num + increment) * 1000) / 1000;
+if (info && "minValue" in info) {
+newValue = Math.max(newValue, info.minValue);
+}
+if (info && "maxValue" in info) {
+newValue = Math.min(newValue, info.maxValue);
+}
+newValue = newValue.toString();
+return newValue + units;
+},
+/**
+* Increment the property value for hex.
+*
+* @param {string} value
+*        Property value.
+* @param {number} increment
+*        Amount to increase/decrease the property value.
+* @param {number} offset
+*        Starting index of the property value.
+* @param {number} offsetEnd
+*        Ending index of the property value.
+* @return {object} object with properties 'value' and 'selection'.
+*/
+_incHexColor:
+function InplaceEditor_incHexColor(rawValue, increment, offset, offsetEnd)
+{
+// Return early if no part of the rawValue is selected.
+if (offsetEnd > rawValue.length && offset >= rawValue.length) {
+return;
+}
+if (offset < 1 && offsetEnd <= 1) {
+return;
+}
+// Ignore the leading #.
+rawValue = rawValue.substr(1);
+--offset;
+--offsetEnd;
+// Clamp the selection to within the actual value.
+offset = Math.max(offset, 0);
+offsetEnd = Math.min(offsetEnd, rawValue.length);
+offsetEnd = Math.max(offsetEnd, offset);
+// Normalize #ABC -> #AABBCC.
+if (rawValue.length === 3) {
+rawValue = rawValue.charAt(0) + rawValue.charAt(0) +
+rawValue.charAt(1) + rawValue.charAt(1) +
+rawValue.charAt(2) + rawValue.charAt(2);
+offset *= 2;
+offsetEnd *= 2;
+}
+if (rawValue.length !== 6) {
+return;
+}
+// If no selection, increment an adjacent color, preferably one to the left.
+if (offset === offsetEnd) {
+if (offset === 0) {
+offsetEnd = 1;
+} else {
+offset = offsetEnd - 1;
+}
+}
+// Make the selection cover entire parts.
+offset -= offset % 2;
+offsetEnd += offsetEnd % 2;
+// Remap the increments from [0.1, 1, 10] to [1, 1, 16].
+if (-1 < increment && increment < 1) {
+increment = (increment < 0 ? -1 : 1);
+}
+if (Math.abs(increment) === 10) {
+increment = (increment < 0 ? -16 : 16);
+}
+let isUpper = (rawValue.toUpperCase() === rawValue);
+for (let pos = offset; pos < offsetEnd; pos += 2) {
+// Increment the part in [pos, pos+2).
+let mid = rawValue.substr(pos, 2);
+let value = parseInt(mid, 16);
+if (isNaN(value)) {
+return;
+}
+mid = Math.min(Math.max(value + increment, 0), 255).toString(16);
+while (mid.length < 2) {
+mid = "0" + mid;
+}
+if (isUpper) {
+mid = mid.toUpperCase();
+}
+rawValue = rawValue.substr(0, pos) + mid + rawValue.substr(pos + 2);
+}
+return {
+value: "#" + rawValue,
+selection: [offset + 1, offsetEnd + 1]
+};
+},
+/**
+* Cycle through the autocompletion suggestions in the popup.
+*
+* @param {boolean} aReverse
+*        true to select previous item from the popup.
+* @param {boolean} aNoSelect
+*        true to not select the text after selecting the newly selectedItem
+*        from the popup.
+*/
+_cycleCSSSuggestion:
+function InplaceEditor_cycleCSSSuggestion(aReverse, aNoSelect)
+{
+// selectedItem can be null when nothing is selected in an empty editor.
+let {label, preLabel} = this.popup.selectedItem || {label: "", preLabel: ""};
+if (aReverse) {
+this.popup.selectPreviousItem();
+} else {
+this.popup.selectNextItem();
+}
+this._selectedIndex = this.popup.selectedIndex;
+let input = this.input;
+let pre = "";
+if (input.selectionStart < input.selectionEnd) {
+pre = input.value.slice(0, input.selectionStart);
+}
+else {
+pre = input.value.slice(0, input.selectionStart - label.length +
+preLabel.length);
+}
+let post = input.value.slice(input.selectionEnd, input.value.length);
+let item = this.popup.selectedItem;
+let toComplete = item.label.slice(item.preLabel.length);
+input.value = pre + toComplete + post;
+if (!aNoSelect) {
+input.setSelectionRange(pre.length, pre.length + toComplete.length);
+}
+else {
+input.setSelectionRange(pre.length + toComplete.length,
+pre.length + toComplete.length);
+}
+this._updateSize();
+// This emit is mainly for the purpose of making the test flow simpler.
+this.emit("after-suggest");
+},
+/**
+* Call the client's done handler and clear out.
+*/
+_apply: function InplaceEditor_apply(aEvent)
+{
+if (this._applied) {
+return;
+}
+this._applied = true;
+if (this.done) {
+let val = this.input.value.trim();
+return this.done(this.cancelled ? this.initial : val, !this.cancelled);
+}
+return null;
+},
+/**
+* Handle loss of focus by calling done if it hasn't been called yet.
+*/
+_onBlur: function InplaceEditor_onBlur(aEvent, aDoNotClear)
+{
+if (aEvent && this.popup && this.popup.isOpen &&
+this.popup.selectedIndex >= 0) {
+let label, preLabel;
+if (this._selectedIndex === undefined) {
+({label, preLabel}) = this.popup.getItemAtIndex(this.popup.selectedIndex);
+}
+else {
+({label, preLabel}) = this.popup.getItemAtIndex(this._selectedIndex);
+}
+let input = this.input;
+let pre = "";
+if (input.selectionStart < input.selectionEnd) {
+pre = input.value.slice(0, input.selectionStart);
+}
+else {
+pre = input.value.slice(0, input.selectionStart - label.length +
+preLabel.length);
+}
+let post = input.value.slice(input.selectionEnd, input.value.length);
+let item = this.popup.selectedItem;
+this._selectedIndex = this.popup.selectedIndex;
+let toComplete = item.label.slice(item.preLabel.length);
+input.value = pre + toComplete + post;
+input.setSelectionRange(pre.length + toComplete.length,
+pre.length + toComplete.length);
+this._updateSize();
+// Wait for the popup to hide and then focus input async otherwise it does
+// not work.
+let onPopupHidden = () => {
+this.popup._panel.removeEventListener("popuphidden", onPopupHidden);
+this.doc.defaultView.setTimeout(()=> {
+input.focus();
+this.emit("after-suggest");
+}, 0);
+};
+this.popup._panel.addEventListener("popuphidden", onPopupHidden);
+this.popup.hidePopup();
+// Content type other than CSS_MIXED is used in rule-view where the values
+// are live previewed. So we apply the value before returning.
+if (this.contentType != CONTENT_TYPES.CSS_MIXED) {
+this._apply();
+}
+return;
+}
+this._apply();
+if (!aDoNotClear) {
+this._clear();
+}
+},
+/**
+* Handle the input field's keypress event.
+*/
+_onKeyPress: function InplaceEditor_onKeyPress(aEvent)
+{
+let prevent = false;
+const largeIncrement = 100;
+const mediumIncrement = 10;
+const smallIncrement = 0.1;
+let increment = 0;
+if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_UP
+|| aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP) {
+increment = 1;
+} else if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_DOWN
+|| aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
+increment = -1;
+}
+if (aEvent.shiftKey && !aEvent.altKey) {
+if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP
+||  aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN) {
+increment *= largeIncrement;
+} else {
+increment *= mediumIncrement;
+}
+} else if (aEvent.altKey && !aEvent.shiftKey) {
+increment *= smallIncrement;
+}
+let cycling = false;
+if (increment && this._incrementValue(increment) ) {
+this._updateSize();
+prevent = true;
+cycling = true;
+} else if (increment && this.popup && this.popup.isOpen) {
+cycling = true;
+prevent = true;
+this._cycleCSSSuggestion(increment > 0);
+this._doValidation();
+}
+if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_BACK_SPACE ||
+aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_DELETE ||
+aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_LEFT ||
+aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RIGHT) {
+if (this.popup && this.popup.isOpen) {
+this.popup.hidePopup();
+}
+} else if (!cycling && !aEvent.metaKey && !aEvent.altKey && !aEvent.ctrlKey) {
+this._maybeSuggestCompletion();
+}
+if (this.multiline &&
+aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RETURN &&
+aEvent.shiftKey) {
+prevent = false;
+} else if (aEvent.charCode in this._advanceCharCodes
+|| aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RETURN
+|| aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_TAB) {
+prevent = true;
+let direction = FOCUS_FORWARD;
+if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_TAB &&
+aEvent.shiftKey) {
+direction = FOCUS_BACKWARD;
+}
+if (this.stopOnReturn && aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_RETURN) {
+direction = null;
+}
+// Now we don't want to suggest anything as we are moving out.
+this._preventSuggestions = true;
+// But we still want to show suggestions for css values. i.e. moving out
+// of css property input box in forward direction
+if (this.contentType == CONTENT_TYPES.CSS_PROPERTY &&
+direction == FOCUS_FORWARD) {
+this._preventSuggestions = false;
+}
+let input = this.input;
+if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_TAB &&
+this.contentType == CONTENT_TYPES.CSS_MIXED) {
+if (this.popup && input.selectionStart < input.selectionEnd) {
+aEvent.preventDefault();
+input.setSelectionRange(input.selectionEnd, input.selectionEnd);
+this.emit("after-suggest");
+return;
+}
+else if (this.popup && this.popup.isOpen) {
+aEvent.preventDefault();
+this._cycleCSSSuggestion(aEvent.shiftKey, true);
+return;
+}
+}
+this._apply();
+// Close the popup if open
+if (this.popup && this.popup.isOpen) {
+this.popup.hidePopup();
+}
+if (direction !== null && focusManager.focusedElement === input) {
+// If the focused element wasn't changed by the done callback,
+// move the focus as requested.
+let next = moveFocus(this.doc.defaultView, direction);
+// If the next node to be focused has been tagged as an editable
+// node, send it a click event to trigger
+if (next && next.ownerDocument === this.doc && next._editable) {
+next.click();
+}
+}
+this._clear();
+} else if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE) {
+// Cancel and blur ourselves.
+// Now we don't want to suggest anything as we are moving out.
+this._preventSuggestions = true;
+// Close the popup if open
+if (this.popup && this.popup.isOpen) {
+this.popup.hidePopup();
+}
+prevent = true;
+this.cancelled = true;
+this._apply();
+this._clear();
+aEvent.stopPropagation();
+} else if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_SPACE) {
+// No need for leading spaces here.  This is particularly
+// noticable when adding a property: it's very natural to type
+// <name>: (which advances to the next property) then spacebar.
+prevent = !this.input.value;
+}
+if (prevent) {
+aEvent.preventDefault();
+}
+},
+/**
+* Handle the input field's keyup event.
+*/
+_onKeyup: function(aEvent) {
+this._applied = false;
+},
+/**
+* Handle changes to the input text.
+*/
+_onInput: function InplaceEditor_onInput(aEvent)
+{
+// Validate the entered value.
+this._doValidation();
+// Update size if we're autosizing.
+if (this._measurement) {
+this._updateSize();
+}
+// Call the user's change handler if available.
+if (this.change) {
+this.change(this.input.value.trim());
+}
+},
+/**
+* Fire validation callback with current input
+*/
+_doValidation: function()
+{
+if (this.validate && this.input) {
+this.validate(this.input.value);
+}
+},
+/**
+* Handles displaying suggestions based on the current input.
+*
+* @param {boolean} aNoAutoInsert
+*        true if you don't want to automatically insert the first suggestion
+*/
+_maybeSuggestCompletion: function(aNoAutoInsert) {
+// Input can be null in cases when you intantaneously switch out of it.
+if (!this.input) {
+return;
+}
+let preTimeoutQuery = this.input.value;
+// Since we are calling this method from a keypress event handler, the
+// |input.value| does not include currently typed character. Thus we perform
+// this method async.
+this.doc.defaultView.setTimeout(() => {
+if (this._preventSuggestions) {
+this._preventSuggestions = false;
+return;
+}
+if (this.contentType == CONTENT_TYPES.PLAIN_TEXT) {
+return;
+}
+if (!this.input) {
+return;
+}
+let input = this.input;
+// The length of input.value should be increased by 1
+if (input.value.length - preTimeoutQuery.length > 1) {
+return;
+}
+let query = input.value.slice(0, input.selectionStart);
+let startCheckQuery = query;
+if (query == null) {
+return;
+}
+// If nothing is selected and there is a non-space character after the
+// cursor, do not autocomplete.
+if (input.selectionStart == input.selectionEnd &&
+input.selectionStart < input.value.length &&
+input.value.slice(input.selectionStart)[0] != " ") {
+// This emit is mainly to make the test flow simpler.
+this.emit("after-suggest", "nothing to autocomplete");
+return;
+}
+let list = [];
+if (this.contentType == CONTENT_TYPES.CSS_PROPERTY) {
+list = CSSPropertyList;
+} else if (this.contentType == CONTENT_TYPES.CSS_VALUE) {
+// Get the last query to be completed before the caret.
+let match = /([^\s,.\/]+$)/.exec(query);
+if (match) {
+startCheckQuery = match[0];
+} else {
+startCheckQuery = "";
+}
+list =
+["!important", ...domUtils.getCSSValuesForProperty(this.property.name)];
+if (query == "") {
+// Do not suggest '!important' without any manually typed character.
+list.splice(0, 1);
+}
+} else if (this.contentType == CONTENT_TYPES.CSS_MIXED &&
+/^\s*style\s*=/.test(query)) {
+// Detecting if cursor is at property or value;
+let match = query.match(/([:;"'=]?)\s*([^"';:=]+)?$/);
+if (match && match.length >= 2) {
+if (match[1] == ":") { // We are in CSS value completion
+let propertyName =
+query.match(/[;"'=]\s*([^"';:= ]+)\s*:\s*[^"';:=]*$/)[1];
+list =
+["!important;", ...domUtils.getCSSValuesForProperty(propertyName)];
+let matchLastQuery = /([^\s,.\/]+$)/.exec(match[2] || "");
+if (matchLastQuery) {
+startCheckQuery = matchLastQuery[0];
+} else {
+startCheckQuery = "";
+}
+if (!match[2]) {
+// Don't suggest '!important' without any manually typed character
+list.splice(0, 1);
+}
+} else if (match[1]) { // We are in CSS property name completion
+list = CSSPropertyList;
+startCheckQuery = match[2];
+}
+if (startCheckQuery == null) {
+// This emit is mainly to make the test flow simpler.
+this.emit("after-suggest", "nothing to autocomplete");
+return;
+}
+}
+}
+if (!aNoAutoInsert) {
+list.some(item => {
+if (startCheckQuery != null && item.startsWith(startCheckQuery)) {
+input.value = query + item.slice(startCheckQuery.length) +
+input.value.slice(query.length);
+input.setSelectionRange(query.length, query.length + item.length -
+startCheckQuery.length);
+this._updateSize();
+return true;
+}
+});
+}
+if (!this.popup) {
+// This emit is mainly to make the test flow simpler.
+this.emit("after-suggest", "no popup");
+return;
+}
+let finalList = [];
+let length = list.length;
+for (let i = 0, count = 0; i < length && count < MAX_POPUP_ENTRIES; i++) {
+if (startCheckQuery != null && list[i].startsWith(startCheckQuery)) {
+count++;
+finalList.push({
+preLabel: startCheckQuery,
+label: list[i]
+});
+}
+else if (count > 0) {
+// Since count was incremented, we had already crossed the entries
+// which would have started with query, assuming that list is sorted.
+break;
+}
+else if (startCheckQuery != null && list[i][0] > startCheckQuery[0]) {
+// We have crossed all possible matches alphabetically.
+break;
+}
+}
+if (finalList.length > 1) {
+// Calculate the offset for the popup to be opened.
+let x = (this.input.selectionStart - startCheckQuery.length) *
+this.inputCharWidth;
+this.popup.setItems(finalList);
+this.popup.openPopup(this.input, x);
+if (aNoAutoInsert) {
+this.popup.selectedIndex = -1;
+}
+} else {
+this.popup.hidePopup();
+}
+// This emit is mainly for the purpose of making the test flow simpler.
+this.emit("after-suggest");
+this._doValidation();
+}, 0);
+}
+};
+/**
+* Copy text-related styles from one element to another.
+*/
+function copyTextStyles(aFrom, aTo)
+{
+let win = aFrom.ownerDocument.defaultView;
+let style = win.getComputedStyle(aFrom);
+aTo.style.fontFamily = style.getPropertyCSSValue("font-family").cssText;
+aTo.style.fontSize = style.getPropertyCSSValue("font-size").cssText;
+aTo.style.fontWeight = style.getPropertyCSSValue("font-weight").cssText;
+aTo.style.fontStyle = style.getPropertyCSSValue("font-style").cssText;
+}
+/**
+* Trigger a focus change similar to pressing tab/shift-tab.
+*/
+function moveFocus(aWin, aDirection)
+{
+return focusManager.moveFocus(aWin, null, aDirection, 0);
+}
+XPCOMUtils.defineLazyGetter(this, "focusManager", function() {
+return Services.focus;
+});
+XPCOMUtils.defineLazyGetter(this, "CSSPropertyList", function() {
+return domUtils.getCSSPropertyNames(domUtils.INCLUDE_ALIASES).sort();
+});
+XPCOMUtils.defineLazyGetter(this, "domUtils", function() {
+return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});