Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /devtools/client/sourceeditor/editor.js
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
1 files changed, 1410 insertions, 0 deletions
diff --git a/devtools/client/sourceeditor/editor.js b/devtools/client/sourceeditor/editor.js
new file mode 100644
index 000000000..ce2136afc
--- /dev/null
+++ b/devtools/client/sourceeditor/editor.js
@@ -0,0 +1,1410 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2; fill-column: 80 -*- */
+/* 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 {
+  EXPAND_TAB,
+  TAB_SIZE,
+  DETECT_INDENT,
+  getIndentationFromIteration
+} = require("devtools/shared/indentation");
+
+const ENABLE_CODE_FOLDING = "devtools.editor.enableCodeFolding";
+const KEYMAP = "devtools.editor.keymap";
+const AUTO_CLOSE = "devtools.editor.autoclosebrackets";
+const AUTOCOMPLETE = "devtools.editor.autocomplete";
+const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+const VALID_KEYMAPS = new Set(["emacs", "vim", "sublime"]);
+
+// 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;
+
+// Match @Scratchpad/N:LINE[:COLUMN] or (LINE[:COLUMN]) anywhere at an end of
+// line in text selection.
+const RE_SCRATCHPAD_ERROR = /(?:@Scratchpad\/\d+:|\()(\d+):?(\d+)?(?:\)|\n)/;
+const RE_JUMP_TO_LINE = /^(\d+):?(\d+)?/;
+
+const Services = require("Services");
+const promise = require("promise");
+const events = require("devtools/shared/event-emitter");
+const { PrefObserver } = require("devtools/client/styleeditor/utils");
+const { getClientCssProperties } = require("devtools/shared/fronts/css-properties");
+const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/sourceeditor.properties");
+
+const { OS } = Services.appinfo;
+
+// 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://devtools/content/sourceeditor/codemirror/lib/codemirror.css",
+  "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css",
+  "chrome://devtools/content/sourceeditor/codemirror/mozilla.css"
+];
+
+const CM_SCRIPTS = [
+  "chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.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% !important; line-height: 1.25 !important; }" +
+  "    </style>" +
+  CM_STYLES.map(style => "<link rel='stylesheet' href='" + style + "'>").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",
+  "getViewport"
+];
+
+const editors = new WeakMap();
+
+Editor.modes = {
+  text: { name: "text" },
+  html: { name: "htmlmixed" },
+  css: { name: "css" },
+  wasm: { name: "wasm" },
+  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 element, or
+ * an ID of an element that 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 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,
+    inputStyle: "textarea",
+    styleActiveLine: true,
+    autoCloseBrackets: "()[]{}''\"\"``",
+    autoCloseEnabled: useAutoClose,
+    theme: "mozilla",
+    themeSwitching: true,
+    autocomplete: false,
+    autocompleteOpts: {}
+  };
+
+  // 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;
+
+  // 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];
+    });
+  });
+
+  if (!this.config.gutters) {
+    this.config.gutters = [];
+  }
+  if (this.config.lineNumbers
+      && this.config.gutters.indexOf("CodeMirror-linenumbers") === -1) {
+    this.config.gutters.push("CodeMirror-linenumbers");
+  }
+
+  // Remember the initial value of autoCloseBrackets.
+  this.config.autoCloseBracketsSaved = this.config.autoCloseBrackets;
+
+  // 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;
+    }
+
+    let num = cm.getOption("indentUnit");
+    if (cm.getCursor().ch !== 0) {
+      num -= 1;
+    }
+    cm.replaceSelection(" ".repeat(num), "end", "+input");
+  };
+
+  // Allow add-ons to inject scripts for their editor instances
+  if (!this.config.externalScripts) {
+    this.config.externalScripts = [];
+  }
+
+  if (this.config.cssProperties) {
+    // Ensure that autocompletion has cssProperties if it's passed in via the options.
+    this.config.autocompleteOpts.cssProperties = this.config.cssProperties;
+  } else {
+    // Use a static client-side database of CSS values if none is provided.
+    this.config.cssProperties = getClientCssProperties();
+  }
+
+  events.decorate(this);
+}
+
+Editor.prototype = {
+  container: null,
+  version: null,
+  config: null,
+  Doc: null,
+
+  /**
+   * Exposes the CodeMirror instance. We want to get away from trying to
+   * abstract away the API entirely, and this makes it easier to integrate in
+   * various environments and do complex things.
+   */
+  get codeMirror() {
+    if (!editors.has(this)) {
+      throw new Error(
+        "CodeMirror instance does not exist. You must wait " +
+          "for it to be appended to the DOM."
+      );
+    }
+    return editors.get(this);
+  },
+
+  /**
+   * 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 = () => {
+      let win = env.contentWindow.wrappedJSObject;
+
+      if (!this.config.themeSwitching) {
+        win.document.documentElement.setAttribute("force-theme", "light");
+      }
+
+      Services.scriptloader.loadSubScript(
+        "chrome://devtools/content/shared/theme-switching.js",
+        win, "utf8"
+      );
+      this.container = env;
+      this._setup(win.document.body, el.ownerDocument);
+      env.removeEventListener("load", onLoad, true);
+
+      def.resolve();
+    };
+
+    env.addEventListener("load", onLoad, true);
+    env.setAttribute("src", CM_IFRAME);
+    el.appendChild(env);
+
+    this.once("destroy", () => el.removeChild(env));
+    return def.promise;
+  },
+
+  appendToLocalElement: function (el) {
+    this._setup(el);
+  },
+
+  /**
+   * Do the actual appending and configuring of the CodeMirror instance. This is
+   * used by both append functions above, and does all the hard work to
+   * configure CodeMirror with all the right options/modes/etc.
+   */
+  _setup: function (el, doc) {
+    doc = doc || el.ownerDocument;
+    let win = el.ownerDocument.defaultView;
+
+    let scriptsToInject = CM_SCRIPTS.concat(this.config.externalScripts);
+    scriptsToInject.forEach(url => {
+      if (url.startsWith("chrome://")) {
+        Services.scriptloader.loadSubScript(url, win, "utf8");
+      }
+    });
+
+    // Replace the propertyKeywords, colorKeywords and valueKeywords
+    // properties of the CSS MIME type with the values provided by the CSS properties
+    // database.
+    const {
+      propertyKeywords,
+      colorKeywords,
+      valueKeywords
+    } = getCSSKeywords(this.config.cssProperties);
+
+    let cssSpec = win.CodeMirror.resolveMode("text/css");
+    cssSpec.propertyKeywords = propertyKeywords;
+    cssSpec.colorKeywords = colorKeywords;
+    cssSpec.valueKeywords = valueKeywords;
+    win.CodeMirror.defineMIME("text/css", cssSpec);
+
+    let scssSpec = win.CodeMirror.resolveMode("text/x-scss");
+    scssSpec.propertyKeywords = propertyKeywords;
+    scssSpec.colorKeywords = colorKeywords;
+    scssSpec.valueKeywords = valueKeywords;
+    win.CodeMirror.defineMIME("text/x-scss", scssSpec);
+
+    win.CodeMirror.commands.save = () => this.emit("saveRequested");
+
+    // Create a CodeMirror instance add support for context menus,
+    // overwrite the default controller (otherwise items in the top and
+    // context menus won't work).
+
+    let cm = win.CodeMirror(el, this.config);
+    this.Doc = win.CodeMirror.Doc;
+
+    // Disable APZ for source editors. It currently causes the line numbers to
+    // "tear off" and swim around on top of the content. Bug 1160601 tracks
+    // finding a solution that allows APZ to work with CodeMirror.
+    cm.getScrollerElement().addEventListener("wheel", ev => {
+      // By handling the wheel events ourselves, we force the platform to
+      // scroll synchronously, like it did before APZ. However, we lose smooth
+      // scrolling for users with mouse wheels. This seems acceptible vs.
+      // doing nothing and letting the gutter slide around.
+      ev.preventDefault();
+
+      let { deltaX, deltaY } = ev;
+
+      if (ev.deltaMode == ev.DOM_DELTA_LINE) {
+        deltaX *= cm.defaultCharWidth();
+        deltaY *= cm.defaultTextHeight();
+      } else if (ev.deltaMode == ev.DOM_DELTA_PAGE) {
+        deltaX *= cm.getWrapperElement().clientWidth;
+        deltaY *= cm.getWrapperElement().clientHeight;
+      }
+
+      cm.getScrollerElement().scrollBy(deltaX, deltaY);
+    });
+
+    cm.getWrapperElement().addEventListener("contextmenu", ev => {
+      ev.preventDefault();
+
+      if (!this.config.contextMenu) {
+        return;
+      }
+
+      let popup = this.config.contextMenu;
+      if (typeof popup == "string") {
+        popup = doc.getElementById(this.config.contextMenu);
+      }
+
+      this.emit("popupOpen", ev, popup);
+      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", () => this.emit("cursorActivity"));
+
+    cm.on("gutterClick", (cmArg, 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) {
+        cmArg.setSelection(head, tail);
+        return;
+      }
+
+      this.emit("gutterClick", line, ev.button);
+    });
+
+    win.CodeMirror.defineExtension("l10n", (name) => {
+      return L10N.getStr(name);
+    });
+
+    this._initShortcuts(win);
+
+    editors.set(this, cm);
+
+    this.reloadPreferences = this.reloadPreferences.bind(this);
+    this._prefObserver = new PrefObserver("devtools.editor.");
+    this._prefObserver.on(TAB_SIZE, this.reloadPreferences);
+    this._prefObserver.on(EXPAND_TAB, this.reloadPreferences);
+    this._prefObserver.on(KEYMAP, this.reloadPreferences);
+    this._prefObserver.on(AUTO_CLOSE, this.reloadPreferences);
+    this._prefObserver.on(AUTOCOMPLETE, this.reloadPreferences);
+    this._prefObserver.on(DETECT_INDENT, this.reloadPreferences);
+    this._prefObserver.on(ENABLE_CODE_FOLDING, this.reloadPreferences);
+
+    this.reloadPreferences();
+
+    win.editor = this;
+    let editorReadyEvent = new win.CustomEvent("editorReady");
+    win.dispatchEvent(editorReadyEvent);
+  },
+
+  /**
+   * Returns a boolean indicating whether the editor is ready to
+   * use. Use appendTo(el).then(() => {}) for most cases
+   */
+  isAppended: function () {
+    return editors.has(this);
+  },
+
+  /**
+   * Returns the currently active highlighting mode.
+   * See Editor.modes for the list of all suppoert modes.
+   */
+  getMode: function () {
+    return this.getOption("mode");
+  },
+
+  /**
+   * Loads a script into editor's containing window.
+   */
+  loadScript: function (url) {
+    if (!this.container) {
+      throw new Error("Can't load a script until the editor is loaded.");
+    }
+    let win = this.container.contentWindow.wrappedJSObject;
+    Services.scriptloader.loadSubScript(url, win, "utf8");
+  },
+
+  /**
+   * Creates a CodeMirror Document
+   * @returns CodeMirror.Doc
+   */
+  createDocument: function () {
+    return new this.Doc("");
+  },
+
+  /**
+   * Replaces the current document with a new source document
+   */
+  replaceDocument: function (doc) {
+    let cm = editors.get(this);
+    cm.swapDoc(doc);
+  },
+
+  /**
+   * Changes the value of a currently used highlighting mode.
+   * See Editor.modes for the list of all supported modes.
+   */
+  setMode: function (value) {
+    this.setOption("mode", value);
+
+    // If autocomplete was set up and the mode is changing, then
+    // turn it off and back on again so the proper mode can be used.
+    if (this.config.autocomplete) {
+      this.setOption("autocomplete", false);
+      this.setOption("autocomplete", true);
+    }
+  },
+
+  /**
+   * 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();
+  },
+
+  /**
+   * Reloads the state of the editor based on all current preferences.
+   * This is called automatically when any of the relevant preferences
+   * change.
+   */
+  reloadPreferences: function () {
+    // Restore the saved autoCloseBrackets value if it is preffed on.
+    let useAutoClose = Services.prefs.getBoolPref(AUTO_CLOSE);
+    this.setOption("autoCloseBrackets",
+      useAutoClose ? this.config.autoCloseBracketsSaved : false);
+
+    // If alternative keymap is provided, use it.
+    const keyMap = Services.prefs.getCharPref(KEYMAP);
+    if (VALID_KEYMAPS.has(keyMap)) {
+      this.setOption("keyMap", keyMap);
+    } else {
+      this.setOption("keyMap", "default");
+    }
+    this.updateCodeFoldingGutter();
+
+    this.resetIndentUnit();
+    this.setupAutoCompletion();
+  },
+
+  /**
+   * Sets the editor's indentation based on the current prefs and
+   * re-detect indentation if we should.
+   */
+  resetIndentUnit: function () {
+    let cm = editors.get(this);
+
+    let iterFn = function (start, end, callback) {
+      cm.eachLine(start, end, (line) => {
+        return callback(line.text);
+      });
+    };
+
+    let {indentUnit, indentWithTabs} = getIndentationFromIteration(iterFn);
+
+    cm.setOption("tabSize", 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});
+    this.emit("cursorActivity");
+  },
+
+  /**
+   * 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 marker = this.getMarker(line, 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;
+    let marker;
+    if (gutterMarkers) {
+      marker = gutterMarkers[gutterName];
+      if (marker) {
+        marker.classList.add(markerClass);
+        return;
+      }
+    }
+
+    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);
+  },
+
+  /**
+   * Adds a marker with a specified class and an HTML content to a line's
+   * gutter. If another marker exists on that line, it is overwritten by a new
+   * marker.
+   */
+  addContentMarker: function (line, gutterName, markerClass, content) {
+    let cm = editors.get(this);
+    let info = cm.lineInfo(line);
+    if (!info) {
+      return;
+    }
+
+    let marker = cm.getWrapperElement().ownerDocument.createElement("div");
+    marker.className = markerClass;
+    marker.innerHTML = content;
+    cm.setGutterMarker(info.line, gutterName, marker);
+  },
+
+  /**
+   * The reverse of addContentMarker. Removes any line's markers in the
+   * specified gutter.
+   */
+  removeContentMarker: function (line, gutterName) {
+    let cm = editors.get(this);
+    let info = cm.lineInfo(line);
+    if (!info) {
+      return;
+    }
+
+    cm.setGutterMarker(info.line, gutterName, null);
+  },
+
+  getMarker: function (line, gutterName) {
+    let cm = editors.get(this);
+    let info = cm.lineInfo(line);
+    if (!info) {
+      return null;
+    }
+
+    let gutterMarkers = info.gutterMarkers;
+    if (!gutterMarkers) {
+      return null;
+    }
+
+    return gutterMarkers[gutterName];
+  },
+
+  /**
+   * Removes 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, eventsArg, data) {
+    if (!this.hasMarker(line, gutterName, markerClass)) {
+      return;
+    }
+
+    let cm = editors.get(this);
+    let marker = cm.lineInfo(line).gutterMarkers[gutterName];
+
+    for (let name in eventsArg) {
+      let listener = eventsArg[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;
+  },
+
+  /**
+   * Sets 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.getStr("gotoLineCmd.promptTitle"));
+
+    inp.type = "text";
+    inp.style.width = "10em";
+    inp.style.marginInlineStart = "1em";
+
+    div.appendChild(txt);
+    div.appendChild(inp);
+
+    if (!this.hasMultipleSelections()) {
+      let cm = editors.get(this);
+      let sel = cm.getSelection();
+      // Scratchpad inserts and selects a comment after an error happens:
+      // "@Scratchpad/1:10:2". Parse this to get the line and column.
+      // In the string above this is line 10, column 2.
+      let match = sel.match(RE_SCRATCHPAD_ERROR);
+      if (match) {
+        let [, line, column ] = match;
+        inp.value = column ? line + ":" + column : line;
+        inp.selectionStart = inp.selectionEnd = inp.value.length;
+      }
+    }
+
+    this.openDialog(div, (line) => {
+      // Handle LINE:COLUMN as well as LINE
+      let match = line.toString().match(RE_JUMP_TO_LINE);
+      if (match) {
+        let [, matchLine, column ] = match;
+        this.setCursor({line: matchLine - 1, ch: column ? column - 1 : 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 });
+  },
+
+  /**
+   * Intercept CodeMirror's Find and replace key shortcut to select the search input
+   */
+  findOrReplace: function (node, isReplaceAll) {
+    let cm = editors.get(this);
+    let isInput = node.tagName === "INPUT";
+    let isSearchInput = isInput && node.type === "search";
+    // replace box is a different input instance than search, and it is
+    // located in a code mirror dialog
+    let isDialogInput = isInput &&
+        node.parentNode &&
+        node.parentNode.classList.contains("CodeMirror-dialog");
+    if (!(isSearchInput || isDialogInput)) {
+      return;
+    }
+
+    if (isSearchInput || isReplaceAll) {
+      // select the search input
+      // it's the precise reason why we reimplement these key shortcuts
+      node.select();
+    }
+
+    // need to call it since we prevent the propagation of the event and
+    // cancel codemirror's key handling
+    cm.execCommand("find");
+  },
+
+  /**
+   * Intercept CodeMirror's findNext and findPrev key shortcut to allow
+   * immediately search for next occurance after typing a word to search.
+   */
+  findNextOrPrev: function (node, isFindPrev) {
+    let cm = editors.get(this);
+    let isInput = node.tagName === "INPUT";
+    let isSearchInput = isInput && node.type === "search";
+    if (!isSearchInput) {
+      return;
+    }
+    let query = node.value;
+    // cm.state.search allows to automatically start searching for the next occurance
+    // it's the precise reason why we reimplement these key shortcuts
+    if (!cm.state.search || cm.state.search.query !== query) {
+      cm.state.search = {
+        posFrom: null,
+        posTo: null,
+        overlay: null,
+        query
+      };
+    }
+
+    // need to call it since we prevent the propagation of the event and
+    // cancel codemirror's key handling
+    if (isFindPrev) {
+      cm.execCommand("findPrev");
+    } else {
+      cm.execCommand("findNext");
+    }
+  },
+
+  /**
+   * 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();
+  },
+
+  /**
+   * Sets an option for the editor.  For most options it just defers to
+   * CodeMirror.setOption, but certain ones are maintained within the editor
+   * instance.
+   */
+  setOption: function (o, v) {
+    let cm = editors.get(this);
+
+    // Save the state of a valid autoCloseBrackets string, so we can reset
+    // it if it gets preffed off and back on.
+    if (o === "autoCloseBrackets" && v) {
+      this.config.autoCloseBracketsSaved = v;
+    }
+
+    if (o === "autocomplete") {
+      this.config.autocomplete = v;
+      this.setupAutoCompletion();
+    } else {
+      cm.setOption(o, v);
+      this.config[o] = v;
+    }
+
+    if (o === "enableCodeFolding") {
+      // The new value maybe explicitly force foldGUtter on or off, ignoring
+      // the prefs service.
+      this.updateCodeFoldingGutter();
+    }
+  },
+
+  /**
+   * Gets an option for the editor.  For most options it just defers to
+   * CodeMirror.getOption, but certain ones are maintained within the editor
+   * instance.
+   */
+  getOption: function (o) {
+    let cm = editors.get(this);
+    if (o === "autocomplete") {
+      return this.config.autocomplete;
+    }
+
+    return cm.getOption(o);
+  },
+
+  /**
+   * Sets up autocompletion for the editor. Lazily imports the required
+   * dependencies because they vary by editor mode.
+   *
+   * Autocompletion is special, because we don't want to automatically use
+   * it just because it is preffed on (it still needs to be requested by the
+   * editor), but we do want to always disable it if it is preffed off.
+   */
+  setupAutoCompletion: function () {
+    // The autocomplete module will overwrite this.initializeAutoCompletion
+    // with a mode specific autocompletion handler.
+    if (!this.initializeAutoCompletion) {
+      this.extend(require("./autocomplete"));
+    }
+
+    if (this.config.autocomplete && Services.prefs.getBoolPref(AUTOCOMPLETE)) {
+      this.initializeAutoCompletion(this.config.autocompleteOpts);
+    } else {
+      this.destroyAutoCompletion();
+    }
+  },
+
+  /**
+   * 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;
+
+    if (this._prefObserver) {
+      this._prefObserver.off(TAB_SIZE, this.reloadPreferences);
+      this._prefObserver.off(EXPAND_TAB, this.reloadPreferences);
+      this._prefObserver.off(KEYMAP, this.reloadPreferences);
+      this._prefObserver.off(AUTO_CLOSE, this.reloadPreferences);
+      this._prefObserver.off(AUTOCOMPLETE, this.reloadPreferences);
+      this._prefObserver.off(DETECT_INDENT, this.reloadPreferences);
+      this._prefObserver.off(ENABLE_CODE_FOLDING, this.reloadPreferences);
+      this._prefObserver.destroy();
+    }
+
+    this.emit("destroy");
+  },
+
+  updateCodeFoldingGutter: function () {
+    let shouldFoldGutter = this.config.enableCodeFolding;
+    let foldGutterIndex = this.config.gutters.indexOf("CodeMirror-foldgutter");
+    let cm = editors.get(this);
+
+    if (shouldFoldGutter === undefined) {
+      shouldFoldGutter = Services.prefs.getBoolPref(ENABLE_CODE_FOLDING);
+    }
+
+    if (shouldFoldGutter) {
+      // Add the gutter before enabling foldGutter
+      if (foldGutterIndex === -1) {
+        let gutters = this.config.gutters.slice();
+        gutters.push("CodeMirror-foldgutter");
+        this.setOption("gutters", gutters);
+      }
+
+      this.setOption("foldGutter", true);
+    } else {
+      // No code should remain folded when folding is off.
+      if (cm) {
+        cm.execCommand("unfoldAll");
+      }
+
+      // Remove the gutter so it doesn't take up space
+      if (foldGutterIndex !== -1) {
+        let gutters = this.config.gutters.slice();
+        gutters.splice(foldGutterIndex, 1);
+        this.setOption("gutters", gutters);
+      }
+
+      this.setOption("foldGutter", false);
+    }
+  },
+
+  /**
+   * Register all key shortcuts.
+   */
+  _initShortcuts: function (win) {
+    let shortcuts = new KeyShortcuts({
+      window: win
+    });
+    this._onShortcut = this._onShortcut.bind(this);
+    let keys = [
+      "find.key",
+      "findNext.key",
+      "findPrev.key"
+    ];
+
+    if (OS === "Darwin") {
+      keys.push("replaceAllMac.key");
+    } else {
+      keys.push("replaceAll.key");
+    }
+    // Process generic keys:
+    keys.forEach(name => {
+      let key = L10N.getStr(name);
+      shortcuts.on(key, (_, event) => this._onShortcut(name, event));
+    });
+  },
+    /**
+   * Key shortcut listener.
+   */
+  _onShortcut: function (name, event) {
+    if (!this._isInputOrTextarea(event.target)) {
+      return;
+    }
+    let node = event.originalTarget;
+
+    switch (name) {
+      // replaceAll.key is Alt + find.key
+      case "replaceAllMac.key":
+        this.findOrReplace(node, true);
+        break;
+      // replaceAll.key is Shift + find.key
+      case "replaceAll.key":
+        this.findOrReplace(node, true);
+        break;
+      case "find.key":
+        this.findOrReplace(node, false);
+        break;
+      // findPrev.key is Shift + findNext.key
+      case "findPrev.key":
+        this.findNextOrPrev(node, true);
+        break;
+      case "findNext.key":
+        this.findNextOrPrev(node, false);
+        break;
+      default:
+        console.error("Unexpected editor key shortcut", name);
+        return;
+    }
+    // Prevent default for this action
+    event.stopPropagation();
+    event.preventDefault();
+  },
+
+  /**
+   * Check if a node is an input or textarea
+   */
+  _isInputOrTextarea: function (element) {
+    let name = element.tagName.toLowerCase();
+    return name === "input" || name === "textarea";
+  }
+};
+
+// Since Editor is a thin layer over CodeMirror some methods
+// are mapped directly—without any changes.
+
+CM_MAPPING.forEach(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.getStr(cmd + ".commandkey");
+  return opts.noaccel ? key : Editor.accel(key);
+};
+
+/**
+ * We compute the CSS property names, values, and color names to be used with
+ * CodeMirror to more closely reflect what is supported by the target platform.
+ * The database is used to replace the values 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(cssProperties) {
+  function keySet(array) {
+    let keys = {};
+    for (let i = 0; i < array.length; ++i) {
+      keys[array[i]] = true;
+    }
+    return keys;
+  }
+
+  let propertyKeywords = cssProperties.getNames();
+  let colorKeywords = {};
+  let valueKeywords = {};
+
+  propertyKeywords.forEach(property => {
+    if (property.includes("color")) {
+      cssProperties.getValues(property).forEach(value => {
+        colorKeywords[value] = true;
+      });
+    } else {
+      cssProperties.getValues(property).forEach(value => {
+        valueKeywords[value] = true;
+      });
+    }
+  });
+
+  return {
+    propertyKeywords: keySet(propertyKeywords),
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords
+  };
+}
+
+module.exports = Editor;
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /devtools/client/sourceeditor/editor.js
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip