Migrates console/ to esm

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

BUILD.gn

@@ -108,20 +108,11 @@ if (external_devtools_frontend) {
     "front_end/components/imagePreview.css",
     "front_end/components/jsUtils.css",
     "front_end/components/module.json",
-    "front_end/console/ConsoleContextSelector.js",
-    "front_end/console/ConsoleFilter.js",
-    "front_end/console/ConsoleSidebar.js",
-    "front_end/console/ConsolePanel.js",
-    "front_end/console/ConsolePinPane.js",
-    "front_end/console/ConsolePrompt.js",
     "front_end/console/consoleView.css",
     "front_end/console/consoleContextSelector.css",
     "front_end/console/consolePinPane.css",
     "front_end/console/consolePrompt.css",
     "front_end/console/consoleSidebar.css",
-    "front_end/console/ConsoleView.js",
-    "front_end/console/ConsoleViewMessage.js",
-    "front_end/console/ConsoleViewport.js",
     "front_end/console/module.json",
     "front_end/console_counters/errorWarningCounter.css",
     "front_end/console_counters/module.json",
@@ -720,6 +711,16 @@ if (external_devtools_frontend) {
   all_devtools_files += lighthouse_locale_files
 
   all_devtools_modules = [
+    "front_end/console/console.js",
+    "front_end/console/ConsoleContextSelector.js",
+    "front_end/console/ConsoleFilter.js",
+    "front_end/console/ConsoleSidebar.js",
+    "front_end/console/ConsolePanel.js",
+    "front_end/console/ConsolePinPane.js",
+    "front_end/console/ConsolePrompt.js",
+    "front_end/console/ConsoleView.js",
+    "front_end/console/ConsoleViewMessage.js",
+    "front_end/console/ConsoleViewport.js",
     "front_end/animation/animation.js",
     "front_end/animation/AnimationUI.js",
     "front_end/animation/AnimationTimeline.js",
@@ -1217,6 +1218,16 @@ if (external_devtools_frontend) {
   ]
 
   copied_devtools_modules = [
+    "$resources_out_dir/console/console.js",
+    "$resources_out_dir/console/ConsoleContextSelector.js",
+    "$resources_out_dir/console/ConsoleFilter.js",
+    "$resources_out_dir/console/ConsoleSidebar.js",
+    "$resources_out_dir/console/ConsolePanel.js",
+    "$resources_out_dir/console/ConsolePinPane.js",
+    "$resources_out_dir/console/ConsolePrompt.js",
+    "$resources_out_dir/console/ConsoleView.js",
+    "$resources_out_dir/console/ConsoleViewMessage.js",
+    "$resources_out_dir/console/ConsoleViewport.js",
     "$resources_out_dir/animation/animation.js",
     "$resources_out_dir/animation/AnimationUI.js",
     "$resources_out_dir/animation/AnimationTimeline.js",

front_end/console/ConsoleContextSelector.js

@@ -5,7 +5,7 @@
  * @implements {SDK.SDKModelObserver<!SDK.RuntimeModel>}
  * @implements {UI.SoftDropDown.Delegate<!SDK.ExecutionContext>}
  */
-Console.ConsoleContextSelector = class {
+export default class ConsoleContextSelector {
   constructor() {
     /** @type {!UI.ListModel<!SDK.ExecutionContext>} */
     this._items = new UI.ListModel();
@@ -323,4 +323,15 @@ Console.ConsoleContextSelector = class {
       }
     }
   }
-};
+}
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsoleContextSelector = ConsoleContextSelector;

front_end/console/ConsoleFilter.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Console.ConsoleFilter = class {
+export default class ConsoleFilter {
   /**
    * @param {string} name
    * @param {!Array<!TextUtils.FilterParser.ParsedFilter>} parsedFilters
@@ -86,12 +86,12 @@ Console.ConsoleFilter = class {
         }
       } else {
         switch (filter.key) {
-          case Console.ConsoleFilter.FilterType.Context:
+          case FilterType.Context:
             if (!passesFilter(filter, message.context, false /* exactMatch */)) {
               return false;
             }
             break;
-          case Console.ConsoleFilter.FilterType.Source:
+          case FilterType.Source:
             const sourceNameForMessage = message.source ?
                 SDK.ConsoleMessage.MessageSourceDisplayName.get(
                     /** @type {!SDK.ConsoleMessage.MessageSource} */ (message.source)) :
@@ -100,7 +100,7 @@ Console.ConsoleFilter = class {
               return false;
             }
             break;
-          case Console.ConsoleFilter.FilterType.Url:
+          case FilterType.Url:
             if (!passesFilter(filter, message.url, false /* exactMatch */)) {
               return false;
             }
@@ -134,11 +134,25 @@ Console.ConsoleFilter = class {
       return true;
     }
   }
-};
+}
 
 /** @enum {string} */
-Console.ConsoleFilter.FilterType = {
+export const FilterType = {
   Context: 'context',
   Source: 'source',
   Url: 'url'
 };
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsoleFilter = ConsoleFilter;
+
+/** @enum {string} */
+Console.ConsoleFilter.FilterType = FilterType;

front_end/console/ConsolePanel.js

@@ -29,7 +29,7 @@
 /**
  * @unrestricted
  */
-Console.ConsolePanel = class extends UI.Panel {
+export default class ConsolePanel extends UI.Panel {
   constructor() {
     super('console');
     this._view = Console.ConsoleView.instance();
@@ -81,12 +81,12 @@ Console.ConsolePanel = class extends UI.Panel {
   searchableView() {
     return Console.ConsoleView.instance().searchableView();
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Console.ConsolePanel.WrapperView = class extends UI.VBox {
+export class WrapperView extends UI.VBox {
   constructor() {
     super();
     this.element.classList.add('console-view-wrapper');
@@ -119,13 +119,13 @@ Console.ConsolePanel.WrapperView = class extends UI.VBox {
   _showViewInWrapper() {
     this._view.show(this.element);
   }
-};
+}
 
 /**
  * @implements {Common.Revealer}
  * @unrestricted
  */
-Console.ConsolePanel.ConsoleRevealer = class {
+export class ConsoleRevealer {
   /**
    * @override
    * @param {!Object} object
@@ -140,4 +140,25 @@ Console.ConsolePanel.ConsoleRevealer = class {
     UI.viewManager.showView('console-view');
     return Promise.resolve();
   }
-};
+}
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsolePanel = ConsolePanel;
+
+/**
+ * @constructor
+ */
+Console.ConsolePanel.WrapperView = WrapperView;
+
+/**
+ * @implements {Common.Revealer}
+ */
+Console.ConsolePanel.ConsoleRevealer = ConsoleRevealer;

front_end/console/ConsolePinPane.js

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Console.ConsolePinPane = class extends UI.ThrottledWidget {
+const _PinSymbol = Symbol('pinSymbol');
+
+export default class ConsolePinPane extends UI.ThrottledWidget {
   /**
    * @param {!UI.ToolbarButton} liveExpressionButton
    */
@@ -45,7 +47,7 @@ Console.ConsolePinPane = class extends UI.ThrottledWidget {
     if (target) {
       const targetPinElement = target.enclosingNodeOrSelfWithClass('console-pin');
       if (targetPinElement) {
-        const targetPin = targetPinElement[Console.ConsolePin._PinSymbol];
+        const targetPin = targetPinElement[_PinSymbol];
         contextMenu.editSection().appendItem(ls`Edit expression`, targetPin.focus.bind(targetPin));
         contextMenu.editSection().appendItem(ls`Remove expression`, this._removePin.bind(this, targetPin));
         targetPin.appendToContextMenu(contextMenu);
@@ -76,7 +78,7 @@ Console.ConsolePinPane = class extends UI.ThrottledWidget {
    * @param {boolean=} userGesture
    */
   addPin(expression, userGesture) {
-    const pin = new Console.ConsolePin(expression, this);
+    const pin = new ConsolePin(expression, this);
     this.contentElement.appendChild(pin.element());
     this._pins.add(pin);
     this._savePins();
@@ -102,9 +104,12 @@ Console.ConsolePinPane = class extends UI.ThrottledWidget {
 
   _updatedForTest() {
   }
-};
+}
 
-Console.ConsolePin = class extends Common.Object {
+/**
+ * @unrestricted
+ */
+export class ConsolePin extends Common.Object {
   /**
    * @param {string} expression
    * @param {!Console.ConsolePinPane} pinPane
@@ -130,7 +135,7 @@ Console.ConsolePin = class extends Common.Object {
     this._pinPreview = fragment.$('preview');
     const nameElement = fragment.$('name');
     nameElement.title = expression;
-    this._pinElement[Console.ConsolePin._PinSymbol] = this;
+    this._pinElement[_PinSymbol] = this;
 
     /** @type {?SDK.RuntimeModel.EvaluationResult} */
     this._lastResult = null;
@@ -283,6 +288,22 @@ Console.ConsolePin = class extends Common.Object {
     const isError = result && result.exceptionDetails && !SDK.RuntimeModel.isSideEffectFailure(result);
     this._pinElement.classList.toggle('error-level', !!isError);
   }
-};
+}
 
-Console.ConsolePin._PinSymbol = Symbol('pinSymbol');
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsolePinPane = ConsolePinPane;
+
+/**
+ * @constructor
+ */
+Console.ConsolePin = ConsolePin;
+
+Console.ConsolePin._PinSymbol = _PinSymbol;

front_end/console/ConsolePrompt.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Console.ConsolePrompt = class extends UI.Widget {
+export default class ConsolePrompt extends UI.Widget {
   constructor() {
     super();
     this.registerRequiredCSS('console/consolePrompt.css');
@@ -103,7 +103,7 @@ Console.ConsolePrompt = class extends UI.Widget {
       this._previewRequestForTest = this._textChangeThrottler.schedule(this._requestPreviewBound, asSoonAsPossible);
     }
     this._updatePromptIcon();
-    this.dispatchEventToListeners(Console.ConsolePrompt.Events.TextChanged);
+    this.dispatchEventToListeners(Events.TextChanged);
   }
 
   /**
@@ -175,7 +175,7 @@ Console.ConsolePrompt = class extends UI.Widget {
     } else {
       this._initialText = text;
     }
-    this.dispatchEventToListeners(Console.ConsolePrompt.Events.TextChanged);
+    this.dispatchEventToListeners(Events.TextChanged);
   }
 
   /**
@@ -377,12 +377,12 @@ Console.ConsolePrompt = class extends UI.Widget {
 
   _editorSetForTest() {
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Console.ConsoleHistoryManager = class {
+export class ConsoleHistoryManager {
   constructor() {
     /**
      * @type {!Array.<string>}
@@ -472,8 +472,26 @@ Console.ConsoleHistoryManager = class {
   _currentHistoryItem() {
     return this._data[this._data.length - this._historyOffset];
   }
-};
+}
 
-Console.ConsolePrompt.Events = {
+export const Events = {
   TextChanged: Symbol('TextChanged')
 };
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsolePrompt = ConsolePrompt;
+
+Console.ConsolePrompt.Events = Events;
+
+/**
+ * @constructor
+ */
+Console.ConsoleHistoryManager = ConsoleHistoryManager;

front_end/console/ConsoleSidebar.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Console.ConsoleSidebar = class extends UI.VBox {
+export default class ConsoleSidebar extends UI.VBox {
   constructor() {
     super(true);
     this.setMinimumSize(125, 0);
@@ -24,24 +24,23 @@ Console.ConsoleSidebar = class extends UI.VBox {
       negative: false
     }];
     this._appendGroup(
-        Console.ConsoleSidebar._groupName.All, [], Console.ConsoleFilter.allLevelsFilterValue(),
-        UI.Icon.create('mediumicon-list'), selectedFilterSetting);
-    this._appendGroup(
-        Console.ConsoleSidebar._groupName.ConsoleAPI, consoleAPIParsedFilters,
-        Console.ConsoleFilter.allLevelsFilterValue(), UI.Icon.create('mediumicon-account-circle'),
+        _groupName.All, [], Console.ConsoleFilter.allLevelsFilterValue(), UI.Icon.create('mediumicon-list'),
         selectedFilterSetting);
     this._appendGroup(
-        Console.ConsoleSidebar._groupName.Error, [], Console.ConsoleFilter.singleLevelMask(Levels.Error),
+        _groupName.ConsoleAPI, consoleAPIParsedFilters, Console.ConsoleFilter.allLevelsFilterValue(),
+        UI.Icon.create('mediumicon-account-circle'), selectedFilterSetting);
+    this._appendGroup(
+        _groupName.Error, [], Console.ConsoleFilter.singleLevelMask(Levels.Error),
         UI.Icon.create('mediumicon-error-circle'), selectedFilterSetting);
     this._appendGroup(
-        Console.ConsoleSidebar._groupName.Warning, [], Console.ConsoleFilter.singleLevelMask(Levels.Warning),
+        _groupName.Warning, [], Console.ConsoleFilter.singleLevelMask(Levels.Warning),
         UI.Icon.create('mediumicon-warning-triangle'), selectedFilterSetting);
     this._appendGroup(
-        Console.ConsoleSidebar._groupName.Info, [], Console.ConsoleFilter.singleLevelMask(Levels.Info),
+        _groupName.Info, [], Console.ConsoleFilter.singleLevelMask(Levels.Info),
         UI.Icon.create('mediumicon-info-circle'), selectedFilterSetting);
     this._appendGroup(
-        Console.ConsoleSidebar._groupName.Verbose, [], Console.ConsoleFilter.singleLevelMask(Levels.Verbose),
-        UI.Icon.create('mediumicon-bug'), selectedFilterSetting);
+        _groupName.Verbose, [], Console.ConsoleFilter.singleLevelMask(Levels.Verbose), UI.Icon.create('mediumicon-bug'),
+        selectedFilterSetting);
     const selectedTreeElementName = selectedFilterSetting.get();
     const defaultTreeElement =
         this._treeElements.find(x => x.name() === selectedTreeElementName) || this._treeElements[0];
@@ -57,7 +56,7 @@ Console.ConsoleSidebar = class extends UI.VBox {
    */
   _appendGroup(name, parsedFilters, levelsMask, icon, selectedFilterSetting) {
     const filter = new Console.ConsoleFilter(name, parsedFilters, null, levelsMask);
-    const treeElement = new Console.ConsoleSidebar.FilterTreeElement(filter, icon, selectedFilterSetting);
+    const treeElement = new FilterTreeElement(filter, icon, selectedFilterSetting);
     this._tree.appendChild(treeElement);
     this._treeElements.push(treeElement);
   }
@@ -93,16 +92,16 @@ Console.ConsoleSidebar = class extends UI.VBox {
    */
   _selectionChanged(event) {
     this._selectedTreeElement = /** @type {!UI.TreeElement} */ (event.data);
-    this.dispatchEventToListeners(Console.ConsoleSidebar.Events.FilterSelected);
+    this.dispatchEventToListeners(Events.FilterSelected);
   }
-};
+}
 
 /** @enum {symbol} */
-Console.ConsoleSidebar.Events = {
+export const Events = {
   FilterSelected: Symbol('FilterSelected')
 };
 
-Console.ConsoleSidebar.URLGroupTreeElement = class extends UI.TreeElement {
+export class URLGroupTreeElement extends UI.TreeElement {
   /**
    * @param {!Console.ConsoleFilter} filter
    */
@@ -119,9 +118,9 @@ Console.ConsoleSidebar.URLGroupTreeElement = class extends UI.TreeElement {
     this._messageCount++;
     this._countElement.textContent = this._messageCount;
   }
-};
+}
 
-Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
+export class FilterTreeElement extends UI.TreeElement {
   /**
    * @param {!Console.ConsoleFilter} filter
    * @param {!Element} icon
@@ -164,12 +163,11 @@ Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
 
   _updateCounter() {
     if (!this._messageCount) {
-      this.title = Console.ConsoleSidebar._groupNoMessageTitleMap.get(this._filter.name);
+      this.title = _groupNoMessageTitleMap.get(this._filter.name);
     } else if (this._messageCount === 1) {
-      this.title = Console.ConsoleSidebar._groupSingularTitleMap.get(this._filter.name);
+      this.title = _groupSingularTitleMap.get(this._filter.name);
     } else {
-      this.title =
-          String.sprintf(Console.ConsoleSidebar._groupPluralTitleMap.get(this._filter.name), this._messageCount);
+      this.title = String.sprintf(_groupPluralTitleMap.get(this._filter.name), this._messageCount);
     }
 
     this.setExpandable(!!this.childCount());
@@ -210,7 +208,7 @@ Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
       filter.name = Common.UIString('<other>');
     }
     filter.parsedFilters.push({key: Console.ConsoleFilter.FilterType.Url, text: urlValue, negative: false});
-    child = new Console.ConsoleSidebar.URLGroupTreeElement(filter);
+    child = new URLGroupTreeElement(filter);
     if (urlValue) {
       child.tooltip = urlValue;
     }
@@ -218,10 +216,10 @@ Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
     this.appendChild(child);
     return child;
   }
-};
+}
 
 /** @enum {string} */
-Console.ConsoleSidebar._groupName = {
+export const _groupName = {
   ConsoleAPI: 'user message',
   All: 'message',
   Error: 'error',
@@ -231,25 +229,55 @@ Console.ConsoleSidebar._groupName = {
 };
 
 /** @const {!Map<string, string>} */
-Console.ConsoleSidebar._groupSingularTitleMap = new Map([
-  [Console.ConsoleSidebar._groupName.ConsoleAPI, ls`1 user message`],
-  [Console.ConsoleSidebar._groupName.All, ls`1 message`], [Console.ConsoleSidebar._groupName.Error, ls`1 error`],
-  [Console.ConsoleSidebar._groupName.Warning, ls`1 warning`], [Console.ConsoleSidebar._groupName.Info, ls`1 info`],
-  [Console.ConsoleSidebar._groupName.Verbose, ls`1 verbose`]
+export const _groupSingularTitleMap = new Map([
+  [_groupName.ConsoleAPI, ls`1 user message`], [_groupName.All, ls`1 message`], [_groupName.Error, ls`1 error`],
+  [_groupName.Warning, ls`1 warning`], [_groupName.Info, ls`1 info`], [_groupName.Verbose, ls`1 verbose`]
 ]);
 
 /** @const {!Map<string, string>} */
-Console.ConsoleSidebar._groupPluralTitleMap = new Map([
-  [Console.ConsoleSidebar._groupName.ConsoleAPI, ls`%d user messages`],
-  [Console.ConsoleSidebar._groupName.All, ls`%d messages`], [Console.ConsoleSidebar._groupName.Error, ls`%d errors`],
-  [Console.ConsoleSidebar._groupName.Warning, ls`%d warnings`], [Console.ConsoleSidebar._groupName.Info, ls`%d info`],
-  [Console.ConsoleSidebar._groupName.Verbose, ls`%d verbose`]
+export const _groupPluralTitleMap = new Map([
+  [_groupName.ConsoleAPI, ls`%d user messages`], [_groupName.All, ls`%d messages`], [_groupName.Error, ls`%d errors`],
+  [_groupName.Warning, ls`%d warnings`], [_groupName.Info, ls`%d info`], [_groupName.Verbose, ls`%d verbose`]
 ]);
 
 /** @const {!Map<string, string>} */
-Console.ConsoleSidebar._groupNoMessageTitleMap = new Map([
-  [Console.ConsoleSidebar._groupName.ConsoleAPI, ls`No user messages`],
-  [Console.ConsoleSidebar._groupName.All, ls`No messages`], [Console.ConsoleSidebar._groupName.Error, ls`No errors`],
-  [Console.ConsoleSidebar._groupName.Warning, ls`No warnings`], [Console.ConsoleSidebar._groupName.Info, ls`No info`],
-  [Console.ConsoleSidebar._groupName.Verbose, ls`No verbose`]
+export const _groupNoMessageTitleMap = new Map([
+  [_groupName.ConsoleAPI, ls`No user messages`], [_groupName.All, ls`No messages`], [_groupName.Error, ls`No errors`],
+  [_groupName.Warning, ls`No warnings`], [_groupName.Info, ls`No info`], [_groupName.Verbose, ls`No verbose`]
 ]);
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsoleSidebar = ConsoleSidebar;
+
+/** @enum {symbol} */
+Console.ConsoleSidebar.Events = Events;
+
+/**
+ * @constructor
+ */
+Console.ConsoleSidebar.URLGroupTreeElement = URLGroupTreeElement;
+
+/**
+ * @constructor
+ */
+Console.ConsoleSidebar.FilterTreeElement = FilterTreeElement;
+
+/** @enum {string} */
+Console.ConsoleSidebar._groupName = _groupName;
+
+/** @const {!Map<string, string>} */
+Console.ConsoleSidebar._groupSingularTitleMap = _groupSingularTitleMap;
+
+/** @const {!Map<string, string>} */
+Console.ConsoleSidebar._groupPluralTitleMap = _groupPluralTitleMap;
+
+/** @const {!Map<string, string>} */
+Console.ConsoleSidebar._groupNoMessageTitleMap = _groupNoMessageTitleMap;

front_end/console/ConsoleView.js

@@ -31,7 +31,7 @@
  * @implements {Console.ConsoleViewportProvider}
  * @unrestricted
  */
-Console.ConsoleView = class extends UI.VBox {
+export default class ConsoleView extends UI.VBox {
   constructor() {
     super();
     this.setMinimumSize(0, 35);
@@ -45,7 +45,7 @@ Console.ConsoleView = class extends UI.VBox {
     this._sidebar = new Console.ConsoleSidebar();
     this._sidebar.addEventListener(Console.ConsoleSidebar.Events.FilterSelected, this._onFilterChanged.bind(this));
     this._isSidebarOpen = false;
-    this._filter = new Console.ConsoleViewFilter(this._onFilterChanged.bind(this));
+    this._filter = new ConsoleViewFilter(this._onFilterChanged.bind(this));
 
     const consoleToolbarContainer = this.element.createChild('div', 'console-toolbar-container');
     this._splitWidget =
@@ -184,7 +184,7 @@ Console.ConsoleView = class extends UI.VBox {
     this._pendingBatchResize = false;
     this._onMessageResizedBound = this._onMessageResized.bind(this);
 
-    this._topGroup = Console.ConsoleGroup.createTopGroup();
+    this._topGroup = ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
     this._promptElement = this._messagesElement.createChild('div', 'source-code');
@@ -253,10 +253,10 @@ Console.ConsoleView = class extends UI.VBox {
    * @return {!Console.ConsoleView}
    */
   static instance() {
-    if (!Console.ConsoleView._instance) {
-      Console.ConsoleView._instance = new Console.ConsoleView();
+    if (!ConsoleView._instance) {
+      ConsoleView._instance = new ConsoleView();
     }
-    return Console.ConsoleView._instance;
+    return ConsoleView._instance;
   }
 
   static clearConsole() {
@@ -508,10 +508,9 @@ Console.ConsoleView = class extends UI.VBox {
     if (message.type === SDK.ConsoleMessage.MessageType.Command ||
         message.type === SDK.ConsoleMessage.MessageType.Result) {
       const lastMessage = this._consoleMessages.peekLast();
-      viewMessage[Console.ConsoleView._messageSortingTimeSymbol] =
-          lastMessage ? lastMessage[Console.ConsoleView._messageSortingTimeSymbol] : 0;
+      viewMessage[_messageSortingTimeSymbol] = lastMessage ? lastMessage[_messageSortingTimeSymbol] : 0;
     } else {
-      viewMessage[Console.ConsoleView._messageSortingTimeSymbol] = viewMessage.consoleMessage().timestamp;
+      viewMessage[_messageSortingTimeSymbol] = viewMessage.consoleMessage().timestamp;
     }
 
     let insertAt;
@@ -557,8 +556,7 @@ Console.ConsoleView = class extends UI.VBox {
      * @param {!Console.ConsoleViewMessage} viewMessage2
      */
     function timeComparator(viewMessage1, viewMessage2) {
-      return viewMessage1[Console.ConsoleView._messageSortingTimeSymbol] -
-          viewMessage2[Console.ConsoleView._messageSortingTimeSymbol];
+      return viewMessage1[_messageSortingTimeSymbol] - viewMessage2[_messageSortingTimeSymbol];
     }
   }
 
@@ -634,7 +632,7 @@ Console.ConsoleView = class extends UI.VBox {
     }
 
     if (viewMessage.consoleMessage().isGroupStartMessage()) {
-      this._currentGroup = new Console.ConsoleGroup(this._currentGroup, viewMessage);
+      this._currentGroup = new ConsoleGroup(this._currentGroup, viewMessage);
     }
 
     this._messageAppendedForTests();
@@ -652,9 +650,9 @@ Console.ConsoleView = class extends UI.VBox {
     const nestingLevel = this._currentGroup.nestingLevel();
     switch (message.type) {
       case SDK.ConsoleMessage.MessageType.Command:
-        return new Console.ConsoleCommand(message, this._linkifier, nestingLevel, this._onMessageResizedBound);
+        return new ConsoleCommand(message, this._linkifier, nestingLevel, this._onMessageResizedBound);
       case SDK.ConsoleMessage.MessageType.Result:
-        return new Console.ConsoleCommandResult(message, this._linkifier, nestingLevel, this._onMessageResizedBound);
+        return new ConsoleCommandResult(message, this._linkifier, nestingLevel, this._onMessageResizedBound);
       case SDK.ConsoleMessage.MessageType.StartGroupCollapsed:
       case SDK.ConsoleMessage.MessageType.StartGroup:
         return new Console.ConsoleGroupViewMessage(
@@ -760,7 +758,7 @@ Console.ConsoleView = class extends UI.VBox {
       const messageContents = [];
       let i;
       for (i = 0; i < chunkSize && i + messageIndex < this.itemCount(); ++i) {
-        const message = this.itemElement(messageIndex + i);
+        const message = /** @type {!Console.ConsoleViewMessage} */ (this.itemElement(messageIndex + i));
         messageContents.push(message.toExportString());
       }
       messageIndex += i;
@@ -824,7 +822,7 @@ Console.ConsoleView = class extends UI.VBox {
   }
 
   _updateMessageList() {
-    this._topGroup = Console.ConsoleGroup.createTopGroup();
+    this._topGroup = ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
     this._regexMatchRanges = [];
     this._hiddenByFilterCount = 0;
@@ -1006,8 +1004,7 @@ Console.ConsoleView = class extends UI.VBox {
         /** @type {{result: ?SDK.RemoteObject, commandMessage: !SDK.ConsoleMessage, exceptionDetails: (!Protocol.Runtime.ExceptionDetails|undefined)}} */
         (event.data);
     this._prompt.history().pushHistoryItem(data.commandMessage.messageText);
-    this._consoleHistorySetting.set(
-        this._prompt.history().historyData().slice(-Console.ConsoleView.persistedHistorySize));
+    this._consoleHistorySetting.set(this._prompt.history().historyData().slice(-persistedHistorySize));
     this._printResult(data.result, data.commandMessage, data.exceptionDetails);
   }
 
@@ -1245,18 +1242,21 @@ Console.ConsoleView = class extends UI.VBox {
         this._messagesElement.clientHeight - this._prompt.belowEditorElement().offsetHeight;
     return distanceToPromptEditorBottom <= 2;
   }
-};
+}
 
-Console.ConsoleView.persistedHistorySize = 300;
+export const persistedHistorySize = 300;
 
-Console.ConsoleViewFilter = class {
+/**
+ * @unrestricted
+ */
+export class ConsoleViewFilter {
   /**
    * @param {function()} filterChangedCallback
    */
   constructor(filterChangedCallback) {
     this._filterChanged = filterChangedCallback;
 
-    this._messageLevelFiltersSetting = Console.ConsoleViewFilter.levelFilterSetting();
+    this._messageLevelFiltersSetting = ConsoleViewFilter.levelFilterSetting();
     this._hideNetworkMessagesSetting = Common.moduleSetting('hideNetworkMessages');
     this._filterByExecutionContextSetting = Common.moduleSetting('selectedContextFilterEnabled');
 
@@ -1431,12 +1431,12 @@ Console.ConsoleViewFilter = class {
     this._textFilterUI.setValue('');
     this._onFilterChanged();
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Console.ConsoleCommand = class extends Console.ConsoleViewMessage {
+export class ConsoleCommand extends Console.ConsoleViewMessage {
   /**
    * @override
    * @return {!Element}
@@ -1453,7 +1453,7 @@ Console.ConsoleCommand = class extends Console.ConsoleViewMessage {
       this._formattedCommand.textContent = this.text.replaceControlCharacters();
       this._contentElement.appendChild(this._formattedCommand);
 
-      if (this._formattedCommand.textContent.length < Console.ConsoleCommand.MaxLengthToIgnoreHighlighter) {
+      if (this._formattedCommand.textContent.length < ConsoleCommand.MaxLengthToIgnoreHighlighter) {
         const javascriptSyntaxHighlighter = new UI.SyntaxHighlighter('text/javascript', true);
         javascriptSyntaxHighlighter.syntaxHighlightNode(this._formattedCommand).then(this._updateSearch.bind(this));
       } else {
@@ -1468,16 +1468,12 @@ Console.ConsoleCommand = class extends Console.ConsoleViewMessage {
   _updateSearch() {
     this.setSearchRegex(this.searchRegex());
   }
-};
+}
 
 /**
- * The maximum length before strings are considered too long for syntax highlighting.
- * @const
- * @type {number}
+ * @unrestricted
  */
-Console.ConsoleCommand.MaxLengthToIgnoreHighlighter = 10000;
-
-Console.ConsoleCommandResult = class extends Console.ConsoleViewMessage {
+export class ConsoleCommandResult extends Console.ConsoleViewMessage {
   /**
    * @override
    * @return {!Element}
@@ -1493,9 +1489,12 @@ Console.ConsoleCommandResult = class extends Console.ConsoleViewMessage {
     }
     return element;
   }
-};
+}
 
-Console.ConsoleGroup = class {
+/**
+ * @unrestricted
+ */
+export class ConsoleGroup {
   /**
    * @param {?Console.ConsoleGroup} parentGroup
    * @param {?Console.ConsoleViewMessage} groupMessage
@@ -1511,7 +1510,7 @@ Console.ConsoleGroup = class {
    * @return {!Console.ConsoleGroup}
    */
   static createTopGroup() {
-    return new Console.ConsoleGroup(null, null);
+    return new ConsoleGroup(null, null);
   }
 
   /**
@@ -1534,12 +1533,12 @@ Console.ConsoleGroup = class {
   parentGroup() {
     return this._parentGroup;
   }
-};
+}
 
 /**
  * @implements {UI.ActionDelegate}
  */
-Console.ConsoleView.ActionDelegate = class {
+export class ActionDelegate {
   /**
    * @override
    * @param {!UI.Context} context
@@ -1551,26 +1550,73 @@ Console.ConsoleView.ActionDelegate = class {
       case 'console.show':
         Host.InspectorFrontendHost.bringToFront();
         Common.console.show();
-        Console.ConsoleView.instance()._focusPrompt();
+        ConsoleView.instance()._focusPrompt();
         return true;
       case 'console.clear':
-        Console.ConsoleView.clearConsole();
+        ConsoleView.clearConsole();
         return true;
       case 'console.clear.history':
-        Console.ConsoleView.instance()._clearHistory();
+        ConsoleView.instance()._clearHistory();
         return true;
       case 'console.create-pin':
-        Console.ConsoleView.instance()._pinPane.addPin('', true /* userGesture */);
+        ConsoleView.instance()._pinPane.addPin('', true /* userGesture */);
         return true;
     }
     return false;
   }
-};
+}
+
+/** @type {symbol} */
+export const _messageSortingTimeSymbol = Symbol('messageSortingTime');
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsoleView = ConsoleView;
+Console.ConsoleView.persistedHistorySize = persistedHistorySize;
 
 /**
  * @typedef {{messageIndex: number, matchIndex: number}}
  */
 Console.ConsoleView.RegexMatchRange;
 
+/**
+ * @implements {UI.ActionDelegate}
+ */
+Console.ConsoleView.ActionDelegate = ActionDelegate;
+
 /** @type {symbol} */
-Console.ConsoleView._messageSortingTimeSymbol = Symbol('messageSortingTime');
+Console.ConsoleView._messageSortingTimeSymbol = _messageSortingTimeSymbol;
+
+/**
+ * @constructor
+ */
+Console.ConsoleViewFilter = ConsoleViewFilter;
+
+/**
+ * @constructor
+ */
+Console.ConsoleCommand = ConsoleCommand;
+
+/**
+ * The maximum length before strings are considered too long for syntax highlighting.
+ * @const
+ * @type {number}
+ */
+Console.ConsoleCommand.MaxLengthToIgnoreHighlighter = 10000;
+
+/**
+ * @constructor
+ */
+Console.ConsoleCommandResult = ConsoleCommandResult;
+
+/**
+ * @constructor
+ */
+Console.ConsoleGroup = ConsoleGroup;

front_end/console/ConsoleViewMessage.js

@@ -31,7 +31,7 @@
  * @implements {Console.ConsoleViewportElement}
  * @unrestricted
  */
-Console.ConsoleViewMessage = class {
+export default class ConsoleViewMessage {
   /**
    * @param {!SDK.ConsoleMessage} consoleMessage
    * @param {!Components.Linkifier} linkifier
@@ -1681,12 +1681,12 @@ Console.ConsoleViewMessage = class {
     }, '');
     return result.replace(/[%]o/g, '');
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Console.ConsoleGroupViewMessage = class extends Console.ConsoleViewMessage {
+export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   /**
    * @param {!SDK.ConsoleMessage} consoleMessage
    * @param {!Components.Linkifier} linkifier
@@ -1766,14 +1766,39 @@ Console.ConsoleGroupViewMessage = class extends Console.ConsoleViewMessage {
       this._repeatCountElement.insertBefore(this._expandGroupIcon, this._repeatCountElement.firstChild);
     }
   }
-};
+}
 
 /**
  * @const
  * @type {number}
  */
-Console.ConsoleViewMessage.MaxLengthForLinks = 40;
+export const MaxLengthForLinks = 40;
 
-Console.ConsoleViewMessage._MaxTokenizableStringLength = 10000;
+export const _MaxTokenizableStringLength = 10000;
+export const _LongStringVisibleLength = 5000;
 
-Console.ConsoleViewMessage._LongStringVisibleLength = 5000;
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @implements {Console.ConsoleViewportElement}
+ * @unrestricted
+ * @constructor
+ */
+Console.ConsoleViewMessage = ConsoleViewMessage;
+
+/**
+ * @constructor
+ */
+Console.ConsoleGroupViewMessage = ConsoleGroupViewMessage;
+
+/**
+ * @const
+ * @type {number}
+ */
+Console.ConsoleViewMessage.MaxLengthForLinks = MaxLengthForLinks;
+Console.ConsoleViewMessage._MaxTokenizableStringLength = _MaxTokenizableStringLength;
+Console.ConsoleViewMessage._LongStringVisibleLength = _LongStringVisibleLength;

front_end/console/ConsoleViewport.js

@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Console.ConsoleViewport = class {
+export default class ConsoleViewport {
   /**
    * @param {!Console.ConsoleViewportProvider} provider
    */
@@ -762,35 +762,33 @@ Console.ConsoleViewport = class {
     // Use offsetHeight instead of clientHeight to avoid being affected by horizontal scroll.
     return this.element.offsetHeight;
   }
-};
+}
 
 /**
  * @interface
  */
-Console.ConsoleViewportProvider = function() {};
-
-Console.ConsoleViewportProvider.prototype = {
+class ConsoleViewportProvider {
   /**
    * @param {number} index
    * @return {number}
    */
   fastHeight(index) {
     return 0;
-  },
+  }
 
   /**
    * @return {number}
    */
   itemCount() {
     return 0;
-  },
+  }
 
   /**
    * @return {number}
    */
   minimumRowHeight() {
     return 0;
-  },
+  }
 
   /**
    * @param {number} index
@@ -799,19 +797,42 @@ Console.ConsoleViewportProvider.prototype = {
   itemElement(index) {
     return null;
   }
-};
+}
 
 /**
  * @interface
  */
-Console.ConsoleViewportElement = function() {};
-Console.ConsoleViewportElement.prototype = {
-  willHide() {},
+export class ConsoleViewportElement {
+  willHide() {
+  }
 
-  wasShown() {},
+  wasShown() {
+  }
 
   /**
    * @return {!Element}
    */
-  element() {},
-};
+  element() {
+  }
+}
+
+/* Legacy exported object */
+self.Console = self.Console || {};
+
+/* Legacy exported object */
+Console = Console || {};
+
+/**
+ * @constructor
+ */
+Console.ConsoleViewport = ConsoleViewport;
+
+/**
+ * @interface
+ */
+Console.ConsoleViewportProvider = ConsoleViewportProvider;
+
+/**
+ * @interface
+ */
+Console.ConsoleViewportElement = ConsoleViewportElement;

front_end/console/console.js

@@ -0,0 +1,35 @@
+// 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 './ConsoleContextSelector.js';
+import './ConsoleFilter.js';
+import './ConsolePinPane.js';
+import './ConsoleSidebar.js';
+import './ConsoleViewport.js';
+import './ConsoleViewMessage.js';
+import './ConsolePrompt.js';
+import './ConsoleView.js';
+import './ConsolePanel.js';
+
+import * as ConsoleContextSelector from './ConsoleContextSelector.js';
+import * as ConsoleFilter from './ConsoleFilter.js';
+import * as ConsolePanel from './ConsolePanel.js';
+import * as ConsolePinPane from './ConsolePinPane.js';
+import * as ConsolePrompt from './ConsolePrompt.js';
+import * as ConsoleSidebar from './ConsoleSidebar.js';
+import * as ConsoleView from './ConsoleView.js';
+import * as ConsoleViewMessage from './ConsoleViewMessage.js';
+import * as ConsoleViewport from './ConsoleViewport.js';
+
+export {
+  ConsoleContextSelector,
+  ConsoleFilter,
+  ConsolePanel,
+  ConsolePinPane,
+  ConsolePrompt,
+  ConsoleSidebar,
+  ConsoleView,
+  ConsoleViewMessage,
+  ConsoleViewport,
+};

front_end/console/module.json

@@ -213,7 +213,8 @@
         "sdk",
         "formatter"
     ],
-    "scripts": [
+    "scripts": [],
+    "modules": [
         "ConsoleContextSelector.js",
         "ConsoleFilter.js",
         "ConsolePinPane.js",