Migrate text_editor/ and cm_web_modes/ to ESM

cm_web_modes/ was used both in a worker and in the normal browser
context. However, both formatter_worker/ and text_editor/ included the
relevant files in their scripts array.

The fix is to make cm_web_modes a proper module and import either the
browser (_cm.js) variant or the worker (_headless.js) variant.

Bug: 1006759
Change-Id: I85c6f67102d8ffd94e073850b1ac7adcb289b1b2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1934218
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>

BUILD.gn

@@ -74,11 +74,7 @@ if (external_devtools_frontend) {
     "front_end/cm_modes/python.js",
     "front_end/cm_modes/shell.js",
     "front_end/cm_modes/stylus.js",
-    "front_end/cm_web_modes/css.js",
-    "front_end/cm_web_modes/htmlembedded.js",
-    "front_end/cm_web_modes/htmlmixed.js",
-    "front_end/cm_web_modes/javascript.js",
-    "front_end/cm_web_modes/xml.js",
+    "front_end/cm_web_modes/module.json",
     "front_end/color_picker/module.json",
     "front_end/color_picker/spectrum.css",
     "front_end/common/module.json",
@@ -487,10 +483,7 @@ if (external_devtools_frontend) {
     "front_end/test_runner/TestRunner.js",
     "front_end/text_editor/autocompleteTooltip.css",
     "front_end/text_editor/cmdevtools.css",
-    "front_end/text_editor/CodeMirrorTextEditor.js",
-    "front_end/text_editor/CodeMirrorUtils.js",
     "front_end/text_editor/module.json",
-    "front_end/text_editor/TextEditorAutocompleteController.js",
     "front_end/text_utils/module.json",
     "front_end/timeline_model/module.json",
     "front_end/timeline_model/TimelineFrameModel.js",
@@ -666,6 +659,18 @@ if (external_devtools_frontend) {
     "front_end/layer_viewer/LayerViewHost.js",
     "front_end/layer_viewer/LayerTreeOutline.js",
     "front_end/layer_viewer/LayerDetailsView.js",
+    "front_end/cm_web_modes/cm_web_modes.js",
+    "front_end/cm_web_modes/cm_web_modes_cm.js",
+    "front_end/cm_web_modes/cm_web_modes_headless.js",
+    "front_end/cm_web_modes/css.js",
+    "front_end/cm_web_modes/javascript.js",
+    "front_end/cm_web_modes/xml.js",
+    "front_end/cm_web_modes/htmlmixed.js",
+    "front_end/cm_web_modes/htmlembedded.js",
+    "front_end/text_editor/text_editor.js",
+    "front_end/text_editor/TextEditorAutocompleteController.js",
+    "front_end/text_editor/CodeMirrorUtils.js",
+    "front_end/text_editor/CodeMirrorTextEditor.js",
     "front_end/quick_open/quick_open.js",
     "front_end/quick_open/QuickOpen.js",
     "front_end/quick_open/HelpQuickOpen.js",
@@ -1250,6 +1255,18 @@ if (external_devtools_frontend) {
     "$resources_out_dir/layer_viewer/LayerViewHost.js",
     "$resources_out_dir/layer_viewer/LayerTreeOutline.js",
     "$resources_out_dir/layer_viewer/LayerDetailsView.js",
+    "$resources_out_dir/cm_web_modes/cm_web_modes.js",
+    "$resources_out_dir/cm_web_modes/cm_web_modes_cm.js",
+    "$resources_out_dir/cm_web_modes/cm_web_modes_headless.js",
+    "$resources_out_dir/cm_web_modes/css.js",
+    "$resources_out_dir/cm_web_modes/javascript.js",
+    "$resources_out_dir/cm_web_modes/xml.js",
+    "$resources_out_dir/cm_web_modes/htmlmixed.js",
+    "$resources_out_dir/cm_web_modes/htmlembedded.js",
+    "$resources_out_dir/text_editor/text_editor.js",
+    "$resources_out_dir/text_editor/TextEditorAutocompleteController.js",
+    "$resources_out_dir/text_editor/CodeMirrorUtils.js",
+    "$resources_out_dir/text_editor/CodeMirrorTextEditor.js",
     "$resources_out_dir/quick_open/quick_open.js",
     "$resources_out_dir/quick_open/QuickOpen.js",
     "$resources_out_dir/quick_open/HelpQuickOpen.js",
@@ -1632,6 +1649,7 @@ if (external_devtools_frontend) {
     "$resources_out_dir/protocol_monitor/protocol_monitor_module.js",
     "$resources_out_dir/css_overview/css_overview_module.js",
     "$resources_out_dir/cm/cm_module.js",
+    "$resources_out_dir/cm_web_modes/cm_web_modes_module.js",
     "$resources_out_dir/color_picker/color_picker_module.js",
     "$resources_out_dir/console/console_module.js",
     "$resources_out_dir/cookie_table/cookie_table_module.js",

front_end/cm_headless/headlesscodemirror.js

@@ -159,4 +159,4 @@ CodeMirror.runMode = function (string, modespec, callback, options) {
   }
 };
 })();
-}(this))
+}(self))

