Bug 1530255 - Load keyMap files on demand; r=bgrins.

We use to include all the keyMap files in the
codeMirror bundle, but these files can be
pretty large, and are useless if the user did
not select a custom key mapping in the settings
panel.
This patch changes this to only load those files
when they are needed, either when a new editor
is created, or when the user changes the key mapping
preference. The files are only loaded once.

Differential Revision: https://phabricator.services.mozilla.com/D22977

--HG--
extra : moz-landing-system : lando

devtools/client/jar.mn

@@ -18,6 +18,9 @@ devtools.jar:
     content/shared/sourceeditor/codemirror/addon/dialog/dialog.css (shared/sourceeditor/codemirror/addon/dialog/dialog.css)
     content/shared/sourceeditor/codemirror/addon/hint/show-hint.js (shared/sourceeditor/codemirror/addon/hint/show-hint.js)
     content/shared/sourceeditor/codemirror/addon/tern/tern.js (shared/sourceeditor/codemirror/addon/tern/tern.js)
+    content/shared/sourceeditor/codemirror/keymap/emacs.js (shared/sourceeditor/codemirror/keymap/emacs.js)
+    content/shared/sourceeditor/codemirror/keymap/vim.js (shared/sourceeditor/codemirror/keymap/vim.js)
+    content/shared/sourceeditor/codemirror/keymap/sublime.js (shared/sourceeditor/codemirror/keymap/sublime.js)
     content/shared/sourceeditor/codemirror/codemirror.bundle.js (shared/sourceeditor/codemirror/codemirror.bundle.js)
     content/shared/sourceeditor/codemirror/lib/codemirror.css (shared/sourceeditor/codemirror/lib/codemirror.css)
     content/shared/sourceeditor/codemirror/mozilla.css (shared/sourceeditor/codemirror/mozilla.css)

devtools/client/shared/sourceeditor/editor.js

@@ -14,11 +14,19 @@ const {
 } = require("devtools/shared/indentation");
 
 const ENABLE_CODE_FOLDING = "devtools.editor.enableCodeFolding";
-const KEYMAP = "devtools.editor.keymap";
+const KEYMAP_PREF = "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"]);
+
+const VALID_KEYMAPS = new Map([
+  ["emacs", "chrome://devtools/content/shared/sourceeditor/codemirror/keymap/emacs.js"],
+  ["vim", "chrome://devtools/content/shared/sourceeditor/codemirror/keymap/vim.js"],
+  [
+    "sublime",
+    "chrome://devtools/content/shared/sourceeditor/codemirror/keymap/sublime.js",
+  ],
+]);
 
 // 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.
@@ -435,10 +443,11 @@ Editor.prototype = {
     editors.set(this, cm);
 
     this.reloadPreferences = this.reloadPreferences.bind(this);
+    this.setKeyMap = this.setKeyMap.bind(this, win);
+
     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);
@@ -446,6 +455,11 @@ Editor.prototype = {
 
     this.reloadPreferences();
 
+    // Init a map of the loaded keymap files. Should be of the form Map<String->Boolean>.
+    this._loadedKeyMaps = new Set();
+    this._prefObserver.on(KEYMAP_PREF, this.setKeyMap);
+    this.setKeyMap();
+
     win.editor = this;
     const editorReadyEvent = new win.CustomEvent("editorReady");
     win.dispatchEvent(editorReadyEvent);
@@ -614,19 +628,36 @@ Editor.prototype = {
     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();
   },
 
+  /**
+   * Set the current keyMap for CodeMirror, and load the support file if needed.
+   *
+   * @param {Window} win: The window on which the keymap files should be loaded.
+   */
+  setKeyMap(win) {
+    if (this.config.isReadOnly) {
+      return;
+    }
+
+    const keyMap = Services.prefs.getCharPref(KEYMAP_PREF);
+
+    // If alternative keymap is provided, use it.
+    if (VALID_KEYMAPS.has(keyMap)) {
+      if (!this._loadedKeyMaps.has(keyMap)) {
+        Services.scriptloader.loadSubScript(VALID_KEYMAPS.get(keyMap), win);
+        this._loadedKeyMaps.add(keyMap);
+      }
+      this.setOption("keyMap", keyMap);
+    } else {
+      this.setOption("keyMap", "default");
+    }
+  },
+
   /**
    * Sets the editor's indentation based on the current prefs and
    * re-detect indentation if we should.
@@ -1338,9 +1369,9 @@ Editor.prototype = {
     this.version = null;
 
     if (this._prefObserver) {
+      this._prefObserver.off(KEYMAP_PREF, this.setKeyMap);
       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);

devtools/client/shared/sourceeditor/test/browser_editor_prefs.js

@@ -71,12 +71,17 @@ async function test() {
   is(ed.getOption("enableCodeFolding"), undefined,
     "enableCodeFolding is correct");
   is(ed.getOption("indentWithTabs"), false, "indentWithTabs is correct");
-  is(ed.getOption("keyMap"), "sublime", "keyMap is correct");
   is(ed.getOption("autoCloseBrackets"), "()[]{}''\"\"``",
     "autoCloseBrackets is correct");
   is(ed.getOption("autocomplete"), true, "autocomplete is correct");
   ok(ed.isAutocompletionEnabled(), "Autocompletion is enabled");
 
+  // Since the keyMap files are lazily loaded, this can take some time. We need to wait
+  // until the option has the expected value.
+  info("Wait for the keyMap option to be updated");
+  await waitUntil(() => ed.getOption("keyMap") === "sublime");
+  is(ed.getOption("keyMap"), "sublime", "keyMap is correct");
+
   info("Forcing foldGutter off using enableCodeFolding");
   ed.setOption("enableCodeFolding", false);
 

devtools/client/shared/sourceeditor/test/codemirror/codemirror.html

@@ -8,6 +8,9 @@
     <!--<link rel="stylesheet" href="../doc/docs.css">-->
 
     <script src="chrome://devtools/content/shared/sourceeditor/codemirror/codemirror.bundle.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/emacs.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/sublime.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/vim.js"></script>
 
     <style type="text/css">
       .ok {color: #090;}

devtools/client/shared/sourceeditor/test/codemirror/vimemacs.html

@@ -8,6 +8,9 @@
     <!--<link rel="stylesheet" href="../doc/docs.css">-->
 
     <script src="chrome://devtools/content/shared/sourceeditor/codemirror/codemirror.bundle.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/emacs.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/sublime.js"></script>
+    <script src="chrome://devtools/content/shared/sourceeditor/codemirror/keymap/vim.js"></script>
 
     <style type="text/css">
       .ok {color: #090;}

devtools/client/shared/sourceeditor/webpack.config.js

@@ -28,9 +28,6 @@ module.exports = [{
     "./codemirror/mode/wasm/wasm.js",
     "./codemirror/addon/selection/active-line.js",
     "./codemirror/addon/edit/trailingspace.js",
-    "./codemirror/keymap/emacs.js",
-    "./codemirror/keymap/vim.js",
-    "./codemirror/keymap/sublime.js",
     "./codemirror/addon/fold/foldcode.js",
     "./codemirror/addon/fold/brace-fold.js",
     "./codemirror/addon/fold/comment-fold.js",