The Tor Browser: browser/devtools/sourceeditor/editor.js@6474c204b198 (annotated)

browser/devtools/sourceeditor/editor.js@6474c204b198 (annotated)

browser/devtools/sourceeditor/editor.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* vim:set ts=2 sw=2 sts=2 et 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/. */
 "use strict";
 const { Cu, Cc, Ci, components } = require("chrome");
 const TAB_SIZE    = "devtools.editor.tabsize";
 const EXPAND_TAB  = "devtools.editor.expandtab";
 const KEYMAP      = "devtools.editor.keymap";
 const AUTO_CLOSE  = "devtools.editor.autoclosebrackets";
 const DETECT_INDENT = "devtools.editor.detectindentation";
 const DETECT_INDENT_MAX_LINES = 500;
 const L10N_BUNDLE = "chrome://browser/locale/devtools/sourceeditor.properties";
 const XUL_NS      = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 // Maximum allowed margin (in number of lines) from top or bottom of the editor
 // while shifting to a line which was initially out of view.
 const MAX_VERTICAL_OFFSET = 3;
 const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 const events  = require("devtools/toolkit/event-emitter");
 Cu.import("resource://gre/modules/Services.jsm");
 const L10N = Services.strings.createBundle(L10N_BUNDLE);
 // CM_STYLES, CM_SCRIPTS and CM_IFRAME represent the HTML,
 // JavaScript and CSS that is injected into an iframe in
 // order to initialize a CodeMirror instance.
 const CM_STYLES   = [
   "chrome://browser/skin/devtools/common.css",
   "chrome://browser/content/devtools/codemirror/codemirror.css",
   "chrome://browser/content/devtools/codemirror/dialog.css",
   "chrome://browser/content/devtools/codemirror/mozilla.css"
 ];
 const CM_SCRIPTS  = [
   "chrome://browser/content/devtools/theme-switching.js",
   "chrome://browser/content/devtools/codemirror/codemirror.js",
   "chrome://browser/content/devtools/codemirror/dialog.js",
   "chrome://browser/content/devtools/codemirror/searchcursor.js",
   "chrome://browser/content/devtools/codemirror/search.js",
   "chrome://browser/content/devtools/codemirror/matchbrackets.js",
   "chrome://browser/content/devtools/codemirror/closebrackets.js",
   "chrome://browser/content/devtools/codemirror/comment.js",
   "chrome://browser/content/devtools/codemirror/javascript.js",
   "chrome://browser/content/devtools/codemirror/xml.js",
   "chrome://browser/content/devtools/codemirror/css.js",
   "chrome://browser/content/devtools/codemirror/htmlmixed.js",
   "chrome://browser/content/devtools/codemirror/clike.js",
   "chrome://browser/content/devtools/codemirror/activeline.js",
   "chrome://browser/content/devtools/codemirror/trailingspace.js",
   "chrome://browser/content/devtools/codemirror/emacs.js",
   "chrome://browser/content/devtools/codemirror/vim.js",
   "chrome://browser/content/devtools/codemirror/sublime.js",
   "chrome://browser/content/devtools/codemirror/foldcode.js",
   "chrome://browser/content/devtools/codemirror/brace-fold.js",
   "chrome://browser/content/devtools/codemirror/comment-fold.js",
   "chrome://browser/content/devtools/codemirror/xml-fold.js",
   "chrome://browser/content/devtools/codemirror/foldgutter.js"
 ];
 const CM_IFRAME   =
   "data:text/html;charset=utf8,<!DOCTYPE html>" +
   "<html dir='ltr'>" +
   "  <head>" +
   "    <style>" +
   "      html, body { height: 100%; }" +
   "      body { margin: 0; overflow: hidden; }" +
   "      .CodeMirror { width: 100%; height: 100% !important; line-height: 1.25 !important;}" +
   "    </style>" +
 [ "    <link rel='stylesheet' href='" + style + "'>" for (style of CM_STYLES) ].join("\n") +
   "  </head>" +
   "  <body class='theme-body devtools-monospace'></body>" +
   "</html>";
 const CM_MAPPING = [
   "focus",
   "hasFocus",
   "lineCount",
   "somethingSelected",
   "getCursor",
   "setSelection",
   "getSelection",
   "replaceSelection",
   "extendSelection",
   "undo",
   "redo",
   "clearHistory",
   "openDialog",
   "refresh",
   "getScrollInfo",
   "getOption",
   "setOption"
 ];
 const { cssProperties, cssValues, cssColors } = getCSSKeywords();
 const editors = new WeakMap();
 Editor.modes = {
   text: { name: "text" },
   html: { name: "htmlmixed" },
   css:  { name: "css" },
   js:   { name: "javascript" },
   vs:   { name: "x-shader/x-vertex" },
   fs:   { name: "x-shader/x-fragment" }
 };
 /**
  * A very thin wrapper around CodeMirror. Provides a number
  * of helper methods to make our use of CodeMirror easier and
  * another method, appendTo, to actually create and append
  * the CodeMirror instance.
  *
  * Note that Editor doesn't expose CodeMirror instance to the
  * outside world.
  *
  * Constructor accepts one argument, config. It is very
  * similar to the CodeMirror configuration object so for most
  * properties go to CodeMirror's documentation (see below).
  *
  * Other than that, it accepts one additional and optional
  * property contextMenu. This property should be an ID of
  * an element we can use as a context menu.
  *
  * This object is also an event emitter.
  *
  * CodeMirror docs: http://codemirror.net/doc/manual.html
  */
 function Editor(config) {
   const tabSize = Services.prefs.getIntPref(TAB_SIZE);
   const useTabs = !Services.prefs.getBoolPref(EXPAND_TAB);
   const keyMap = Services.prefs.getCharPref(KEYMAP);
   const useAutoClose = Services.prefs.getBoolPref(AUTO_CLOSE);
   this.version = null;
   this.config = {
     value:             "",
     mode:              Editor.modes.text,
     indentUnit:        tabSize,
     tabSize:           tabSize,
     contextMenu:       null,
     matchBrackets:     true,
     extraKeys:         {},
     indentWithTabs:    useTabs,
     styleActiveLine:   true,
     autoCloseBrackets: "()[]{}''\"\"",
     autoCloseEnabled:  useAutoClose,
     theme:             "mozilla"
   };
   // Additional shortcuts.
   this.config.extraKeys[Editor.keyFor("jumpToLine")] = () => this.jumpToLine();
   this.config.extraKeys[Editor.keyFor("moveLineUp", { noaccel: true })] = () => this.moveLineUp();
   this.config.extraKeys[Editor.keyFor("moveLineDown", { noaccel: true })] = () => this.moveLineDown();
   this.config.extraKeys[Editor.keyFor("toggleComment")] = "toggleComment";
   // Disable ctrl-[ and ctrl-] because toolbox uses those shortcuts.
   this.config.extraKeys[Editor.keyFor("indentLess")] = false;
   this.config.extraKeys[Editor.keyFor("indentMore")] = false;
   // If alternative keymap is provided, use it.
   if (keyMap === "emacs" || keyMap === "vim" || keyMap === "sublime")
     this.config.keyMap = keyMap;
   // Overwrite default config with user-provided, if needed.
   Object.keys(config).forEach((k) => {
     if (k != "extraKeys") {
       this.config[k] = config[k];
       return;
     }
     if (!config.extraKeys)
       return;
     Object.keys(config.extraKeys).forEach((key) => {
       this.config.extraKeys[key] = config.extraKeys[key];
     });
   });
   // Set the code folding gutter, if needed.
   if (this.config.enableCodeFolding) {
     this.config.foldGutter = true;
     if (!this.config.gutters) {
       this.config.gutters = this.config.lineNumbers ? ["CodeMirror-linenumbers"] : [];
       this.config.gutters.push("CodeMirror-foldgutter");
     }
   }
   // Configure automatic bracket closing.
   if (!this.config.autoCloseEnabled)
     this.config.autoCloseBrackets = false;
   // Overwrite default tab behavior. If something is selected,
   // indent those lines. If nothing is selected and we're
   // indenting with tabs, insert one tab. Otherwise insert N
   // whitespaces where N == indentUnit option.
   this.config.extraKeys.Tab = (cm) => {
     if (cm.somethingSelected()) {
       cm.indentSelection("add");
       return;
     }
     if (this.config.indentWithTabs) {
       cm.replaceSelection("\t", "end", "+input");
       return;
     }
     var num = cm.getOption("indentUnit");
     if (cm.getCursor().ch !== 0) num -= 1;
     cm.replaceSelection(" ".repeat(num), "end", "+input");
   };
   events.decorate(this);
 }
 Editor.prototype = {
   container: null,
   version: null,
   config: null,
   /**
    * Appends the current Editor instance to the element specified by
    * 'el'. You can also provide your won iframe to host the editor as
    * an optional second parameter. This method actually creates and
    * loads CodeMirror and all its dependencies.
    *
    * This method is asynchronous and returns a promise.
    */
   appendTo: function (el, env) {
     let def = promise.defer();
     let cm  = editors.get(this);
     if (!env)
       env = el.ownerDocument.createElementNS(XUL_NS, "iframe");
     env.flex = 1;
     if (cm)
       throw new Error("You can append an editor only once.");
     let onLoad = () => {
       // Once the iframe is loaded, we can inject CodeMirror
       // and its dependencies into its DOM.
       env.removeEventListener("load", onLoad, true);
       let win = env.contentWindow.wrappedJSObject;
       CM_SCRIPTS.forEach((url) =>
         Services.scriptloader.loadSubScript(url, win, "utf8"));
       // Replace the propertyKeywords, colorKeywords and valueKeywords
       // properties of the CSS MIME type with the values provided by Gecko.
       let cssSpec = win.CodeMirror.resolveMode("text/css");
       cssSpec.propertyKeywords = cssProperties;
       cssSpec.colorKeywords = cssColors;
       cssSpec.valueKeywords = cssValues;
       win.CodeMirror.defineMIME("text/css", cssSpec);
       let scssSpec = win.CodeMirror.resolveMode("text/x-scss");
       scssSpec.propertyKeywords = cssProperties;
       scssSpec.colorKeywords = cssColors;
       scssSpec.valueKeywords = cssValues;
       win.CodeMirror.defineMIME("text/x-scss", scssSpec);
       win.CodeMirror.commands.save = () => this.emit("save");
       // Create a CodeMirror instance add support for context menus,
       // overwrite the default controller (otherwise items in the top and
       // context menus won't work).
       cm = win.CodeMirror(win.document.body, this.config);
       cm.getWrapperElement().addEventListener("contextmenu", (ev) => {
         ev.preventDefault();
         if (!this.config.contextMenu) return;
         let popup = el.ownerDocument.getElementById(this.config.contextMenu);
         popup.openPopupAtScreen(ev.screenX, ev.screenY, true);
       }, false);
       cm.on("focus", () => this.emit("focus"));
       cm.on("scroll", () => this.emit("scroll"));
       cm.on("change", () => {
         this.emit("change");
         if (!this._lastDirty) {
           this._lastDirty = true;
           this.emit("dirty-change");
         }
       });
       cm.on("cursorActivity", (cm) => this.emit("cursorActivity"));
       cm.on("gutterClick", (cm, line, gutter, ev) => {
         let head = { line: line, ch: 0 };
         let tail = { line: line, ch: this.getText(line).length };
         // Shift-click on a gutter selects the whole line.
         if (ev.shiftKey) {
           cm.setSelection(head, tail);
           return;
         }
         this.emit("gutterClick", line);
       });
       win.CodeMirror.defineExtension("l10n", (name) => {
         return L10N.GetStringFromName(name);
       });
       cm.getInputField().controllers.insertControllerAt(0, controller(this));
       this.container = env;
       editors.set(this, cm);
       this.resetIndentUnit();
       def.resolve();
     };
     env.addEventListener("load", onLoad, true);
     env.setAttribute("src", CM_IFRAME);
     el.appendChild(env);
     this.once("destroy", () => el.removeChild(env));
     return def.promise;
   },
   /**
    * Returns the currently active highlighting mode.
    * See Editor.modes for the list of all suppoert modes.
    */
   getMode: function () {
     return this.getOption("mode");
   },
   /**
    * Changes the value of a currently used highlighting mode.
    * See Editor.modes for the list of all suppoert modes.
    */
   setMode: function (value) {
     this.setOption("mode", value);
   },
   /**
    * Returns text from the text area. If line argument is provided
    * the method returns only that line.
    */
   getText: function (line) {
     let cm = editors.get(this);
     if (line == null)
       return cm.getValue();
     let info = cm.lineInfo(line);
     return info ? cm.lineInfo(line).text : "";
   },
   /**
    * Replaces whatever is in the text area with the contents of
    * the 'value' argument.
    */
   setText: function (value) {
     let cm = editors.get(this);
     cm.setValue(value);
     this.resetIndentUnit();
   },
   /**
    * Set the editor's indentation based on the current prefs and
    * re-detect indentation if we should.
    */
   resetIndentUnit: function() {
     let cm = editors.get(this);
     let indentWithTabs = !Services.prefs.getBoolPref(EXPAND_TAB);
     let indentUnit = Services.prefs.getIntPref(TAB_SIZE);
     let shouldDetect = Services.prefs.getBoolPref(DETECT_INDENT);
     cm.setOption("tabSize", indentUnit);
     if (shouldDetect) {
       let indent = detectIndentation(this);
       if (indent != null) {
         indentWithTabs = indent.tabs;
         indentUnit = indent.spaces ? indent.spaces : indentUnit;
       }
     }
     cm.setOption("indentUnit", indentUnit);
     cm.setOption("indentWithTabs", indentWithTabs);
   },
   /**
    * Replaces contents of a text area within the from/to {line, ch}
    * range. If neither from nor to arguments are provided works
    * exactly like setText. If only from object is provided, inserts
    * text at that point, *overwriting* as many characters as needed.
    */
   replaceText: function (value, from, to) {
     let cm = editors.get(this);
     if (!from) {
       this.setText(value);
       return;
     }
     if (!to) {
       let text = cm.getRange({ line: 0, ch: 0 }, from);
       this.setText(text + value);
       return;
     }
     cm.replaceRange(value, from, to);
   },
   /**
    * Inserts text at the specified {line, ch} position, shifting existing
    * contents as necessary.
    */
   insertText: function (value, at) {
     let cm = editors.get(this);
     cm.replaceRange(value, at, at);
   },
   /**
    * Deselects contents of the text area.
    */
   dropSelection: function () {
     if (!this.somethingSelected())
       return;
     this.setCursor(this.getCursor());
   },
   /**
    * Returns true if there is more than one selection in the editor.
    */
   hasMultipleSelections: function () {
     let cm = editors.get(this);
     return cm.listSelections().length > 1;
   },
   /**
    * Gets the first visible line number in the editor.
    */
   getFirstVisibleLine: function () {
     let cm = editors.get(this);
     return cm.lineAtHeight(0, "local");
   },
   /**
    * Scrolls the view such that the given line number is the first visible line.
    */
   setFirstVisibleLine: function (line) {
     let cm = editors.get(this);
     let { top } = cm.charCoords({line: line, ch: 0}, "local");
     cm.scrollTo(0, top);
   },
   /**
    * Sets the cursor to the specified {line, ch} position with an additional
    * option to align the line at the "top", "center" or "bottom" of the editor
    * with "top" being default value.
    */
   setCursor: function ({line, ch}, align) {
     let cm = editors.get(this);
     this.alignLine(line, align);
     cm.setCursor({line: line, ch: ch});
   },
   /**
    * Aligns the provided line to either "top", "center" or "bottom" of the
    * editor view with a maximum margin of MAX_VERTICAL_OFFSET lines from top or
    * bottom.
    */
   alignLine: function(line, align) {
     let cm = editors.get(this);
     let from = cm.lineAtHeight(0, "page");
     let to = cm.lineAtHeight(cm.getWrapperElement().clientHeight, "page");
     let linesVisible = to - from;
     let halfVisible = Math.round(linesVisible/2);
     // If the target line is in view, skip the vertical alignment part.
     if (line <= to && line >= from) {
       return;
     }
     // Setting the offset so that the line always falls in the upper half
     // of visible lines (lower half for bottom aligned).
     // MAX_VERTICAL_OFFSET is the maximum allowed value.
     let offset = Math.min(halfVisible, MAX_VERTICAL_OFFSET);
     let topLine = {
       "center": Math.max(line - halfVisible, 0),
       "bottom": Math.max(line - linesVisible + offset, 0),
       "top": Math.max(line - offset, 0)
     }[align || "top"] || offset;
     // Bringing down the topLine to total lines in the editor if exceeding.
     topLine = Math.min(topLine, this.lineCount());
     this.setFirstVisibleLine(topLine);
   },
   /**
    * Returns whether a marker of a specified class exists in a line's gutter.
    */
   hasMarker: function (line, gutterName, markerClass) {
     let cm = editors.get(this);
     let info = cm.lineInfo(line);
     if (!info)
       return false;
     let gutterMarkers = info.gutterMarkers;
     if (!gutterMarkers)
       return false;
     let marker = gutterMarkers[gutterName];
     if (!marker)
       return false;
     return marker.classList.contains(markerClass);
   },
   /**
    * Adds a marker with a specified class to a line's gutter. If another marker
    * exists on that line, the new marker class is added to its class list.
    */
   addMarker: function (line, gutterName, markerClass) {
     let cm = editors.get(this);
     let info = cm.lineInfo(line);
     if (!info)
       return;
     let gutterMarkers = info.gutterMarkers;
     if (gutterMarkers) {
       let marker = gutterMarkers[gutterName];
       if (marker) {
         marker.classList.add(markerClass);
         return;
       }
     }
     let marker = cm.getWrapperElement().ownerDocument.createElement("div");
     marker.className = markerClass;
     cm.setGutterMarker(info.line, gutterName, marker);
   },
   /**
    * The reverse of addMarker. Removes a marker of a specified class from a
    * line's gutter.
    */
   removeMarker: function (line, gutterName, markerClass) {
     if (!this.hasMarker(line, gutterName, markerClass))
       return;
     let cm = editors.get(this);
     cm.lineInfo(line).gutterMarkers[gutterName].classList.remove(markerClass);
   },
   /**
    * Remove all gutter markers in the gutter with the given name.
    */
   removeAllMarkers: function (gutterName) {
     let cm = editors.get(this);
     cm.clearGutter(gutterName);
   },
   /**
    * Handles attaching a set of events listeners on a marker. They should
    * be passed as an object literal with keys as event names and values as
    * function listeners. The line number, marker node and optional data
    * will be passed as arguments to the function listener.
    *
    * You don't need to worry about removing these event listeners.
    * They're automatically orphaned when clearing markers.
    */
   setMarkerListeners: function(line, gutterName, markerClass, events, data) {
     if (!this.hasMarker(line, gutterName, markerClass))
       return;
     let cm = editors.get(this);
     let marker = cm.lineInfo(line).gutterMarkers[gutterName];
     for (let name in events) {
       let listener = events[name].bind(this, line, marker, data);
       marker.addEventListener(name, listener);
     }
   },
   /**
    * Returns whether a line is decorated using the specified class name.
    */
   hasLineClass: function (line, className) {
     let cm = editors.get(this);
     let info = cm.lineInfo(line);
     if (!info || !info.wrapClass)
       return false;
     return info.wrapClass.split(" ").indexOf(className) != -1;
   },
   /**
    * Set a CSS class name for the given line, including the text and gutter.
    */
   addLineClass: function (line, className) {
     let cm = editors.get(this);
     cm.addLineClass(line, "wrap", className);
   },
   /**
    * The reverse of addLineClass.
    */
   removeLineClass: function (line, className) {
     let cm = editors.get(this);
     cm.removeLineClass(line, "wrap", className);
   },
   /**
    * Mark a range of text inside the two {line, ch} bounds. Since the range may
    * be modified, for example, when typing text, this method returns a function
    * that can be used to remove the mark.
    */
   markText: function(from, to, className = "marked-text") {
     let cm = editors.get(this);
     let text = cm.getRange(from, to);
     let span = cm.getWrapperElement().ownerDocument.createElement("span");
     span.className = className;
     span.textContent = text;
     let mark = cm.markText(from, to, { replacedWith: span });
     return {
       anchor: span,
       clear: () => mark.clear()
     };
   },
   /**
    * Calculates and returns one or more {line, ch} objects for
    * a zero-based index who's value is relative to the start of
    * the editor's text.
    *
    * If only one argument is given, this method returns a single
    * {line,ch} object. Otherwise it returns an array.
    */
   getPosition: function (...args) {
     let cm = editors.get(this);
     let res = args.map((ind) => cm.posFromIndex(ind));
     return args.length === 1 ? res[0] : res;
   },
   /**
    * The reverse of getPosition. Similarly to getPosition this
    * method returns a single value if only one argument was given
    * and an array otherwise.
    */
   getOffset: function (...args) {
     let cm = editors.get(this);
     let res = args.map((pos) => cm.indexFromPos(pos));
     return args.length > 1 ? res : res[0];
   },
   /**
    * Returns a {line, ch} object that corresponds to the
    * left, top coordinates.
    */
   getPositionFromCoords: function ({left, top}) {
     let cm = editors.get(this);
     return cm.coordsChar({ left: left, top: top });
   },
   /**
    * The reverse of getPositionFromCoords. Similarly, returns a {left, top}
    * object that corresponds to the specified line and character number.
    */
   getCoordsFromPosition: function ({line, ch}) {
     let cm = editors.get(this);
     return cm.charCoords({ line: ~~line, ch: ~~ch });
   },
   /**
    * Returns true if there's something to undo and false otherwise.
    */
   canUndo: function () {
     let cm = editors.get(this);
     return cm.historySize().undo > 0;
   },
   /**
    * Returns true if there's something to redo and false otherwise.
    */
   canRedo: function () {
     let cm = editors.get(this);
     return cm.historySize().redo > 0;
   },
   /**
    * Marks the contents as clean and returns the current
    * version number.
    */
   setClean: function () {
     let cm = editors.get(this);
     this.version = cm.changeGeneration();
     this._lastDirty = false;
     this.emit("dirty-change");
     return this.version;
   },
   /**
    * Returns true if contents of the text area are
    * clean i.e. no changes were made since the last version.
    */
   isClean: function () {
     let cm = editors.get(this);
     return cm.isClean(this.version);
   },
   /**
    * This method opens an in-editor dialog asking for a line to
    * jump to. Once given, it changes cursor to that line.
    */
   jumpToLine: function () {
     let doc = editors.get(this).getWrapperElement().ownerDocument;
     let div = doc.createElement("div");
     let inp = doc.createElement("input");
     let txt = doc.createTextNode(L10N.GetStringFromName("gotoLineCmd.promptTitle"));
     inp.type = "text";
     inp.style.width = "10em";
     inp.style.MozMarginStart = "1em";
     div.appendChild(txt);
     div.appendChild(inp);
     this.openDialog(div, (line) => this.setCursor({ line: line - 1, ch: 0 }));
   },
   /**
    * Moves the content of the current line or the lines selected up a line.
    */
   moveLineUp: function () {
     let cm = editors.get(this);
     let start = cm.getCursor("start");
     let end = cm.getCursor("end");
     if (start.line === 0)
       return;
     // Get the text in the lines selected or the current line of the cursor
     // and append the text of the previous line.
     let value;
     if (start.line !== end.line) {
       value = cm.getRange({ line: start.line, ch: 0 },
         { line: end.line, ch: cm.getLine(end.line).length }) + "\n";
     } else {
       value = cm.getLine(start.line) + "\n";
     }
     value += cm.getLine(start.line - 1);
     // Replace the previous line and the currently selected lines with the new
     // value and maintain the selection of the text.
     cm.replaceRange(value, { line: start.line - 1, ch: 0 },
       { line: end.line, ch: cm.getLine(end.line).length });
     cm.setSelection({ line: start.line - 1, ch: start.ch },
       { line: end.line - 1, ch: end.ch });
   },
   /**
    * Moves the content of the current line or the lines selected down a line.
    */
   moveLineDown: function () {
     let cm = editors.get(this);
     let start = cm.getCursor("start");
     let end = cm.getCursor("end");
     if (end.line + 1 === cm.lineCount())
       return;
     // Get the text of next line and append the text in the lines selected
     // or the current line of the cursor.
     let value = cm.getLine(end.line + 1) + "\n";
     if (start.line !== end.line) {
       value += cm.getRange({ line: start.line, ch: 0 },
         { line: end.line, ch: cm.getLine(end.line).length });
     } else {
       value += cm.getLine(start.line);
     }
     // Replace the currently selected lines and the next line with the new
     // value and maintain the selection of the text.
     cm.replaceRange(value, { line: start.line, ch: 0 },
       { line: end.line + 1, ch: cm.getLine(end.line + 1).length});
     cm.setSelection({ line: start.line + 1, ch: start.ch },
       { line: end.line + 1, ch: end.ch });
   },
   /**
    * Returns current font size for the editor area, in pixels.
    */
   getFontSize: function () {
     let cm  = editors.get(this);
     let el  = cm.getWrapperElement();
     let win = el.ownerDocument.defaultView;
     return parseInt(win.getComputedStyle(el).getPropertyValue("font-size"), 10);
   },
   /**
    * Sets font size for the editor area.
    */
   setFontSize: function (size) {
     let cm = editors.get(this);
     cm.getWrapperElement().style.fontSize = parseInt(size, 10) + "px";
     cm.refresh();
   },
   /**
    * Extends an instance of the Editor object with additional
    * functions. Each function will be called with context as
    * the first argument. Context is a {ed, cm} object where
    * 'ed' is an instance of the Editor object and 'cm' is an
    * instance of the CodeMirror object. Example:
    *
    * function hello(ctx, name) {
    *   let { cm, ed } = ctx;
    *   cm;   // CodeMirror instance
    *   ed;   // Editor instance
    *   name; // 'Mozilla'
    * }
    *
    * editor.extend({ hello: hello });
    * editor.hello('Mozilla');
    */
   extend: function (funcs) {
     Object.keys(funcs).forEach((name) => {
       let cm  = editors.get(this);
       let ctx = { ed: this, cm: cm, Editor: Editor};
       if (name === "initialize") {
         funcs[name](ctx);
         return;
       }
       this[name] = funcs[name].bind(null, ctx);
     });
   },
   destroy: function () {
     this.container = null;
     this.config = null;
     this.version = null;
     this.emit("destroy");
   }
 };
 // Since Editor is a thin layer over CodeMirror some methods
 // are mapped directly—without any changes.
 CM_MAPPING.forEach(function (name) {
   Editor.prototype[name] = function (...args) {
     let cm = editors.get(this);
     return cm[name].apply(cm, args);
   };
 });
 // Static methods on the Editor object itself.
 /**
  * Returns a string representation of a shortcut 'key' with
  * a OS specific modifier. Cmd- for Macs, Ctrl- for other
  * platforms. Useful with extraKeys configuration option.
  *
  * CodeMirror defines all keys with modifiers in the following
  * order: Shift - Ctrl/Cmd - Alt - Key
  */
 Editor.accel = function (key, modifiers={}) {
   return (modifiers.shift ? "Shift-" : "") +
          (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") +
          (modifiers.alt ? "Alt-" : "") + key;
 };
 /**
  * Returns a string representation of a shortcut for a
  * specified command 'cmd'. Append Cmd- for macs, Ctrl- for other
  * platforms unless noaccel is specified in the options. Useful when overwriting
  * or disabling default shortcuts.
  */
 Editor.keyFor = function (cmd, opts={ noaccel: false }) {
   let key = L10N.GetStringFromName(cmd + ".commandkey");
   return opts.noaccel ? key : Editor.accel(key);
 };
 // Since Gecko already provide complete and up to date list of CSS property
 // names, values and color names, we compute them so that they can replace
 // the ones used in CodeMirror while initiating an editor object. This is done
 // here instead of the file codemirror/css.js so as to leave that file untouched
 // and easily upgradable.
 function getCSSKeywords() {
   function keySet(array) {
     var keys = {};
     for (var i = 0; i < array.length; ++i) {
       keys[array[i]] = true;
     }
     return keys;
   }
   let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
                    .getService(Ci.inIDOMUtils);
   let cssProperties = domUtils.getCSSPropertyNames(domUtils.INCLUDE_ALIASES);
   let cssColors = {};
   let cssValues = {};
   cssProperties.forEach(property => {
     if (property.contains("color")) {
       domUtils.getCSSValuesForProperty(property).forEach(value => {
         cssColors[value] = true;
       });
     }
     else {
       domUtils.getCSSValuesForProperty(property).forEach(value => {
         cssValues[value] = true;
       });
     }
   });
   return {
     cssProperties: keySet(cssProperties),
     cssValues: cssValues,
     cssColors: cssColors
   };
 }
 /**
  * Returns a controller object that can be used for
  * editor-specific commands such as find, jump to line,
  * copy/paste, etc.
  */
 function controller(ed) {
   return {
     supportsCommand: function (cmd) {
       switch (cmd) {
         case "cmd_find":
         case "cmd_findAgain":
         case "cmd_findPrevious":
         case "cmd_gotoLine":
         case "cmd_undo":
         case "cmd_redo":
         case "cmd_delete":
         case "cmd_selectAll":
           return true;
       }
       return false;
     },
     isCommandEnabled: function (cmd) {
       let cm = editors.get(ed);
       switch (cmd) {
         case "cmd_find":
         case "cmd_gotoLine":
         case "cmd_selectAll":
           return true;
         case "cmd_findAgain":
           return cm.state.search != null && cm.state.search.query != null;
         case "cmd_undo":
           return ed.canUndo();
         case "cmd_redo":
           return ed.canRedo();
         case "cmd_delete":
           return ed.somethingSelected();
       }
       return false;
     },
     doCommand: function (cmd) {
       let cm  = editors.get(ed);
       let map = {
         "cmd_selectAll": "selectAll",
         "cmd_find": "find",
         "cmd_undo": "undo",
         "cmd_redo": "redo",
         "cmd_delete": "delCharAfter",
         "cmd_findAgain": "findNext"
       };
       if (map[cmd]) {
         cm.execCommand(map[cmd]);
         return;
       }
       if (cmd == "cmd_gotoLine")
         ed.jumpToLine();
     },
     onEvent: function () {}
   };
 }
 /**
  * Detect the indentation used in an editor. Returns an object
  * with 'tabs' - whether this is tab-indented and 'spaces' - the
  * width of one indent in spaces. Or `null` if it's inconclusive.
  */
 function detectIndentation(ed) {
   let cm = editors.get(ed);
   let spaces = {};  // # spaces indent -> # lines with that indent
   let last = 0;     // indentation width of the last line we saw
   let tabs = 0;     // # of lines that start with a tab
   let total = 0;    // # of indented lines (non-zero indent)
   cm.eachLine(0, DETECT_INDENT_MAX_LINES, (line) => {
     let text = line.text;
     if (text.startsWith("\t")) {
       tabs++;
       total++;
       return;
     }
     let width = 0;
     while (text[width] === " ") {
       width++;
     }
     // don't count lines that are all spaces
     if (width == text.length) {
       last = 0;
       return;
     }
     if (width > 1) {
       total++;
     }
     // see how much this line is offset from the line above it
     let indent = Math.abs(width - last);
     if (indent > 1 && indent <= 8) {
       spaces[indent] = (spaces[indent] || 0) + 1;
     }
     last = width;
   });
   // this file is not indented at all
   if (total == 0) {
     return null;
   }
   // mark as tabs if they start more than half the lines
   if (tabs >= total / 2) {
     return { tabs: true };
   }
   // find most frequent non-zero width difference between adjacent lines
   let freqIndent = null, max = 1;
   for (let width in spaces) {
     width = parseInt(width, 10);
     let tally = spaces[width];
     if (tally > max) {
       max = tally;
       freqIndent = width;
     }
   }
   if (!freqIndent) {
     return null;
   }
   return { tabs: false, spaces: freqIndent };
 }
 module.exports = Editor;