Migrate components/ to ESM

Bug: 1006759
Change-Id: Ifa7e245a9bbdfc02a5885efb6907e488afdca6e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1847912
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704189}

third_party/blink/renderer/devtools/BUILD.gn

@@ -137,13 +137,7 @@ if (!external_devtools_frontend) {
     "front_end/color_picker/spectrum.css",
     "front_end/color_picker/Spectrum.js",
     "front_end/common/module.json",
-    "front_end/components/DockController.js",
-    "front_end/components/ImagePreview.js",
     "front_end/components/imagePreview.css",
-    "front_end/components/JSPresentationUtils.js",
-    "front_end/components/Linkifier.js",
-    "front_end/components/TargetDetachedDialog.js",
-    "front_end/components/Reload.js",
     "front_end/components/jsUtils.css",
     "front_end/components/module.json",
     "front_end/console/ConsoleContextSelector.js",
@@ -838,6 +832,13 @@ if (!external_devtools_frontend) {
   all_devtools_files += lighthouse_locale_files
 
   all_devtools_modules = [
+    "front_end/components/components.js",
+    "front_end/components/TargetDetachedDialog.js",
+    "front_end/components/Reload.js",
+    "front_end/components/Linkifier.js",
+    "front_end/components/JSPresentationUtils.js",
+    "front_end/components/ImagePreview.js",
+    "front_end/components/DockController.js",
     "front_end/bindings/bindings.js",
     "front_end/bindings/TempFile.js",
     "front_end/bindings/StylesSourceMapping.js",
@@ -1207,6 +1208,13 @@ if (!external_devtools_frontend) {
   ]
 
   copied_devtools_modules = [
+    "$resources_out_dir/components/components.js",
+    "$resources_out_dir/components/TargetDetachedDialog.js",
+    "$resources_out_dir/components/Reload.js",
+    "$resources_out_dir/components/Linkifier.js",
+    "$resources_out_dir/components/JSPresentationUtils.js",
+    "$resources_out_dir/components/ImagePreview.js",
+    "$resources_out_dir/components/DockController.js",
     "$resources_out_dir/bindings/bindings.js",
     "$resources_out_dir/bindings/TempFile.js",
     "$resources_out_dir/bindings/StylesSourceMapping.js",

third_party/blink/renderer/devtools/front_end/components/DockController.js

@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Components.DockController = class extends Common.Object {
+export default class DockController extends Common.Object {
   /**
    * @param {boolean} canDock
    */
@@ -44,15 +44,12 @@ Components.DockController = class extends Common.Object {
         UI.ToolbarButton.Events.Click, Host.InspectorFrontendHost.closeWindow.bind(Host.InspectorFrontendHost));
 
     if (!canDock) {
-      this._dockSide = Components.DockController.State.Undocked;
+      this._dockSide = State.Undocked;
       this._closeButton.setVisible(false);
       return;
     }
 
-    this._states = [
-      Components.DockController.State.DockedToRight, Components.DockController.State.DockedToBottom,
-      Components.DockController.State.DockedToLeft, Components.DockController.State.Undocked
-    ];
+    this._states = [State.DockedToRight, State.DockedToBottom, State.DockedToLeft, State.Undocked];
     this._currentDockStateSetting = Common.settings.moduleSetting('currentDockState');
     this._currentDockStateSetting.addChangeListener(this._dockSideChanged, this);
     this._lastDockStateSetting = Common.settings.createSetting('lastDockState', 'bottom');
@@ -98,8 +95,7 @@ Components.DockController = class extends Common.Object {
    * @return {boolean}
    */
   isVertical() {
-    return this._dockSide === Components.DockController.State.DockedToRight ||
-        this._dockSide === Components.DockController.State.DockedToLeft;
+    return this._dockSide === State.DockedToRight || this._dockSide === State.DockedToLeft;
   }
 
   /**
@@ -121,21 +117,21 @@ Components.DockController = class extends Common.Object {
 
     this._savedFocus = document.deepActiveElement();
     const eventData = {from: this._dockSide, to: dockSide};
-    this.dispatchEventToListeners(Components.DockController.Events.BeforeDockSideChanged, eventData);
+    this.dispatchEventToListeners(Events.BeforeDockSideChanged, eventData);
     console.timeStamp('DockController.setIsDocked');
     this._dockSide = dockSide;
     this._currentDockStateSetting.set(dockSide);
     Host.InspectorFrontendHost.setIsDocked(
-        dockSide !== Components.DockController.State.Undocked, this._setIsDockedResponse.bind(this, eventData));
-    this._closeButton.setVisible(this._dockSide !== Components.DockController.State.Undocked);
-    this.dispatchEventToListeners(Components.DockController.Events.DockSideChanged, eventData);
+        dockSide !== State.Undocked, this._setIsDockedResponse.bind(this, eventData));
+    this._closeButton.setVisible(this._dockSide !== State.Undocked);
+    this.dispatchEventToListeners(Events.DockSideChanged, eventData);
   }
 
   /**
    * @param {{from: string, to: string}} eventData
    */
   _setIsDockedResponse(eventData) {
-    this.dispatchEventToListeners(Components.DockController.Events.AfterDockSideChanged, eventData);
+    this.dispatchEventToListeners(Events.AfterDockSideChanged, eventData);
     if (this._savedFocus) {
       this._savedFocus.focus();
       this._savedFocus = null;
@@ -149,9 +145,9 @@ Components.DockController = class extends Common.Object {
     }
     this.setDockSide(this._lastDockStateSetting.get());
   }
-};
+}
 
-Components.DockController.State = {
+export const State = {
   DockedToBottom: 'bottom',
   DockedToRight: 'right',
   DockedToLeft: 'left',
@@ -163,7 +159,7 @@ Components.DockController.State = {
 // after frontend is docked/undocked in the browser.
 
 /** @enum {symbol} */
-Components.DockController.Events = {
+export const Events = {
   BeforeDockSideChanged: Symbol('BeforeDockSideChanged'),
   DockSideChanged: Symbol('DockSideChanged'),
   AfterDockSideChanged: Symbol('AfterDockSideChanged')
@@ -173,7 +169,7 @@ Components.DockController.Events = {
  * @implements {UI.ActionDelegate}
  * @unrestricted
  */
-Components.DockController.ToggleDockActionDelegate = class {
+export class ToggleDockActionDelegate {
   /**
    * @override
    * @param {!UI.Context} context
@@ -184,13 +180,13 @@ Components.DockController.ToggleDockActionDelegate = class {
     Components.dockController._toggleDockSide();
     return true;
   }
-};
+}
 
 /**
  * @implements {UI.ToolbarItem.Provider}
  * @unrestricted
  */
-Components.DockController.CloseButtonProvider = class {
+export class CloseButtonProvider {
   /**
    * @override
    * @return {?UI.ToolbarItem}
@@ -198,9 +194,29 @@ Components.DockController.CloseButtonProvider = class {
   item() {
     return Components.dockController._closeButton;
   }
-};
+}
+
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+/** @constructor */
+Components.DockController = DockController;
+
+Components.DockController.State = State;
+
+/** @enum {symbol} */
+Components.DockController.Events = Events;
+
+/** @constructor */
+Components.DockController.ToggleDockActionDelegate = ToggleDockActionDelegate;
+
+/** @constructor */
+Components.DockController.CloseButtonProvider = CloseButtonProvider;
 
 /**
  * @type {!Components.DockController}
  */
-Components.dockController;
+Components.dockController;
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/components/ImagePreview.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.
 
-Components.ImagePreview = class {
+export default class ImagePreview {
   /**
    * @param {!SDK.Target} target
    * @param {string} originalImageURL
@@ -113,4 +113,13 @@ Components.ImagePreview = class {
     const imageSourceText = parsedImageURL.isValid ? parsedImageURL.displayName : ls`unknown source`;
     return ls`Image from ${imageSourceText}`;
   }
-};
+}
+
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+/** @constructor */
+Components.ImagePreview = ImagePreview;

third_party/blink/renderer/devtools/front_end/components/JSPresentationUtils.js

@@ -28,7 +28,6 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-Components.JSPresentationUtils = {};
 
 /**
  * @param {?SDK.Target} target
@@ -37,8 +36,7 @@ Components.JSPresentationUtils = {};
  * @param {function()=} contentUpdated
  * @return {{element: !Element, links: !Array<!Element>}}
  */
-Components.JSPresentationUtils.buildStackTracePreviewContents = function(
-    target, linkifier, stackTrace, contentUpdated) {
+export function buildStackTracePreviewContents(target, linkifier, stackTrace, contentUpdated) {
   const element = createElementWithClass('span', 'monospace');
   element.style.display = 'inline-block';
   const shadowRoot = UI.createShadowRootWithCoreStyles(element, 'components/jsUtils.css');
@@ -146,4 +144,14 @@ Components.JSPresentationUtils.buildStackTracePreviewContents = function(
   }
 
   return {element, links};
-};
+}
+
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+Components.JSPresentationUtils = {};
+
+Components.JSPresentationUtils.buildStackTracePreviewContents = buildStackTracePreviewContents;

third_party/blink/renderer/devtools/front_end/components/Reload.js

 // Copyright 2015 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.
-Components.reload = function() {
+
+export function reload() {
   if (Components.dockController.canDock() &&
       Components.dockController.dockSide() === Components.DockController.State.Undocked) {
     Host.InspectorFrontendHost.setIsDocked(true, function() {});
   }
   window.location.reload();
-};
+}
+
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+Components.reload = reload;

third_party/blink/renderer/devtools/front_end/components/TargetDetachedDialog.js

@@ -5,7 +5,7 @@
 /**
  * @implements {Protocol.InspectorDispatcher}
  */
-Components.TargetDetachedDialog = class extends SDK.SDKModel {
+export default class TargetDetachedDialog extends SDK.SDKModel {
   /**
    * @param {!SDK.Target} target
    */
@@ -17,7 +17,7 @@ Components.TargetDetachedDialog = class extends SDK.SDKModel {
     target.registerInspectorDispatcher(this);
     target.inspectorAgent().enable();
     this._hideCrashedDialog = null;
-    Components.TargetDetachedDialog._disconnectedScreenWithReasonWasShown = false;
+    TargetDetachedDialog._disconnectedScreenWithReasonWasShown = false;
   }
 
   /**
@@ -25,7 +25,7 @@ Components.TargetDetachedDialog = class extends SDK.SDKModel {
    * @param {string} reason
    */
   detached(reason) {
-    Components.TargetDetachedDialog._disconnectedScreenWithReasonWasShown = true;
+    TargetDetachedDialog._disconnectedScreenWithReasonWasShown = true;
     UI.RemoteDebuggingTerminatedScreen.show(reason);
   }
 
@@ -56,6 +56,15 @@ Components.TargetDetachedDialog = class extends SDK.SDKModel {
       this._hideCrashedDialog = null;
     }
   }
-};
+}
 
-SDK.SDKModel.register(Components.TargetDetachedDialog, SDK.Target.Capability.Inspector, true);
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+/** @constructor */
+Components.TargetDetachedDialog = TargetDetachedDialog;
+
+SDK.SDKModel.register(TargetDetachedDialog, SDK.Target.Capability.Inspector, true);
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/components/components.js

+// 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 * as DockController from './DockController.js';
+import * as ImagePreview from './ImagePreview.js';
+import * as JSPresentationUtils from './JSPresentationUtils.js';
+import * as Linkifier from './Linkifier.js';
+import * as Reload from './Reload.js';
+import * as TargetDetachedDialog from './TargetDetachedDialog.js';
+
+export {
+  DockController,
+  ImagePreview,
+  JSPresentationUtils,
+  Linkifier,
+  Reload,
+  TargetDetachedDialog,
+};

third_party/blink/renderer/devtools/front_end/components/module.json

@@ -4,7 +4,9 @@
         "platform",
         "ui"
     ],
-    "scripts": [
+    "scripts": [],
+    "modules": [
+        "components.js",
         "JSPresentationUtils.js",
         "DockController.js",
         "ImagePreview.js",

third_party/blink/renderer/devtools/front_end/root.js

@@ -14,3 +14,4 @@ import './ui/ui.js';
 import './services/services.js';
 import './workspace/workspace.js';
 import './bindings/bindings.js';
+import './components/components.js';