front_end/cm_web_modes/cm_web_modes.js

@@ -0,0 +1,9 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file is intentionally left empty, as cm_web_modes needs to both operate
+// on cm_headless and cm. We can't know statically which file to import.
+// Instead, if you need to depend on cm_web_modes, you need to import either
+// cm_web_modes_cm.js or cm_web_modes_headless.js
+export default {}

front_end/cm_web_modes/cm_web_modes_cm.js

@@ -0,0 +1,11 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../cm/cm.js';
+
+import './css.js';
+import './javascript.js';
+import './xml.js';
+import './htmlmixed.js';
+import './htmlembedded.js';

front_end/cm_web_modes/cm_web_modes_headless.js

@@ -0,0 +1,11 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../cm_headless/cm_headless.js';
+
+import './css.js';
+import './javascript.js';
+import './xml.js';
+import './htmlmixed.js';
+import './htmlembedded.js';

front_end/cm_web_modes/module.json

@@ -0,0 +1,21 @@
+{
+  "dependencies": [],
+  "scripts": [],
+  "modules": [
+    "cm_web_modes.js",
+    "cm_web_modes_cm.js",
+    "cm_web_modes_headless.js",
+    "css.js",
+    "javascript.js",
+    "xml.js",
+    "htmlmixed.js",
+    "htmlembedded.js"
+  ],
+  "skip_compilation": [
+    "css.js",
+    "javascript.js",
+    "xml.js",
+    "htmlmixed.js",
+    "htmlembedded.js"
+  ]
+}

front_end/formatter_worker.json

@@ -4,6 +4,7 @@
     { "name": "platform", "type": "autostart" },
     { "name": "text_utils", "type": "autostart" },
     { "name": "cm_headless", "type": "autostart" },
+    { "name": "cm_web_modes", "type": "autostart" },
     { "name": "formatter_worker", "type": "autostart" }
   ]
 }

front_end/formatter_worker/formatter_worker.js

@@ -4,8 +4,7 @@
 
 import './acorn/acorn.js';
 import './acorn/acorn_loose.js';
-import '../cm_web_modes/css.js';
-import '../cm_web_modes/xml.js';
+import '../cm_web_modes/cm_web_modes_headless.js';
 
 import * as AcornTokenizer from './AcornTokenizer.js';
 import * as CSSFormatter from './CSSFormatter.js';

front_end/formatter_worker/module.json

@@ -2,13 +2,12 @@
     "dependencies": [
         "platform",
         "text_utils",
-        "cm_headless"
+        "cm_headless",
+        "cm_web_modes"
     ],
     "scripts": [],
     "modules": [
         "formatter_worker.js",
-        "../cm_web_modes/css.js",
-        "../cm_web_modes/xml.js",
         "ESTreeWalker.js",
         "FormatterWorker.js",
         "acorn/acorn.js",
@@ -25,8 +24,6 @@
     ],
     "skip_compilation": [
         "acorn/acorn.js",
-        "acorn/acorn_loose.js",
-        "../cm_web_modes/css.js",
-        "../cm_web_modes/xml.js"
+        "acorn/acorn_loose.js"
     ]
 }

front_end/shell.json

@@ -21,6 +21,7 @@
     { "name": "changes" },
     { "name": "cm" },
     { "name": "cm_modes", "type": "remote" },
+    { "name": "cm_web_modes" },
     { "name": "color_picker" },
     { "name": "console" },
     { "name": "coverage" },

front_end/text_editor/CodeMirrorTextEditor.js

@@ -27,11 +27,12 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
+
 /**
  * @implements {UI.TextEditor}
  * @unrestricted
  */
-TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
+export class CodeMirrorTextEditor extends UI.VBox {
   /**
    * @param {!UI.TextEditor.Options} options
    */
@@ -43,7 +44,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
     this.registerRequiredCSS('text_editor/cmdevtools.css');
 
     const {indentWithTabs, indentUnit} =
-        TextEditor.CodeMirrorTextEditor._getIndentation(Common.moduleSetting('textEditorIndent').get());
+        CodeMirrorTextEditor._getIndentation(Common.moduleSetting('textEditorIndent').get());
 
     this._codeMirror = new CodeMirror(this.element, {
       devtoolsAccessibleName: options.devtoolsAccessibleName,
@@ -155,7 +156,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
 
     let maxHighlightLength = options.maxHighlightLength;
     if (typeof maxHighlightLength !== 'number') {
-      maxHighlightLength = TextEditor.CodeMirrorTextEditor.maxHighlightLength;
+      maxHighlightLength = CodeMirrorTextEditor.maxHighlightLength;
     }
     this._codeMirror.setOption('maxHighlightLength', maxHighlightLength);
     this._codeMirror.setOption('mode', null);
@@ -164,10 +165,9 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
     this._shouldClearHistory = true;
     this._lineSeparator = '\n';
 
-    TextEditor.CodeMirrorTextEditor._fixWordMovement(this._codeMirror);
+    CodeMirrorTextEditor._fixWordMovement(this._codeMirror);
 
-    this._selectNextOccurrenceController =
-        new TextEditor.CodeMirrorTextEditor.SelectNextOccurrenceController(this, this._codeMirror);
+    this._selectNextOccurrenceController = new SelectNextOccurrenceController(this, this._codeMirror);
 
     this._codeMirror.on('changes', this._changes.bind(this));
     this._codeMirror.on('beforeSelectionChange', this._beforeSelectionChange.bind(this));
@@ -291,10 +291,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    * @return {!Array<!Root.Runtime.Extension>}}
    */
   static _collectUninstalledModes(mimeType) {
-    const installed = TextEditor.CodeMirrorTextEditor._loadedMimeModeExtensions;
+    const installed = _loadedMimeModeExtensions;
 
     const nameToExtension = new Map();
-    const extensions = self.runtime.extensions(TextEditor.CodeMirrorMimeMode);
+    const extensions = self.runtime.extensions(CodeMirrorMimeMode);
     for (const extension of extensions) {
       nameToExtension.set(extension.descriptor()['fileName'], extension);
     }
@@ -331,12 +331,12 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
      * @param {!Object} instance
      */
     function installMode(extension, instance) {
-      if (TextEditor.CodeMirrorTextEditor._loadedMimeModeExtensions.has(extension)) {
+      if (_loadedMimeModeExtensions.has(extension)) {
         return;
       }
-      const mode = /** @type {!TextEditor.CodeMirrorMimeMode} */ (instance);
+      const mode = /** @type {!CodeMirrorMimeMode} */ (instance);
       mode.install(extension);
-      TextEditor.CodeMirrorTextEditor._loadedMimeModeExtensions.add(extension);
+      _loadedMimeModeExtensions.add(extension);
     }
   }
 
@@ -720,7 +720,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    */
   _hasLongLines() {
     function lineIterator(lineHandle) {
-      if (lineHandle.text.length > TextEditor.CodeMirrorTextEditor.LongLineModeLineLengthThreshold) {
+      if (lineHandle.text.length > CodeMirrorTextEditor.LongLineModeLineLengthThreshold) {
         hasLongLines = true;
       }
       return hasLongLines;
@@ -743,7 +743,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    */
   _updateIndentSize(updatedValue) {
     const {indentWithTabs, indentUnit} =
-        TextEditor.CodeMirrorTextEditor._getIndentation(/** @type {string} */ (updatedValue.data));
+        CodeMirrorTextEditor._getIndentation(/** @type {string} */ (updatedValue.data));
 
     this._codeMirror.setOption('indentUnit', indentUnit);
     this._codeMirror.setOption('indentWithTabs', indentWithTabs);
@@ -754,16 +754,16 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    */
   setMimeType(mimeType) {
     this._mimeType = mimeType;
-    const modesToLoad = TextEditor.CodeMirrorTextEditor._collectUninstalledModes(mimeType);
+    const modesToLoad = CodeMirrorTextEditor._collectUninstalledModes(mimeType);
 
     if (!modesToLoad.length) {
       setMode.call(this);
     } else {
-      TextEditor.CodeMirrorTextEditor._installMimeTypeModes(modesToLoad).then(setMode.bind(this));
+      CodeMirrorTextEditor._installMimeTypeModes(modesToLoad).then(setMode.bind(this));
     }
 
     /**
-     * @this {TextEditor.CodeMirrorTextEditor}
+     * @this {CodeMirrorTextEditor}
      */
     function setMode() {
       const rewrittenMimeType = this.rewriteMimeType(mimeType);
@@ -839,10 +839,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    * @param {!Element} element
    * @param {symbol} type
    * @param {boolean=} insertBefore
-   * @return {!TextEditor.TextEditorBookMark}
+   * @return {!TextEditorBookMark}
    */
   addBookmark(lineNumber, columnNumber, element, type, insertBefore) {
-    const bookmark = new TextEditor.TextEditorBookMark(
+    const bookmark = new TextEditorBookMark(
         this._codeMirror.setBookmark(
             new CodeMirror.Pos(lineNumber, columnNumber), {widget: element, insertLeft: insertBefore}),
         type, this);
@@ -853,7 +853,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
   /**
    * @param {!TextUtils.TextRange} range
    * @param {symbol=} type
-   * @return {!Array.<!TextEditor.TextEditorBookMark>}
+   * @return {!Array.<!TextEditorBookMark>}
    */
   bookmarks(range, type) {
     const pos = TextEditor.CodeMirrorUtils.toPos(range);
@@ -865,7 +865,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
     }
     const bookmarks = [];
     for (let i = 0; i < markers.length; i++) {
-      const bookmark = markers[i][TextEditor.TextEditorBookMark._symbol];
+      const bookmark = markers[i][TextEditorBookMark._symbol];
       if (bookmark && (!type || bookmark.type() === type)) {
         bookmarks.push(bookmark);
       }
@@ -977,7 +977,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
     this._decorations.get(lineNumber).forEach(innerRemoveDecoration.bind(this));
 
     /**
-     * @this {TextEditor.CodeMirrorTextEditor}
+     * @this {CodeMirrorTextEditor}
      * @param {!TextEditor.CodeMirrorTextEditor.Decoration} decoration
      */
     function innerRemoveDecoration(decoration) {
@@ -1301,7 +1301,7 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    * @param {string} text
    */
   setText(text) {
-    if (text.length > TextEditor.CodeMirrorTextEditor.MaxEditableTextSize) {
+    if (text.length > CodeMirrorTextEditor.MaxEditableTextSize) {
       this.configureAutocomplete(null);
       this.setReadOnly(true);
     }
@@ -1391,10 +1391,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
   /**
    * @param {number} lineNumber
    * @param {number} columnNumber
-   * @return {!TextEditor.TextEditorPositionHandle}
+   * @return {!TextEditorPositionHandle}
    */
   textEditorPositionHandle(lineNumber, columnNumber) {
-    return new TextEditor.CodeMirrorPositionHandle(this._codeMirror, new CodeMirror.Pos(lineNumber, columnNumber));
+    return new CodeMirrorPositionHandle(this._codeMirror, new CodeMirror.Pos(lineNumber, columnNumber));
   }
 
   _updatePlaceholder() {
@@ -1409,26 +1409,23 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
           this._placeholderElement, this._codeMirror.display.lineSpace.firstChild);
     }
   }
-};
+}
 
-TextEditor.CodeMirrorTextEditor.maxHighlightLength = 1000;
+CodeMirrorTextEditor.maxHighlightLength = 1000;
+CodeMirrorTextEditor.LongLineModeLineLengthThreshold = 2000;
+CodeMirrorTextEditor.MaxEditableTextSize = 1024 * 1024 * 10;
 
+CodeMirrorTextEditor._overrideModeWithPrefixedTokens('css', 'css-');
+CodeMirrorTextEditor._overrideModeWithPrefixedTokens('javascript', 'js-');
+CodeMirrorTextEditor._overrideModeWithPrefixedTokens('xml', 'xml-');
 
-CodeMirror.commands.autocomplete = TextEditor.CodeMirrorTextEditor.autocompleteCommand;
-
-
-CodeMirror.commands.undoLastSelection = TextEditor.CodeMirrorTextEditor.undoLastSelectionCommand;
-
-
-CodeMirror.commands.selectNextOccurrence = TextEditor.CodeMirrorTextEditor.selectNextOccurrenceCommand;
-
-
-CodeMirror.commands.moveCamelLeft = TextEditor.CodeMirrorTextEditor.moveCamelLeftCommand.bind(null, false);
-CodeMirror.commands.selectCamelLeft = TextEditor.CodeMirrorTextEditor.moveCamelLeftCommand.bind(null, true);
-
-
-CodeMirror.commands.moveCamelRight = TextEditor.CodeMirrorTextEditor.moveCamelRightCommand.bind(null, false);
-CodeMirror.commands.selectCamelRight = TextEditor.CodeMirrorTextEditor.moveCamelRightCommand.bind(null, true);
+CodeMirror.commands.autocomplete = CodeMirrorTextEditor.autocompleteCommand;
+CodeMirror.commands.undoLastSelection = CodeMirrorTextEditor.undoLastSelectionCommand;
+CodeMirror.commands.selectNextOccurrence = CodeMirrorTextEditor.selectNextOccurrenceCommand;
+CodeMirror.commands.moveCamelLeft = CodeMirrorTextEditor.moveCamelLeftCommand.bind(null, false);
+CodeMirror.commands.selectCamelLeft = CodeMirrorTextEditor.moveCamelLeftCommand.bind(null, true);
+CodeMirror.commands.moveCamelRight = CodeMirrorTextEditor.moveCamelRightCommand.bind(null, false);
+CodeMirror.commands.selectCamelRight = CodeMirrorTextEditor.moveCamelRightCommand.bind(null, true);
 
 /**
  * @param {!CodeMirror} codeMirror
@@ -1554,14 +1551,11 @@ CodeMirror.commands.goSmartPageDown = function(codemirror) {
   codemirror.execCommand('goPageDown');
 };
 
-TextEditor.CodeMirrorTextEditor.LongLineModeLineLengthThreshold = 2000;
-TextEditor.CodeMirrorTextEditor.MaxEditableTextSize = 1024 * 1024 * 10;
-
 /**
- * @implements {TextEditor.TextEditorPositionHandle}
+ * @implements {TextEditorPositionHandle}
  * @unrestricted
  */
-TextEditor.CodeMirrorPositionHandle = class {
+export class CodeMirrorPositionHandle {
   /**
    * @param {!CodeMirror} codeMirror
    * @param {!CodeMirror.Pos} pos
@@ -1586,21 +1580,22 @@ TextEditor.CodeMirrorPositionHandle = class {
 
   /**
    * @override
-   * @param {!TextEditor.TextEditorPositionHandle} positionHandle
+   * @param {!TextEditorPositionHandle} argPositionHandle
    * @return {boolean}
    */
-  equal(positionHandle) {
+  equal(argPositionHandle) {
+    const positionHandle = /** @type {!CodeMirrorPositionHandle} */ (argPositionHandle);
     return positionHandle._lineHandle === this._lineHandle && positionHandle._columnNumber === this._columnNumber &&
         positionHandle._codeMirror === this._codeMirror;
   }
-};
+}
 
 /**
  * @unrestricted
  */
-TextEditor.CodeMirrorTextEditor.SelectNextOccurrenceController = class {
+export class SelectNextOccurrenceController {
   /**
-   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
+   * @param {!CodeMirrorTextEditor} textEditor
    * @param {!CodeMirror} codeMirror
    */
   constructor(textEditor, codeMirror) {
@@ -1739,58 +1734,51 @@ TextEditor.CodeMirrorTextEditor.SelectNextOccurrenceController = class {
     return new TextUtils.TextRange(
         matchedLineNumber, matchedColumnNumber, matchedLineNumber, matchedColumnNumber + textToFind.length);
   }
-};
+}
 
 
 /**
  * @interface
  */
-TextEditor.TextEditorPositionHandle = function() {};
-
-TextEditor.TextEditorPositionHandle.prototype = {
+export class TextEditorPositionHandle {
   /**
    * @return {?{lineNumber: number, columnNumber: number}}
    */
-  resolve() {},
+  resolve() {
+  }
 
   /**
-   * @param {!TextEditor.TextEditorPositionHandle} positionHandle
+   * @param {!TextEditorPositionHandle} positionHandle
    * @return {boolean}
    */
   equal(positionHandle) {}
-};
-
-TextEditor.CodeMirrorTextEditor._overrideModeWithPrefixedTokens('css', 'css-');
-TextEditor.CodeMirrorTextEditor._overrideModeWithPrefixedTokens('javascript', 'js-');
-TextEditor.CodeMirrorTextEditor._overrideModeWithPrefixedTokens('xml', 'xml-');
+}
 
 /** @type {!Set<!Root.Runtime.Extension>} */
-TextEditor.CodeMirrorTextEditor._loadedMimeModeExtensions = new Set();
+export const _loadedMimeModeExtensions = new Set();
 
 
 /**
  * @interface
  */
-TextEditor.CodeMirrorMimeMode = function() {};
-
-TextEditor.CodeMirrorMimeMode.prototype = {
+export class CodeMirrorMimeMode {
   /**
    * @param {!Root.Runtime.Extension} extension
    */
   install(extension) {}
-};
+}
 
 /**
  * @unrestricted
  */
-TextEditor.TextEditorBookMark = class {
+export class TextEditorBookMark {
   /**
    * @param {!CodeMirror.TextMarker} marker
    * @param {symbol} type
-   * @param {!TextEditor.CodeMirrorTextEditor} editor
+   * @param {!CodeMirrorTextEditor} editor
    */
   constructor(marker, type, editor) {
-    marker[TextEditor.TextEditorBookMark._symbol] = this;
+    marker[TextEditorBookMark._symbol] = this;
 
     this._marker = marker;
     this._type = type;
@@ -1827,39 +1815,30 @@ TextEditor.TextEditorBookMark = class {
     const pos = this._marker.find();
     return pos ? TextUtils.TextRange.createFromLocation(pos.line, pos.ch) : null;
   }
-};
+}
 
-TextEditor.TextEditorBookMark._symbol = Symbol('TextEditor.TextEditorBookMark');
-
-/**
- * @typedef {{
- *  element: !Element,
- *  widget: !CodeMirror.LineWidget,
- *  update: ?function()
- * }}
- */
-TextEditor.CodeMirrorTextEditor.Decoration;
+TextEditorBookMark._symbol = Symbol('TextEditorBookMark');
 
 /**
  * @implements {UI.TextEditorFactory}
  * @unrestricted
  */
-TextEditor.CodeMirrorTextEditorFactory = class {
+export class CodeMirrorTextEditorFactory {
   /**
    * @override
    * @param {!UI.TextEditor.Options} options
-   * @return {!TextEditor.CodeMirrorTextEditor}
+   * @return {!CodeMirrorTextEditor}
    */
   createEditor(options) {
-    return new TextEditor.CodeMirrorTextEditor(options);
+    return new CodeMirrorTextEditor(options);
   }
-};
+}
 
 // CodeMirror uses an offscreen <textarea> to detect input. Due to inconsistencies in the many browsers it supports,
 // it simplifies things by regularly checking if something is in the textarea, adding those characters to the document,
 // and then clearing the textarea. This breaks assistive technology that wants to read from CodeMirror, because the
 // <textarea> that they interact with is constantly empty.
-// Because we target up-to-date Chrome, we can gaurantee consistent input events. This lets us leave the current
+// Because we target up-to-date Chrome, we can guarantee consistent input events. This lets us leave the current
 // line from the editor in our <textarea>. CodeMirror still expects a mostly empty <textarea>, so we pass CodeMirror a
 // fake <textarea> that only contains the users input.
 CodeMirror.inputStyles.devToolsAccessibleTextArea = class extends CodeMirror.inputStyles.textarea {
@@ -1948,3 +1927,41 @@ CodeMirror.inputStyles.devToolsAccessibleTextArea = class extends CodeMirror.inp
     return result;
   }
 };
+
+/* Legacy exported object */
+self.TextEditor = self.TextEditor || {};
+
+/* Legacy exported object */
+TextEditor = TextEditor || {};
+
+/** @constructor */
+TextEditor.CodeMirrorTextEditor = CodeMirrorTextEditor;
+
+/** @constructor */
+TextEditor.CodeMirrorTextEditor.SelectNextOccurrenceController = SelectNextOccurrenceController;
+
+/** @interface */
+TextEditor.TextEditorPositionHandle = TextEditorPositionHandle;
+
+TextEditor.CodeMirrorTextEditor._loadedMimeModeExtensions = _loadedMimeModeExtensions;
+
+/** @constructor */
+TextEditor.CodeMirrorPositionHandle = CodeMirrorPositionHandle;
+
+/** @interface */
+TextEditor.CodeMirrorMimeMode = CodeMirrorMimeMode;
+
+/** @constructor */
+TextEditor.TextEditorBookMark = TextEditorBookMark;
+
+/** @constructor */
+TextEditor.CodeMirrorTextEditorFactory = CodeMirrorTextEditorFactory;
+
+/**
+ * @typedef {{
+  *  element: !Element,
+  *  widget: !CodeMirror.LineWidget,
+  *  update: ?function()
+  * }}
+  */
+TextEditor.CodeMirrorTextEditor.Decoration;

front_end/text_editor/CodeMirrorUtils.js

@@ -28,33 +28,32 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-TextEditor.CodeMirrorUtils = {};
 /**
  * @param {!TextUtils.TextRange} range
  * @return {!{start: !CodeMirror.Pos, end: !CodeMirror.Pos}}
  */
-TextEditor.CodeMirrorUtils.toPos = function(range) {
+export function toPos(range) {
   return {
     start: new CodeMirror.Pos(range.startLine, range.startColumn),
     end: new CodeMirror.Pos(range.endLine, range.endColumn)
   };
-};
+}
 
 /**
  * @param {!CodeMirror.Pos} start
  * @param {!CodeMirror.Pos} end
  * @return {!TextUtils.TextRange}
  */
-TextEditor.CodeMirrorUtils.toRange = function(start, end) {
+export function toRange(start, end) {
   return new TextUtils.TextRange(start.line, start.ch, end.line, end.ch);
-};
+}
 
 /**
  * @param {!CodeMirror.ChangeObject} changeObject
  * @return {{oldRange: !TextUtils.TextRange, newRange: !TextUtils.TextRange}}
  */
-TextEditor.CodeMirrorUtils.changeObjectToEditOperation = function(changeObject) {
-  const oldRange = TextEditor.CodeMirrorUtils.toRange(changeObject.from, changeObject.to);
+export function changeObjectToEditOperation(changeObject) {
+  const oldRange = toRange(changeObject.from, changeObject.to);
   const newRange = oldRange.clone();
   const linesAdded = changeObject.text.length;
   if (linesAdded === 0) {
@@ -68,14 +67,14 @@ TextEditor.CodeMirrorUtils.changeObjectToEditOperation = function(changeObject)
     newRange.endColumn = changeObject.text[linesAdded - 1].length;
   }
   return {oldRange: oldRange, newRange: newRange};
-};
+}
 
 /**
  * @param {!CodeMirror} codeMirror
  * @param {number} linesCount
  * @return {!Array.<string>}
  */
-TextEditor.CodeMirrorUtils.pullLines = function(codeMirror, linesCount) {
+export function pullLines(codeMirror, linesCount) {
   const lines = [];
   codeMirror.eachLine(0, linesCount, onLineHandle);
   return lines;
@@ -86,13 +85,13 @@ TextEditor.CodeMirrorUtils.pullLines = function(codeMirror, linesCount) {
   function onLineHandle(lineHandle) {
     lines.push(lineHandle.text);
   }
-};
+}
 
 /**
  * @implements {TextUtils.TokenizerFactory}
  * @unrestricted
  */
-TextEditor.CodeMirrorUtils.TokenizerFactory = class {
+export class TokenizerFactory {
   /**
    * @override
    * @param {string} mimeType
@@ -112,4 +111,20 @@ TextEditor.CodeMirrorUtils.TokenizerFactory = class {
     }
     return tokenize;
   }
-};
+}
+
+/* Legacy exported object */
+self.TextEditor = self.TextEditor || {};
+
+/* Legacy exported object */
+TextEditor = TextEditor || {};
+
+TextEditor.CodeMirrorUtils = {};
+
+TextEditor.CodeMirrorUtils.toPos = toPos;
+TextEditor.CodeMirrorUtils.toRange = toRange;
+TextEditor.CodeMirrorUtils.changeObjectToEditOperation = changeObjectToEditOperation;
+TextEditor.CodeMirrorUtils.pullLines = pullLines;
+
+/** @constructor */
+TextEditor.CodeMirrorUtils.TokenizerFactory = TokenizerFactory;

front_end/text_editor/TextEditorAutocompleteController.js

@@ -1,11 +1,12 @@
 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
 /**
  * @implements {UI.SuggestBoxDelegate}
  * @unrestricted
  */
-TextEditor.TextEditorAutocompleteController = class {
+export class TextEditorAutocompleteController {
   /**
    * @param {!TextEditor.CodeMirrorTextEditor} textEditor
    * @param {!CodeMirror} codeMirror
@@ -95,7 +96,7 @@ TextEditor.TextEditorAutocompleteController = class {
 
     /**
      * @param {string} word
-     * @this {TextEditor.TextEditorAutocompleteController}
+     * @this {TextEditorAutocompleteController}
      */
     function addWord(word) {
       if (word.length && (word[0] < '0' || word[0] > '9')) {
@@ -272,7 +273,7 @@ TextEditor.TextEditorAutocompleteController = class {
 
     /**
      * @param {!UI.SuggestBox.Suggestions} wordsWithQuery
-     * @this {TextEditor.TextEditorAutocompleteController}
+     * @this {TextEditorAutocompleteController}
      */
     function wordsAcquired(wordsWithQuery) {
       if (!wordsWithQuery.length || (wordsWithQuery.length === 1 && query === wordsWithQuery[0].text) ||
@@ -324,7 +325,7 @@ TextEditor.TextEditorAutocompleteController = class {
 
     if (!this._hintMarker) {
       this._hintMarker = this._textEditor.addBookmark(
-          cursor.line, cursor.ch, this._hintElement, TextEditor.TextEditorAutocompleteController.HintBookmark, true);
+          cursor.line, cursor.ch, this._hintElement, TextEditorAutocompleteController.HintBookmark, true);
     } else if (this._lastHintText !== hint) {
       this._hintMarker.refresh();
     }
@@ -544,6 +545,15 @@ TextEditor.TextEditorAutocompleteController = class {
     const metrics = this._textEditor.cursorPositionToCoordinates(line, column);
     this._anchorBox = metrics ? new AnchorBox(metrics.x, metrics.y, 0, metrics.height) : null;
   }
-};
+}
 
-TextEditor.TextEditorAutocompleteController.HintBookmark = Symbol('hint');
+TextEditorAutocompleteController.HintBookmark = Symbol('hint');
+
+/* Legacy exported object */
+self.TextEditor = self.TextEditor || {};
+
+/* Legacy exported object */
+TextEditor = TextEditor || {};
+
+/** @constructor */
+TextEditor.TextEditorAutocompleteController = TextEditorAutocompleteController;

front_end/text_editor/module.json

@@ -13,14 +13,12 @@
         "ui",
         "platform",
         "common",
-        "cm"
+        "cm",
+        "cm_web_modes"
     ],
-    "scripts": [
-        "../cm_web_modes/css.js",
-        "../cm_web_modes/javascript.js",
-        "../cm_web_modes/xml.js",
-        "../cm_web_modes/htmlmixed.js",
-        "../cm_web_modes/htmlembedded.js",
+    "scripts": [],
+    "modules": [
+        "text_editor.js",
         "CodeMirrorUtils.js",
         "TextEditorAutocompleteController.js",
         "CodeMirrorTextEditor.js"
@@ -28,13 +26,5 @@
     "resources": [
         "autocompleteTooltip.css",
         "cmdevtools.css"
-    ],
-    "skip_compilation": [
-        "acorn/acorn.js",
-        "../cm_web_modes/css.js",
-        "../cm_web_modes/javascript.js",
-        "../cm_web_modes/xml.js",
-        "../cm_web_modes/htmlmixed.js",
-        "../cm_web_modes/htmlembedded.js"
     ]
 }

front_end/text_editor/text_editor.js

@@ -0,0 +1,19 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../cm_web_modes/cm_web_modes_cm.js';
+
+import './CodeMirrorUtils.js';
+import './TextEditorAutocompleteController.js';
+import './CodeMirrorTextEditor.js';
+
+import * as CodeMirrorTextEditor from './CodeMirrorTextEditor.js';
+import * as CodeMirrorUtils from './CodeMirrorUtils.js';
+import * as TextEditorAutocompleteController from './TextEditorAutocompleteController.js';
+
+export {
+  CodeMirrorTextEditor,
+  CodeMirrorUtils,
+  TextEditorAutocompleteController,
+};

scripts/test/run_type_check.py

@@ -267,8 +267,8 @@ GENERATED_SKIP_COMPILATION_FILES = [
     'sdk/wasm_source_map/pkg/wasm_source_map.js',
     'formatter_worker/acorn/acorn.js',
     'formatter_worker/acorn/acorn_loose.js',
-    'cm_web_modes/css.js',
-    'cm_web_modes/xml.js',
+    'cm_web_modes/css.js', 'cm_web_modes/xml.js', 'cm_web_modes/javascript.js', 'cm_web_modes/htmlmixed.js',
+    'cm_web_modes/htmlembedded.js',
     'cm_headless/headlesscodemirror.js',
     'diff/diff_match_patch.js',
     'cm/codemirror.js',