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/Linkifier.js

@@ -32,7 +32,7 @@
  * @implements {SDK.TargetManager.Observer}
  * @unrestricted
  */
-Components.Linkifier = class {
+export default class Linkifier {
   /**
    * @param {number=} maxLengthForDisplayedURLs
    * @param {boolean=} useLinkDecorator
@@ -44,18 +44,18 @@ Components.Linkifier = class {
     /** @type {!Map<!SDK.Target, !Bindings.LiveLocationPool>} */
     this._locationPoolByTarget = new Map();
     this._useLinkDecorator = !!useLinkDecorator;
-    Components.Linkifier._instances.add(this);
+    _instances.add(this);
     SDK.targetManager.observeTargets(this);
   }
 
   /**
-   * @param {!Components.LinkDecorator} decorator
+   * @param {!LinkDecorator} decorator
    */
   static setLinkDecorator(decorator) {
-    console.assert(!Components.Linkifier._decorator, 'Cannot re-register link decorator.');
-    Components.Linkifier._decorator = decorator;
-    decorator.addEventListener(Components.LinkDecorator.Events.LinkIconChanged, onLinkIconChanged);
-    for (const linkifier of Components.Linkifier._instances) {
+    console.assert(!_decorator, 'Cannot re-register link decorator.');
+    _decorator = decorator;
+    decorator.addEventListener(LinkDecorator.Events.LinkIconChanged, onLinkIconChanged);
+    for (const linkifier of _instances) {
       linkifier._updateAllAnchorDecorations();
     }
 
@@ -64,9 +64,9 @@ Components.Linkifier = class {
      */
     function onLinkIconChanged(event) {
       const uiSourceCode = /** @type {!Workspace.UISourceCode} */ (event.data);
-      const links = uiSourceCode[Components.Linkifier._sourceCodeAnchors] || [];
+      const links = uiSourceCode[_sourceCodeAnchors] || [];
       for (const link of links) {
-        Components.Linkifier._updateLinkDecorations(link);
+        Linkifier._updateLinkDecorations(link);
       }
     }
   }
@@ -74,7 +74,7 @@ Components.Linkifier = class {
   _updateAllAnchorDecorations() {
     for (const anchors of this._anchorsByTarget.values()) {
       for (const anchor of anchors) {
-        Components.Linkifier._updateLinkDecorations(anchor);
+        Linkifier._updateLinkDecorations(anchor);
       }
     }
   }
@@ -84,15 +84,15 @@ Components.Linkifier = class {
    * @param {!Workspace.UILocation} uiLocation
    */
   static _bindUILocation(anchor, uiLocation) {
-    Components.Linkifier._linkInfo(anchor).uiLocation = uiLocation;
+    Linkifier._linkInfo(anchor).uiLocation = uiLocation;
     if (!uiLocation) {
       return;
     }
     const uiSourceCode = uiLocation.uiSourceCode;
-    let sourceCodeAnchors = uiSourceCode[Components.Linkifier._sourceCodeAnchors];
+    let sourceCodeAnchors = uiSourceCode[_sourceCodeAnchors];
     if (!sourceCodeAnchors) {
       sourceCodeAnchors = new Set();
-      uiSourceCode[Components.Linkifier._sourceCodeAnchors] = sourceCodeAnchors;
+      uiSourceCode[_sourceCodeAnchors] = sourceCodeAnchors;
     }
     sourceCodeAnchors.add(anchor);
   }
@@ -101,14 +101,14 @@ Components.Linkifier = class {
    * @param {!Element} anchor
    */
   static _unbindUILocation(anchor) {
-    const info = Components.Linkifier._linkInfo(anchor);
+    const info = Linkifier._linkInfo(anchor);
     if (!info.uiLocation) {
       return;
     }
 
     const uiSourceCode = info.uiLocation.uiSourceCode;
     info.uiLocation = null;
-    const sourceCodeAnchors = uiSourceCode[Components.Linkifier._sourceCodeAnchors];
+    const sourceCodeAnchors = uiSourceCode[_sourceCodeAnchors];
     if (sourceCodeAnchors) {
       sourceCodeAnchors.delete(anchor);
     }
@@ -132,15 +132,15 @@ Components.Linkifier = class {
     locationPool.disposeAll();
     const anchors = this._anchorsByTarget.remove(target);
     for (const anchor of anchors) {
-      const info = Components.Linkifier._linkInfo(anchor);
+      const info = Linkifier._linkInfo(anchor);
       info.liveLocation = null;
-      Components.Linkifier._unbindUILocation(anchor);
+      Linkifier._unbindUILocation(anchor);
       if (info.fallback) {
         anchor.href = info.fallback.href;
         anchor.title = info.fallback.title;
         anchor.className = info.fallback.className;
         anchor.textContent = info.fallback.textContent;
-        anchor[Components.Linkifier._infoSymbol] = info.fallback[Components.Linkifier._infoSymbol];
+        anchor[_infoSymbol] = info.fallback[_infoSymbol];
       }
     }
   }
@@ -157,7 +157,7 @@ Components.Linkifier = class {
   maybeLinkifyScriptLocation(target, scriptId, sourceURL, lineNumber, columnNumber, classes) {
     let fallbackAnchor = null;
     if (sourceURL) {
-      fallbackAnchor = Components.Linkifier.linkifyURL(
+      fallbackAnchor = Linkifier.linkifyURL(
           sourceURL,
           {className: classes, lineNumber: lineNumber, columnNumber: columnNumber, maxLength: this._maxLength});
     }
@@ -176,8 +176,8 @@ Components.Linkifier = class {
       return fallbackAnchor;
     }
 
-    const anchor = Components.Linkifier._createLink('', classes || '');
-    const info = Components.Linkifier._linkInfo(anchor);
+    const anchor = Linkifier._createLink('', classes || '');
+    const info = Linkifier._linkInfo(anchor);
     info.enableDecorator = this._useLinkDecorator;
     info.fallback = fallbackAnchor;
     info.liveLocation = Bindings.debuggerWorkspaceBinding.createLiveLocation(
@@ -201,7 +201,7 @@ Components.Linkifier = class {
   linkifyScriptLocation(target, scriptId, sourceURL, lineNumber, columnNumber, classes) {
     const scriptLink = this.maybeLinkifyScriptLocation(target, scriptId, sourceURL, lineNumber, columnNumber, classes);
     return scriptLink ||
-        Components.Linkifier.linkifyURL(
+        Linkifier.linkifyURL(
             sourceURL,
             {className: classes, lineNumber: lineNumber, columnNumber: columnNumber, maxLength: this._maxLength});
   }
@@ -239,7 +239,7 @@ Components.Linkifier = class {
     console.assert(stackTrace.callFrames && stackTrace.callFrames.length);
 
     const topFrame = stackTrace.callFrames[0];
-    const fallbackAnchor = Components.Linkifier.linkifyURL(topFrame.url, {
+    const fallbackAnchor = Linkifier.linkifyURL(topFrame.url, {
       className: classes,
       lineNumber: topFrame.lineNumber,
       columnNumber: topFrame.columnNumber,
@@ -255,8 +255,8 @@ Components.Linkifier = class {
       return fallbackAnchor;
     }
 
-    const anchor = Components.Linkifier._createLink('', classes || '');
-    const info = Components.Linkifier._linkInfo(anchor);
+    const anchor = Linkifier._createLink('', classes || '');
+    const info = Linkifier._linkInfo(anchor);
     info.enableDecorator = this._useLinkDecorator;
     info.fallback = fallbackAnchor;
     info.liveLocation = Bindings.debuggerWorkspaceBinding.createStackTraceTopFrameLiveLocation(
@@ -274,8 +274,8 @@ Components.Linkifier = class {
    * @return {!Element}
    */
   linkifyCSSLocation(rawLocation, classes) {
-    const anchor = Components.Linkifier._createLink('', classes || '');
-    const info = Components.Linkifier._linkInfo(anchor);
+    const anchor = Linkifier._createLink('', classes || '');
+    const info = Linkifier._linkInfo(anchor);
     info.enableDecorator = this._useLinkDecorator;
     info.liveLocation = Bindings.cssWorkspaceBinding.createLiveLocation(
         rawLocation, this._updateAnchor.bind(this, anchor),
@@ -298,7 +298,7 @@ Components.Linkifier = class {
       this.targetRemoved(target);
     }
     SDK.targetManager.unobserveTargets(this);
-    Components.Linkifier._instances.delete(this);
+    _instances.delete(this);
   }
 
   /**
@@ -306,15 +306,15 @@ Components.Linkifier = class {
    * @param {!Bindings.LiveLocation} liveLocation
    */
   _updateAnchor(anchor, liveLocation) {
-    Components.Linkifier._unbindUILocation(anchor);
+    Linkifier._unbindUILocation(anchor);
     const uiLocation = liveLocation.uiLocation();
     if (!uiLocation) {
       return;
     }
 
-    Components.Linkifier._bindUILocation(anchor, uiLocation);
+    Linkifier._bindUILocation(anchor, uiLocation);
     const text = uiLocation.linkText(true /* skipTrim */);
-    Components.Linkifier._setTrimmedText(anchor, text, this._maxLength);
+    Linkifier._setTrimmedText(anchor, text, this._maxLength);
 
     let titleText = uiLocation.uiSourceCode.url();
     if (typeof uiLocation.lineNumber === 'number') {
@@ -322,24 +322,24 @@ Components.Linkifier = class {
     }
     anchor.title = titleText;
     anchor.classList.toggle('webkit-html-blackbox-link', liveLocation.isBlackboxed());
-    Components.Linkifier._updateLinkDecorations(anchor);
+    Linkifier._updateLinkDecorations(anchor);
   }
 
   /**
    * @param {!Element} anchor
    */
   static _updateLinkDecorations(anchor) {
-    const info = Components.Linkifier._linkInfo(anchor);
+    const info = Linkifier._linkInfo(anchor);
     if (!info || !info.enableDecorator) {
       return;
     }
-    if (!Components.Linkifier._decorator || !info.uiLocation) {
+    if (!_decorator || !info.uiLocation) {
       return;
     }
     if (info.icon && info.icon.parentElement) {
       anchor.removeChild(info.icon);
     }
-    const icon = Components.Linkifier._decorator.linkIcon(info.uiLocation.uiSourceCode);
+    const icon = _decorator.linkIcon(info.uiLocation.uiSourceCode);
     if (icon) {
       icon.style.setProperty('margin-right', '2px');
       anchor.insertBefore(icon, anchor.firstChild);
@@ -371,8 +371,8 @@ Components.Linkifier = class {
       linkText += ':' + (lineNumber + 1);
     }
     const title = linkText !== url ? url : '';
-    const link = Components.Linkifier._createLink(linkText, className, maxLength, title, url, preventClick);
-    const info = Components.Linkifier._linkInfo(link);
+    const link = Linkifier._createLink(linkText, className, maxLength, title, url, preventClick);
+    const info = Linkifier._linkInfo(link);
     if (typeof lineNumber === 'number') {
       info.lineNumber = lineNumber;
     }
@@ -389,8 +389,8 @@ Components.Linkifier = class {
    * @return {!Element}
    */
   static linkifyRevealable(revealable, text, fallbackHref) {
-    const link = Components.Linkifier._createLink(text, '', UI.MaxLengthForDisplayedURLs, undefined, fallbackHref);
-    Components.Linkifier._linkInfo(link).revealable = revealable;
+    const link = Linkifier._createLink(text, '', UI.MaxLengthForDisplayedURLs, undefined, fallbackHref);
+    Linkifier._linkInfo(link).revealable = revealable;
     return link;
   }
 
@@ -412,8 +412,8 @@ Components.Linkifier = class {
     if (href) {
       link.href = href;
     }
-    Components.Linkifier._setTrimmedText(link, text, maxLength);
-    link[Components.Linkifier._infoSymbol] = {
+    Linkifier._setTrimmedText(link, text, maxLength);
+    link[_infoSymbol] = {
       icon: null,
       enableDecorator: false,
       uiLocation: null,
@@ -426,12 +426,12 @@ Components.Linkifier = class {
     };
     if (!preventClick) {
       link.addEventListener('click', event => {
-        if (Components.Linkifier._handleClick(event)) {
+        if (Linkifier._handleClick(event)) {
           event.consume(true);
         }
       }, false);
       link.addEventListener('keydown', event => {
-        if (isEnterKey(event) && Components.Linkifier._handleClick(event)) {
+        if (isEnterKey(event) && Linkifier._handleClick(event)) {
           event.consume(true);
         }
       }, false);
@@ -463,7 +463,7 @@ Components.Linkifier = class {
      */
     function appendHiddenText(string) {
       const ellipsisNode = link.createChild('span', 'devtools-link-ellipsis').createTextChild('\u2026');
-      ellipsisNode[Components.Linkifier._untruncatedNodeTextSymbol] = string;
+      ellipsisNode[_untruncatedNodeTextSymbol] = string;
     }
 
     /**
@@ -507,7 +507,7 @@ Components.Linkifier = class {
    * @return {string}
    */
   static untruncatedNodeText(node) {
-    return node[Components.Linkifier._untruncatedNodeTextSymbol] || node.textContent;
+    return node[_untruncatedNodeTextSymbol] || node.textContent;
   }
 
   /**
@@ -515,7 +515,7 @@ Components.Linkifier = class {
    * @return {?Components._LinkInfo}
    */
   static _linkInfo(link) {
-    return /** @type {?Components._LinkInfo} */ (link ? link[Components.Linkifier._infoSymbol] || null : null);
+    return /** @type {?Components._LinkInfo} */ (link ? link[_infoSymbol] || null : null);
   }
 
   /**
@@ -527,7 +527,7 @@ Components.Linkifier = class {
     if (UI.isBeingEdited(/** @type {!Node} */ (event.target)) || link.hasSelection()) {
       return false;
     }
-    const actions = Components.Linkifier._linkActions(link);
+    const actions = Linkifier._linkActions(link);
     if (actions.length) {
       actions[0].handler.call(null);
       return true;
@@ -539,28 +539,27 @@ Components.Linkifier = class {
    * @return {!Common.Setting}
    */
   static _linkHandlerSetting() {
-    if (!Components.Linkifier._linkHandlerSettingInstance) {
-      Components.Linkifier._linkHandlerSettingInstance =
-          Common.settings.createSetting('openLinkHandler', Common.UIString('auto'));
+    if (!Linkifier._linkHandlerSettingInstance) {
+      Linkifier._linkHandlerSettingInstance = Common.settings.createSetting('openLinkHandler', ls`auto`);
     }
-    return Components.Linkifier._linkHandlerSettingInstance;
+    return Linkifier._linkHandlerSettingInstance;
   }
 
   /**
    * @param {string} title
-   * @param {!Components.Linkifier.LinkHandler} handler
+   * @param {!Linkifier.LinkHandler} handler
    */
   static registerLinkHandler(title, handler) {
-    Components.Linkifier._linkHandlers.set(title, handler);
-    self.runtime.sharedInstance(Components.Linkifier.LinkHandlerSettingUI)._update();
+    _linkHandlers.set(title, handler);
+    self.runtime.sharedInstance(LinkHandlerSettingUI)._update();
   }
 
   /**
    * @param {string} title
    */
   static unregisterLinkHandler(title) {
-    Components.Linkifier._linkHandlers.delete(title);
-    self.runtime.sharedInstance(Components.Linkifier.LinkHandlerSettingUI)._update();
+    _linkHandlers.delete(title);
+    self.runtime.sharedInstance(LinkHandlerSettingUI)._update();
   }
 
   /**
@@ -568,7 +567,7 @@ Components.Linkifier = class {
    * @return {?Workspace.UILocation}
    */
   static uiLocation(link) {
-    const info = Components.Linkifier._linkInfo(link);
+    const info = Linkifier._linkInfo(link);
     return info ? info.uiLocation : null;
   }
 
@@ -577,7 +576,7 @@ Components.Linkifier = class {
    * @return {!Array<{title: string, handler: function()}>}
    */
   static _linkActions(link) {
-    const info = Components.Linkifier._linkInfo(link);
+    const info = Linkifier._linkInfo(link);
     const result = [];
     if (!info) {
       return result;
@@ -608,14 +607,14 @@ Components.Linkifier = class {
     }
     if (contentProvider) {
       const lineNumber = uiLocation ? uiLocation.lineNumber : info.lineNumber || 0;
-      for (const title of Components.Linkifier._linkHandlers.keys()) {
-        const handler = Components.Linkifier._linkHandlers.get(title);
+      for (const title of _linkHandlers.keys()) {
+        const handler = _linkHandlers.get(title);
         const action = {
           section: 'reveal',
           title: Common.UIString('Open using %s', title),
           handler: handler.bind(null, contentProvider, lineNumber)
         };
-        if (title === Components.Linkifier._linkHandlerSetting().get()) {
+        if (title === Linkifier._linkHandlerSetting().get()) {
           result.unshift(action);
         } else {
           result.push(action);
@@ -636,74 +635,41 @@ Components.Linkifier = class {
     }
     return result;
   }
-};
+}
 
 /** @type {!Set<!Components.Linkifier>} */
-Components.Linkifier._instances = new Set();
-/** @type {?Components.LinkDecorator} */
-Components.Linkifier._decorator = null;
-
-Components.Linkifier._sourceCodeAnchors = Symbol('Linkifier.anchors');
-Components.Linkifier._infoSymbol = Symbol('Linkifier.info');
-Components.Linkifier._untruncatedNodeTextSymbol = Symbol('Linkifier.untruncatedNodeText');
+export const _instances = new Set();
 
-/**
- * @typedef {{
- *     icon: ?UI.Icon,
- *     enableDecorator: boolean,
- *     uiLocation: ?Workspace.UILocation,
- *     liveLocation: ?Bindings.LiveLocation,
- *     url: ?string,
- *     lineNumber: ?number,
- *     columnNumber: ?number,
- *     revealable: ?Object,
- *     fallback: ?Element
- * }}
- */
-Components._LinkInfo;
+/** @type {?LinkDecorator} */
+export let _decorator = null;
 
-/**
- * @typedef {{
- *     text: (string|undefined),
- *     className: (string|undefined),
- *     lineNumber: (number|undefined),
- *     columnNumber: (number|undefined),
- *     preventClick: (boolean|undefined),
- *     maxLength: (number|undefined)
- * }}
- */
-Components.LinkifyURLOptions;
+export const _sourceCodeAnchors = Symbol('Linkifier.anchors');
+export const _infoSymbol = Symbol('Linkifier.info');
+export const _untruncatedNodeTextSymbol = Symbol('Linkifier.untruncatedNodeText');
 
 /**
  * The maximum length before strings are considered too long for finding URLs.
  * @const
  * @type {number}
  */
-Components.Linkifier.MaxLengthToIgnoreLinkifier = 10000;
+export const MaxLengthToIgnoreLinkifier = 10000;
 
-/**
- * @typedef {function(!Common.ContentProvider, number)}
- */
-Components.Linkifier.LinkHandler;
-
-/** @type {!Map<string, !Components.Linkifier.LinkHandler>} */
-Components.Linkifier._linkHandlers = new Map();
+/** @type {!Map<string, !Linkifier.LinkHandler>} */
+export const _linkHandlers = new Map();
 
 /**
  * @extends {Common.EventTarget}
  * @interface
  */
-Components.LinkDecorator = function() {};
-
-Components.LinkDecorator.prototype = {
+export class LinkDecorator {
   /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @return {?UI.Icon}
    */
   linkIcon(uiSourceCode) {}
-};
+}
 
-Components.LinkDecorator.Events = {
+LinkDecorator.Events = {
   LinkIconChanged: Symbol('LinkIconChanged')
 };
 
@@ -711,7 +677,7 @@ Components.LinkDecorator.Events = {
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted
  */
-Components.Linkifier.LinkContextMenuProvider = class {
+export class LinkContextMenuProvider {
   /**
    * @override
    * @param {!Event} event
@@ -720,22 +686,22 @@ Components.Linkifier.LinkContextMenuProvider = class {
    */
   appendApplicableItems(event, contextMenu, target) {
     let targetNode = /** @type {!Node} */ (target);
-    while (targetNode && !targetNode[Components.Linkifier._infoSymbol]) {
+    while (targetNode && !targetNode[_infoSymbol]) {
       targetNode = targetNode.parentNodeOrShadowHost();
     }
     const link = /** @type {?Element} */ (targetNode);
-    const actions = Components.Linkifier._linkActions(link);
+    const actions = Linkifier._linkActions(link);
     for (const action of actions) {
       contextMenu.section(action.section).appendItem(action.title, action.handler);
     }
   }
-};
+}
 
 /**
  * @implements {UI.SettingUI}
  * @unrestricted
  */
-Components.Linkifier.LinkHandlerSettingUI = class {
+export class LinkHandlerSettingUI {
   constructor() {
     this._element = createElementWithClass('select', 'chrome-select');
     this._element.addEventListener('change', this._onChange.bind(this), false);
@@ -744,12 +710,12 @@ Components.Linkifier.LinkHandlerSettingUI = class {
 
   _update() {
     this._element.removeChildren();
-    const names = Components.Linkifier._linkHandlers.keysArray();
+    const names = _linkHandlers.keysArray();
     names.unshift(Common.UIString('auto'));
     for (const name of names) {
       const option = createElement('option');
       option.textContent = name;
-      option.selected = name === Components.Linkifier._linkHandlerSetting().get();
+      option.selected = name === Linkifier._linkHandlerSetting().get();
       this._element.appendChild(option);
     }
     this._element.disabled = names.length <= 1;
@@ -760,7 +726,7 @@ Components.Linkifier.LinkHandlerSettingUI = class {
    */
   _onChange(event) {
     const value = event.target.value;
-    Components.Linkifier._linkHandlerSetting().set(value);
+    Linkifier._linkHandlerSetting().set(value);
   }
 
   /**
@@ -770,13 +736,13 @@ Components.Linkifier.LinkHandlerSettingUI = class {
   settingElement() {
     return UI.SettingsUI.createCustomSetting(Common.UIString('Link handling:'), this._element);
   }
-};
+}
 
 /**
  * @implements {UI.ContextMenu.Provider}
  * @unrestricted
  */
-Components.Linkifier.ContentProviderContextMenuProvider = class {
+export class ContentProviderContextMenuProvider {
   /**
    * @override
    * @param {!Event} event
@@ -791,8 +757,8 @@ Components.Linkifier.ContentProviderContextMenuProvider = class {
 
     contextMenu.revealSection().appendItem(
         UI.openLinkExternallyLabel(), () => Host.InspectorFrontendHost.openInNewTab(contentProvider.contentURL()));
-    for (const title of Components.Linkifier._linkHandlers.keys()) {
-      const handler = Components.Linkifier._linkHandlers.get(title);
+    for (const title of _linkHandlers.keys()) {
+      const handler = _linkHandlers.get(title);
       contextMenu.revealSection().appendItem(
           Common.UIString('Open using %s', title), handler.bind(null, contentProvider, 0));
     }
@@ -803,4 +769,65 @@ Components.Linkifier.ContentProviderContextMenuProvider = class {
     contextMenu.clipboardSection().appendItem(
         UI.copyLinkAddressLabel(), () => Host.InspectorFrontendHost.copyText(contentProvider.contentURL()));
   }
-};
+}
+
+/* Legacy exported object */
+self.Components = self.Components || {};
+
+/* Legacy exported object */
+Components = Components || {};
+
+/** @constructor */
+Components.Linkifier = Linkifier;
+
+Components.Linkifier._instances = _instances;
+Components.Linkifier._decorator = _decorator;
+Components.Linkifier._sourceCodeAnchors = _sourceCodeAnchors;
+Components.Linkifier._infoSymbol = _infoSymbol;
+Components.Linkifier._untruncatedNodeTextSymbol = _untruncatedNodeTextSymbol;
+Components.Linkifier.MaxLengthToIgnoreLinkifier = MaxLengthToIgnoreLinkifier;
+Components.Linkifier._linkHandlers = _linkHandlers;
+
+/** @constructor */
+Components.Linkifier.LinkContextMenuProvider = LinkContextMenuProvider;
+
+/** @constructor */
+Components.Linkifier.LinkHandlerSettingUI = LinkHandlerSettingUI;
+
+/** @constructor */
+Components.Linkifier.ContentProviderContextMenuProvider = ContentProviderContextMenuProvider;
+
+/** @interface */
+Components.LinkDecorator = LinkDecorator;
+
+/**
+ * @typedef {{
+  *     icon: ?UI.Icon,
+  *     enableDecorator: boolean,
+  *     uiLocation: ?Workspace.UILocation,
+  *     liveLocation: ?Bindings.LiveLocation,
+  *     url: ?string,
+  *     lineNumber: ?number,
+  *     columnNumber: ?number,
+  *     revealable: ?Object,
+  *     fallback: ?Element
+  * }}
+  */
+Components._LinkInfo;
+
+/**
+  * @typedef {{
+  *     text: (string|undefined),
+  *     className: (string|undefined),
+  *     lineNumber: (number|undefined),
+  *     columnNumber: (number|undefined),
+  *     preventClick: (boolean|undefined),
+  *     maxLength: (number|undefined)
+  * }}
+  */
+Components.LinkifyURLOptions;
+
+/**
+ * @typedef {function(!Common.ContentProvider, number)}
+ */
+Components.Linkifier.LinkHandler;
\ No newline at end of file

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';