The Tor Browser / file revision

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

 });