From 69d7770a9625702379f585c095000aaa4cfd2dff Mon Sep 17 00:00:00 2001
From: Paul Lewis <aerotwist@chromium.org>
Date: Wed, 25 Sep 2019 13:14:47 +0000
Subject: [PATCH] [DevTools]: Moves common to ES modules

This CL converts the contents of the common/ folder over to ES modules
from the current custom module system. It includes statements in each
file that will pollute the global namespace, allowing the non-ESM code
to continue working as before.

Bug: 1006759
Change-Id: Ib591e49155000381f85999a5da6c467ad0160996
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1816563
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#699728}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e064553334d4b0c925f0b1f0e2e0234be66b71be
---
 BUILD.gn                                      |  70 ++++--
 front_end/common/App.js                       |  23 ++
 front_end/common/AppProvider.js               |  23 ++
 front_end/common/CharacterIdMap.js            |  13 +-
 front_end/common/Color.js                     | 210 ++++++++++--------
 front_end/common/Console.js                   |  36 ++-
 front_end/common/ContentProvider.js           |  42 +++-
 front_end/common/EventTarget.js               |  77 +++++++
 front_end/common/JavaScriptMetaData.js        |  40 ++++
 front_end/common/Linkifier.js                 |  42 ++++
 front_end/common/ModuleExtensionInterfaces.js | 155 -------------
 front_end/common/Object.js                    |  67 +-----
 front_end/common/ParsedURL.js                 |  14 +-
 front_end/common/Progress.js                  |  60 +++--
 front_end/common/QueryParamHandler.js         |  23 ++
 front_end/common/ResourceType.js              | 161 ++++++++------
 front_end/common/Revealer.js                  |  60 +++++
 front_end/common/Runnable.js                  |  23 ++
 front_end/common/SegmentedRange.js            |  22 +-
 front_end/common/Settings.js                  |  82 +++++--
 front_end/common/StaticContentProvider.js     |  13 +-
 ...{OutputStream.js => StringOutputStream.js} |  28 ++-
 front_end/common/TextDictionary.js            |  10 +-
 front_end/common/Throttler.js                 |  11 +-
 front_end/common/Trie.js                      |  10 +-
 front_end/common/UIString.js                  |  44 ++--
 front_end/common/Worker.js                    |  13 +-
 front_end/common/common.js                    |  62 ++++++
 front_end/common/module.json                  |  20 +-
 front_end/heap_snapshot_worker.js             |   9 +-
 .../javascript_metadata/JavaScriptMetadata.js |   2 +-
 front_end/protocol/InspectorBackend.js        |   5 +-
 front_end/root.js                             |   1 +
 scripts/compile_frontend.py                   |   5 +-
 34 files changed, 970 insertions(+), 506 deletions(-)
 create mode 100644 front_end/common/App.js
 create mode 100644 front_end/common/AppProvider.js
 create mode 100644 front_end/common/EventTarget.js
 create mode 100644 front_end/common/JavaScriptMetaData.js
 create mode 100644 front_end/common/Linkifier.js
 delete mode 100644 front_end/common/ModuleExtensionInterfaces.js
 create mode 100644 front_end/common/QueryParamHandler.js
 create mode 100644 front_end/common/Revealer.js
 create mode 100644 front_end/common/Runnable.js
 rename front_end/common/{OutputStream.js => StringOutputStream.js} (64%)
 create mode 100644 front_end/common/common.js

diff --git a/BUILD.gn b/BUILD.gn
index c5386b705c..f95ebbf056 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -139,25 +139,7 @@ all_devtools_files = [
   "front_end/color_picker/module.json",
   "front_end/color_picker/spectrum.css",
   "front_end/color_picker/Spectrum.js",
-  "front_end/common/CharacterIdMap.js",
-  "front_end/common/Color.js",
-  "front_end/common/Console.js",
-  "front_end/common/ContentProvider.js",
   "front_end/common/module.json",
-  "front_end/common/ModuleExtensionInterfaces.js",
-  "front_end/common/Object.js",
-  "front_end/common/OutputStream.js",
-  "front_end/common/ParsedURL.js",
-  "front_end/common/Progress.js",
-  "front_end/common/ResourceType.js",
-  "front_end/common/SegmentedRange.js",
-  "front_end/common/Settings.js",
-  "front_end/common/StaticContentProvider.js",
-  "front_end/common/TextDictionary.js",
-  "front_end/common/Throttler.js",
-  "front_end/common/Trie.js",
-  "front_end/common/UIString.js",
-  "front_end/common/Worker.js",
   "front_end/components/DockController.js",
   "front_end/components/ImagePreview.js",
   "front_end/components/imagePreview.css",
@@ -961,6 +943,32 @@ all_devtools_modules = [
   "front_end/root.js",
   "front_end/ui/ARIAUtils.js",
   "front_end/ui/ui.js",
+  "front_end/common/common.js",
+  "front_end/common/App.js",
+  "front_end/common/AppProvider.js",
+  "front_end/common/CharacterIdMap.js",
+  "front_end/common/Color.js",
+  "front_end/common/ContentProvider.js",
+  "front_end/common/EventTarget.js",
+  "front_end/common/JavaScriptMetaData.js",
+  "front_end/common/Linkifier.js",
+  "front_end/common/Object.js",
+  "front_end/common/Console.js",
+  "front_end/common/ParsedURL.js",
+  "front_end/common/Progress.js",
+  "front_end/common/QueryParamHandler.js",
+  "front_end/common/ResourceType.js",
+  "front_end/common/Revealer.js",
+  "front_end/common/Runnable.js",
+  "front_end/common/SegmentedRange.js",
+  "front_end/common/Settings.js",
+  "front_end/common/StaticContentProvider.js",
+  "front_end/common/StringOutputStream.js",
+  "front_end/common/TextDictionary.js",
+  "front_end/common/Throttler.js",
+  "front_end/common/Trie.js",
+  "front_end/common/UIString.js",
+  "front_end/common/Worker.js",
 ]
 
 devtools_test_files = [
@@ -1158,6 +1166,32 @@ copied_devtools_modules = [
   "$resources_out_dir/root.js",
   "$resources_out_dir/ui/ARIAUtils.js",
   "$resources_out_dir/ui/ui.js",
+  "$resources_out_dir/common/common.js",
+  "$resources_out_dir/common/App.js",
+  "$resources_out_dir/common/AppProvider.js",
+  "$resources_out_dir/common/CharacterIdMap.js",
+  "$resources_out_dir/common/Color.js",
+  "$resources_out_dir/common/ContentProvider.js",
+  "$resources_out_dir/common/EventTarget.js",
+  "$resources_out_dir/common/JavaScriptMetaData.js",
+  "$resources_out_dir/common/Linkifier.js",
+  "$resources_out_dir/common/Object.js",
+  "$resources_out_dir/common/Console.js",
+  "$resources_out_dir/common/ParsedURL.js",
+  "$resources_out_dir/common/Progress.js",
+  "$resources_out_dir/common/QueryParamHandler.js",
+  "$resources_out_dir/common/ResourceType.js",
+  "$resources_out_dir/common/Revealer.js",
+  "$resources_out_dir/common/Runnable.js",
+  "$resources_out_dir/common/SegmentedRange.js",
+  "$resources_out_dir/common/Settings.js",
+  "$resources_out_dir/common/StaticContentProvider.js",
+  "$resources_out_dir/common/StringOutputStream.js",
+  "$resources_out_dir/common/TextDictionary.js",
+  "$resources_out_dir/common/Throttler.js",
+  "$resources_out_dir/common/Trie.js",
+  "$resources_out_dir/common/UIString.js",
+  "$resources_out_dir/common/Worker.js",
 ]
 
 generated_applications = [
diff --git a/front_end/common/App.js b/front_end/common/App.js
new file mode 100644
index 0000000000..f09920f495
--- /dev/null
+++ b/front_end/common/App.js
@@ -0,0 +1,23 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class App {
+  /**
+   * @param {!Document} document
+   */
+  presentUI(document) {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.App = App;
diff --git a/front_end/common/AppProvider.js b/front_end/common/AppProvider.js
new file mode 100644
index 0000000000..77c20ca174
--- /dev/null
+++ b/front_end/common/AppProvider.js
@@ -0,0 +1,23 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class AppProvider {
+  /**
+   * @return {!Common.App}
+   */
+  createApp() {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.AppProvider = AppProvider;
diff --git a/front_end/common/CharacterIdMap.js b/front_end/common/CharacterIdMap.js
index 627df761a2..5241062a4c 100644
--- a/front_end/common/CharacterIdMap.js
+++ b/front_end/common/CharacterIdMap.js
@@ -5,7 +5,7 @@
  * @template T
  * @unrestricted
  */
-Common.CharacterIdMap = class {
+export default class CharacterIdMap {
   constructor() {
     /** @type {!Map<T, string>} */
     this._elementToCharacter = new Map();
@@ -40,4 +40,13 @@ Common.CharacterIdMap = class {
       return null;
     return object;
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.CharacterIdMap = CharacterIdMap;
diff --git a/front_end/common/Color.js b/front_end/common/Color.js
index 1fa43f22e1..e45868c2ce 100644
--- a/front_end/common/Color.js
+++ b/front_end/common/Color.js
@@ -30,10 +30,10 @@
 /**
  * @unrestricted
  */
-Common.Color = class {
+export default class Color {
   /**
    * @param {!Array.<number>} rgba
-   * @param {!Common.Color.Format} format
+   * @param {!Format} format
    * @param {string=} originalText
    */
   constructor(rgba, format, originalText) {
@@ -58,7 +58,7 @@ Common.Color = class {
 
   /**
    * @param {string} text
-   * @return {?Common.Color}
+   * @return {?Color}
    */
   static parse(text) {
     // Simple - #hex, nickname
@@ -70,16 +70,16 @@ Common.Color = class {
         let hex = match[1].toLowerCase();
         let format;
         if (hex.length === 3) {
-          format = Common.Color.Format.ShortHEX;
+          format = Format.ShortHEX;
           hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
         } else if (hex.length === 4) {
-          format = Common.Color.Format.ShortHEXA;
+          format = Format.ShortHEXA;
           hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2) +
               hex.charAt(3) + hex.charAt(3);
         } else if (hex.length === 6) {
-          format = Common.Color.Format.HEX;
+          format = Format.HEX;
         } else {
-          format = Common.Color.Format.HEXA;
+          format = Format.HEXA;
         }
         const r = parseInt(hex.substring(0, 2), 16);
         const g = parseInt(hex.substring(2, 4), 16);
@@ -87,15 +87,15 @@ Common.Color = class {
         let a = 1;
         if (hex.length === 8)
           a = parseInt(hex.substring(6, 8), 16) / 255;
-        return new Common.Color([r / 255, g / 255, b / 255, a], format, text);
+        return new Color([r / 255, g / 255, b / 255, a], format, text);
       }
 
       if (match[2]) {  // nickname
         const nickname = match[2].toLowerCase();
-        if (nickname in Common.Color.Nicknames) {
-          const rgba = Common.Color.Nicknames[nickname];
-          const color = Common.Color.fromRGBA(rgba);
-          color._format = Common.Color.Format.Nickname;
+        if (nickname in Nicknames) {
+          const rgba = Nicknames[nickname];
+          const color = Color.fromRGBA(rgba);
+          color._format = Format.Nickname;
           color._originalText = text;
           return color;
         }
@@ -130,24 +130,24 @@ Common.Color = class {
 
       if (match[1]) {  // rgb/rgba
         const rgba = [
-          Common.Color._parseRgbNumeric(values[0]), Common.Color._parseRgbNumeric(values[1]),
-          Common.Color._parseRgbNumeric(values[2]), hasAlpha ? Common.Color._parseAlphaNumeric(values[3]) : 1
+          Color._parseRgbNumeric(values[0]), Color._parseRgbNumeric(values[1]), Color._parseRgbNumeric(values[2]),
+          hasAlpha ? Color._parseAlphaNumeric(values[3]) : 1
         ];
         if (rgba.indexOf(null) > -1)
           return null;
-        return new Common.Color(rgba, hasAlpha ? Common.Color.Format.RGBA : Common.Color.Format.RGB, text);
+        return new Color(rgba, hasAlpha ? Format.RGBA : Format.RGB, text);
       }
 
       if (match[2]) {  // hsl/hsla
         const hsla = [
-          Common.Color._parseHueNumeric(values[0]), Common.Color._parseSatLightNumeric(values[1]),
-          Common.Color._parseSatLightNumeric(values[2]), hasAlpha ? Common.Color._parseAlphaNumeric(values[3]) : 1
+          Color._parseHueNumeric(values[0]), Color._parseSatLightNumeric(values[1]),
+          Color._parseSatLightNumeric(values[2]), hasAlpha ? Color._parseAlphaNumeric(values[3]) : 1
         ];
         if (hsla.indexOf(null) > -1)
           return null;
         const rgba = [];
-        Common.Color.hsl2rgb(hsla, rgba);
-        return new Common.Color(rgba, hasAlpha ? Common.Color.Format.HSLA : Common.Color.Format.HSL, text);
+        Color.hsl2rgb(hsla, rgba);
+        return new Color(rgba, hasAlpha ? Format.HSLA : Format.HSL, text);
       }
     }
 
@@ -156,20 +156,20 @@ Common.Color = class {
 
   /**
    * @param {!Array.<number>} rgba
-   * @return {!Common.Color}
+   * @return {!Color}
    */
   static fromRGBA(rgba) {
-    return new Common.Color([rgba[0] / 255, rgba[1] / 255, rgba[2] / 255, rgba[3]], Common.Color.Format.RGBA);
+    return new Color([rgba[0] / 255, rgba[1] / 255, rgba[2] / 255, rgba[3]], Format.RGBA);
   }
 
   /**
    * @param {!Array.<number>} hsva
-   * @return {!Common.Color}
+   * @return {!Color}
    */
   static fromHSVA(hsva) {
     const rgba = [];
-    Common.Color.hsva2rgba(hsva, rgba);
-    return new Common.Color(rgba, Common.Color.Format.HSLA);
+    Color.hsva2rgba(hsva, rgba);
+    return new Color(rgba, Format.HSLA);
   }
 
   /**
@@ -194,7 +194,7 @@ Common.Color = class {
    * return {number}
    */
   static _parseRgbNumeric(value) {
-    const parsed = Common.Color._parsePercentOrNumber(value);
+    const parsed = Color._parsePercentOrNumber(value);
     if (parsed === null)
       return null;
 
@@ -238,7 +238,7 @@ Common.Color = class {
    * return {number}
    */
   static _parseAlphaNumeric(value) {
-    return Common.Color._parsePercentOrNumber(value);
+    return Color._parsePercentOrNumber(value);
   }
 
   /**
@@ -313,11 +313,11 @@ Common.Color = class {
    * @param {!Array<number>} out_rgba
    */
   static hsva2rgba(hsva, out_rgba) {
-    Common.Color._hsva2hsla(hsva, Common.Color.hsva2rgba._tmpHSLA);
-    Common.Color.hsl2rgb(Common.Color.hsva2rgba._tmpHSLA, out_rgba);
+    Color._hsva2hsla(hsva, Color.hsva2rgba._tmpHSLA);
+    Color.hsl2rgb(Color.hsva2rgba._tmpHSLA, out_rgba);
 
-    for (let i = 0; i < Common.Color.hsva2rgba._tmpHSLA.length; i++)
-      Common.Color.hsva2rgba._tmpHSLA[i] = 0;
+    for (let i = 0; i < Color.hsva2rgba._tmpHSLA.length; i++)
+      Color.hsva2rgba._tmpHSLA[i] = 0;
   }
 
   /**
@@ -362,14 +362,14 @@ Common.Color = class {
    * @return {number}
    */
   static calculateContrastRatio(fgRGBA, bgRGBA) {
-    Common.Color.blendColors(fgRGBA, bgRGBA, Common.Color.calculateContrastRatio._blendedFg);
+    Color.blendColors(fgRGBA, bgRGBA, Color.calculateContrastRatio._blendedFg);
 
-    const fgLuminance = Common.Color.luminance(Common.Color.calculateContrastRatio._blendedFg);
-    const bgLuminance = Common.Color.luminance(bgRGBA);
+    const fgLuminance = Color.luminance(Color.calculateContrastRatio._blendedFg);
+    const bgLuminance = Color.luminance(bgRGBA);
     const contrastRatio = (Math.max(fgLuminance, bgLuminance) + 0.05) / (Math.min(fgLuminance, bgLuminance) + 0.05);
 
-    for (let i = 0; i < Common.Color.calculateContrastRatio._blendedFg.length; i++)
-      Common.Color.calculateContrastRatio._blendedFg[i] = 0;
+    for (let i = 0; i < Color.calculateContrastRatio._blendedFg.length; i++)
+      Color.calculateContrastRatio._blendedFg[i] = 0;
 
     return contrastRatio;
   }
@@ -401,11 +401,11 @@ Common.Color = class {
   }
 
   /**
-   * @param {!Common.Color} color
-   * @return {!Common.Color.Format}
+   * @param {!Color} color
+   * @return {!Format}
    */
   static detectColorFormat(color) {
-    const cf = Common.Color.Format;
+    const cf = Format;
     let format;
     const formatSetting = Common.moduleSetting('colorFormat').get();
     if (formatSetting === cf.Original)
@@ -423,7 +423,7 @@ Common.Color = class {
   }
 
   /**
-   * @return {!Common.Color.Format}
+   * @return {!Format}
    */
   format() {
     return this._format;
@@ -498,7 +498,7 @@ Common.Color = class {
   }
 
   /**
-   * @return {!Common.Color.Format}
+   * @return {!Format}
    */
   detectHEXFormat() {
     let canBeShort = true;
@@ -511,7 +511,7 @@ Common.Color = class {
     }
 
     const hasAlpha = this.hasAlpha();
-    const cf = Common.Color.Format;
+    const cf = Format;
     if (canBeShort)
       return hasAlpha ? cf.ShortHEXA : cf.ShortHEX;
     return hasAlpha ? cf.HEXA : cf.HEX;
@@ -553,60 +553,60 @@ Common.Color = class {
     }
 
     switch (format) {
-      case Common.Color.Format.Original:
+      case Format.Original:
         return this._originalText;
-      case Common.Color.Format.RGB:
+      case Format.RGB:
         if (this.hasAlpha())
           return null;
         return String.sprintf(
             'rgb(%d, %d, %d)', toRgbValue(this._rgba[0]), toRgbValue(this._rgba[1]), toRgbValue(this._rgba[2]));
-      case Common.Color.Format.RGBA:
+      case Format.RGBA:
         return String.sprintf(
             'rgba(%d, %d, %d, %f)', toRgbValue(this._rgba[0]), toRgbValue(this._rgba[1]), toRgbValue(this._rgba[2]),
             this._rgba[3]);
-      case Common.Color.Format.HSL:
+      case Format.HSL:
         if (this.hasAlpha())
           return null;
         const hsl = this.hsla();
         return String.sprintf(
             'hsl(%d, %d%, %d%)', Math.round(hsl[0] * 360), Math.round(hsl[1] * 100), Math.round(hsl[2] * 100));
-      case Common.Color.Format.HSLA:
+      case Format.HSLA:
         const hsla = this.hsla();
         return String.sprintf(
             'hsla(%d, %d%, %d%, %f)', Math.round(hsla[0] * 360), Math.round(hsla[1] * 100), Math.round(hsla[2] * 100),
             hsla[3]);
-      case Common.Color.Format.HEXA:
+      case Format.HEXA:
         return String
             .sprintf(
                 '#%s%s%s%s', toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2]),
                 toHexValue(this._rgba[3]))
             .toLowerCase();
-      case Common.Color.Format.HEX:
+      case Format.HEX:
         if (this.hasAlpha())
           return null;
         return String
             .sprintf('#%s%s%s', toHexValue(this._rgba[0]), toHexValue(this._rgba[1]), toHexValue(this._rgba[2]))
             .toLowerCase();
-      case Common.Color.Format.ShortHEXA:
+      case Format.ShortHEXA:
         const hexFormat = this.detectHEXFormat();
-        if (hexFormat !== Common.Color.Format.ShortHEXA && hexFormat !== Common.Color.Format.ShortHEX)
+        if (hexFormat !== Format.ShortHEXA && hexFormat !== Format.ShortHEX)
           return null;
         return String
             .sprintf(
                 '#%s%s%s%s', toShortHexValue(this._rgba[0]), toShortHexValue(this._rgba[1]),
                 toShortHexValue(this._rgba[2]), toShortHexValue(this._rgba[3]))
             .toLowerCase();
-      case Common.Color.Format.ShortHEX:
+      case Format.ShortHEX:
         if (this.hasAlpha())
           return null;
-        if (this.detectHEXFormat() !== Common.Color.Format.ShortHEX)
+        if (this.detectHEXFormat() !== Format.ShortHEX)
           return null;
         return String
             .sprintf(
                 '#%s%s%s', toShortHexValue(this._rgba[0]), toShortHexValue(this._rgba[1]),
                 toShortHexValue(this._rgba[2]))
             .toLowerCase();
-      case Common.Color.Format.Nickname:
+      case Format.Nickname:
         return this.nickname();
     }
 
@@ -635,17 +635,17 @@ Common.Color = class {
    * @return {?string} nickname
    */
   nickname() {
-    if (!Common.Color._rgbaToNickname) {
-      Common.Color._rgbaToNickname = {};
-      for (const nickname in Common.Color.Nicknames) {
-        let rgba = Common.Color.Nicknames[nickname];
+    if (!Color._rgbaToNickname) {
+      Color._rgbaToNickname = {};
+      for (const nickname in Nicknames) {
+        let rgba = Nicknames[nickname];
         if (rgba.length !== 4)
           rgba = rgba.concat(1);
-        Common.Color._rgbaToNickname[rgba] = nickname;
+        Color._rgbaToNickname[rgba] = nickname;
       }
     }
 
-    return Common.Color._rgbaToNickname[this.canonicalRGBA()] || null;
+    return Color._rgbaToNickname[this.canonicalRGBA()] || null;
   }
 
   /**
@@ -660,7 +660,7 @@ Common.Color = class {
   }
 
   /**
-   * @return {!Common.Color}
+   * @return {!Color}
    */
   invert() {
     const rgba = [];
@@ -668,37 +668,37 @@ Common.Color = class {
     rgba[1] = 1 - this._rgba[1];
     rgba[2] = 1 - this._rgba[2];
     rgba[3] = this._rgba[3];
-    return new Common.Color(rgba, Common.Color.Format.RGBA);
+    return new Color(rgba, Format.RGBA);
   }
 
   /**
    * @param {number} alpha
-   * @return {!Common.Color}
+   * @return {!Color}
    */
   setAlpha(alpha) {
     const rgba = this._rgba.slice();
     rgba[3] = alpha;
-    return new Common.Color(rgba, Common.Color.Format.RGBA);
+    return new Color(rgba, Format.RGBA);
   }
 
   /**
-   * @param {!Common.Color} fgColor
-   * @return {!Common.Color}
+   * @param {!Color} fgColor
+   * @return {!Color}
    */
   blendWith(fgColor) {
     const rgba = [];
-    Common.Color.blendColors(fgColor._rgba, this._rgba, rgba);
-    return new Common.Color(rgba, Common.Color.Format.RGBA);
+    Color.blendColors(fgColor._rgba, this._rgba, rgba);
+    return new Color(rgba, Format.RGBA);
   }
-};
+}
 
 /** @type {!RegExp} */
-Common.Color.Regex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
+export const Regex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
 
 /**
  * @enum {string}
  */
-Common.Color.Format = {
+export const Format = {
   Original: 'original',
   Nickname: 'nickname',
   HEX: 'hex',
@@ -711,15 +711,7 @@ Common.Color.Format = {
   HSLA: 'hsla'
 };
 
-
-/** @type {!Array<number>} */
-Common.Color.hsva2rgba._tmpHSLA = [0, 0, 0, 0];
-
-
-Common.Color.calculateContrastRatio._blendedFg = [0, 0, 0, 0];
-
-
-Common.Color.Nicknames = {
+export const Nicknames = {
   'aliceblue': [240, 248, 255],
   'antiquewhite': [250, 235, 215],
   'aqua': [0, 255, 255],
@@ -871,23 +863,23 @@ Common.Color.Nicknames = {
   'transparent': [0, 0, 0, 0],
 };
 
-Common.Color.PageHighlight = {
-  Content: Common.Color.fromRGBA([111, 168, 220, .66]),
-  ContentLight: Common.Color.fromRGBA([111, 168, 220, .5]),
-  ContentOutline: Common.Color.fromRGBA([9, 83, 148]),
-  Padding: Common.Color.fromRGBA([147, 196, 125, .55]),
-  PaddingLight: Common.Color.fromRGBA([147, 196, 125, .4]),
-  Border: Common.Color.fromRGBA([255, 229, 153, .66]),
-  BorderLight: Common.Color.fromRGBA([255, 229, 153, .5]),
-  Margin: Common.Color.fromRGBA([246, 178, 107, .66]),
-  MarginLight: Common.Color.fromRGBA([246, 178, 107, .5]),
-  EventTarget: Common.Color.fromRGBA([255, 196, 196, .66]),
-  Shape: Common.Color.fromRGBA([96, 82, 177, 0.8]),
-  ShapeMargin: Common.Color.fromRGBA([96, 82, 127, .6]),
-  CssGrid: Common.Color.fromRGBA([0x4b, 0, 0x82, 1])
+export const PageHighlight = {
+  Content: Color.fromRGBA([111, 168, 220, .66]),
+  ContentLight: Color.fromRGBA([111, 168, 220, .5]),
+  ContentOutline: Color.fromRGBA([9, 83, 148]),
+  Padding: Color.fromRGBA([147, 196, 125, .55]),
+  PaddingLight: Color.fromRGBA([147, 196, 125, .4]),
+  Border: Color.fromRGBA([255, 229, 153, .66]),
+  BorderLight: Color.fromRGBA([255, 229, 153, .5]),
+  Margin: Color.fromRGBA([246, 178, 107, .66]),
+  MarginLight: Color.fromRGBA([246, 178, 107, .5]),
+  EventTarget: Color.fromRGBA([255, 196, 196, .66]),
+  Shape: Color.fromRGBA([96, 82, 177, 0.8]),
+  ShapeMargin: Color.fromRGBA([96, 82, 127, .6]),
+  CssGrid: Color.fromRGBA([0x4b, 0, 0x82, 1])
 };
 
-Common.Color.Generator = class {
+export class Generator {
   /**
    * @param {!{min: number, max: number}|number=} hueSpace
    * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace
@@ -949,4 +941,32 @@ Common.Color.Generator = class {
     index %= count;
     return space.min + Math.floor(index / (count - 1) * (space.max - space.min));
   }
-};
+}
+
+/** @type {!Array<number>} */
+Color.hsva2rgba._tmpHSLA = [0, 0, 0, 0];
+
+Color.calculateContrastRatio._blendedFg = [0, 0, 0, 0];
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.Color = Color;
+
+Common.Color.Regex = Regex;
+
+/**
+ * @enum {string}
+ */
+Common.Color.Format = Format;
+Common.Color.Nicknames = Nicknames;
+Common.Color.PageHighlight = PageHighlight;
+
+/**
+ * @constructor
+ */
+Common.Color.Generator = Generator;
diff --git a/front_end/common/Console.js b/front_end/common/Console.js
index 71350cb17c..96955279f0 100644
--- a/front_end/common/Console.js
+++ b/front_end/common/Console.js
@@ -4,7 +4,7 @@
 /**
  * @unrestricted
  */
-Common.Console = class extends Common.Object {
+export default class Console extends Common.Object {
   constructor() {
     super();
     /** @type {!Array.<!Common.Console.Message>} */
@@ -61,17 +61,17 @@ Common.Console = class extends Common.Object {
   showPromise() {
     return Common.Revealer.reveal(this);
   }
-};
+}
 
 /** @enum {symbol} */
-Common.Console.Events = {
+export const Events = {
   MessageAdded: Symbol('messageAdded')
 };
 
 /**
  * @enum {string}
  */
-Common.Console.MessageLevel = {
+export const MessageLevel = {
   Info: 'info',
   Warning: 'warning',
   Error: 'error'
@@ -80,7 +80,7 @@ Common.Console.MessageLevel = {
 /**
  * @unrestricted
  */
-Common.Console.Message = class {
+export class Message {
   /**
    * @param {string} text
    * @param {!Common.Console.MessageLevel} level
@@ -93,6 +93,28 @@ Common.Console.Message = class {
     this.timestamp = (typeof timestamp === 'number') ? timestamp : Date.now();
     this.show = show;
   }
-};
+}
 
-Common.console = new Common.Console();
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+Common.console = new Console();
+
+/**
+ * @constructor
+ */
+Common.Console = Console;
+
+/** @enum {symbol} */
+Common.Console.Events = Events;
+
+/**
+ * @enum {string}
+ */
+Common.Console.MessageLevel = MessageLevel;
+
+/**
+ * @constructor
+ */
+Common.Console.Message = Message;
diff --git a/front_end/common/ContentProvider.js b/front_end/common/ContentProvider.js
index 349adfe104..adb72086b7 100644
--- a/front_end/common/ContentProvider.js
+++ b/front_end/common/ContentProvider.js
@@ -30,28 +30,30 @@
 /**
  * @interface
  */
-Common.ContentProvider = function() {};
-
-Common.ContentProvider.prototype = {
+export default class ContentProvider {
   /**
    * @return {string}
    */
-  contentURL() {},
+  contentURL() {
+  }
 
   /**
    * @return {!Common.ResourceType}
    */
-  contentType() {},
+  contentType() {
+  }
 
   /**
    * @return {!Promise<boolean>}
    */
-  contentEncoded() {},
+  contentEncoded() {
+  }
 
   /**
    * @return {!Promise<string>}
    */
-  requestContent() {},
+  requestContent() {
+  }
 
   /**
    * @param {string} query
@@ -60,12 +62,12 @@ Common.ContentProvider.prototype = {
    * @return {!Promise<!Array<!Common.ContentProvider.SearchMatch>>}
    */
   searchInContent(query, caseSensitive, isRegex) {}
-};
+}
 
 /**
  * @unrestricted
  */
-Common.ContentProvider.SearchMatch = class {
+export class SearchMatch {
   /**
    * @param {number} lineNumber
    * @param {string} lineContent
@@ -74,7 +76,7 @@ Common.ContentProvider.SearchMatch = class {
     this.lineNumber = lineNumber;
     this.lineContent = lineContent;
   }
-};
+}
 
 /**
  * @param {string} content
@@ -83,7 +85,7 @@ Common.ContentProvider.SearchMatch = class {
  * @param {boolean} isRegex
  * @return {!Array.<!Common.ContentProvider.SearchMatch>}
  */
-Common.ContentProvider.performSearchInContent = function(content, query, caseSensitive, isRegex) {
+export const performSearchInContent = function(content, query, caseSensitive, isRegex) {
   const regex = createSearchRegex(query, caseSensitive, isRegex);
 
   const text = new TextUtils.Text(content);
@@ -104,7 +106,7 @@ Common.ContentProvider.performSearchInContent = function(content, query, caseSen
  * @param {?string=} charset
  * @return {?string}
  */
-Common.ContentProvider.contentAsDataURL = function(content, mimeType, contentEncoded, charset) {
+export const contentAsDataURL = function(content, mimeType, contentEncoded, charset) {
   const maxDataUrlSize = 1024 * 1024;
   if (content === null || content.length > maxDataUrlSize)
     return null;
@@ -112,3 +114,19 @@ Common.ContentProvider.contentAsDataURL = function(content, mimeType, contentEnc
   return 'data:' + mimeType + (charset ? ';charset=' + charset : '') + (contentEncoded ? ';base64' : '') + ',' +
       content;
 };
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.ContentProvider = ContentProvider;
+
+/**
+ * @constructor
+ */
+Common.ContentProvider.SearchMatch = SearchMatch;
+Common.ContentProvider.performSearchInContent = performSearchInContent;
+Common.ContentProvider.contentAsDataURL = contentAsDataURL;
diff --git a/front_end/common/EventTarget.js b/front_end/common/EventTarget.js
new file mode 100644
index 0000000000..61f471982a
--- /dev/null
+++ b/front_end/common/EventTarget.js
@@ -0,0 +1,77 @@
+// 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.
+
+/**
+ * @param {!Array<!Common.EventTarget.EventDescriptor>} eventList
+ */
+export function removeEventListeners(eventList) {
+  for (const eventInfo of eventList)
+    eventInfo.eventTarget.removeEventListener(eventInfo.eventType, eventInfo.listener, eventInfo.thisObject);
+  // Do not hold references on unused event descriptors.
+  eventList.splice(0);
+}
+
+/**
+ * @interface
+ */
+export default class EventTarget {
+  /**
+   * @param {symbol} eventType
+   * @param {function(!Common.Event)} listener
+   * @param {!Object=} thisObject
+   * @return {!Common.EventTarget.EventDescriptor}
+   */
+  addEventListener(eventType, listener, thisObject) {
+  }
+
+  /**
+   * @param {symbol} eventType
+   * @return {!Promise<*>}
+   */
+  once(eventType) {
+  }
+
+  /**
+   * @param {string|symbol} eventType
+   * @param {function(!Common.Event)} listener
+   * @param {!Object=} thisObject
+   */
+  removeEventListener(eventType, listener, thisObject) {
+  }
+
+  /**
+   * @param {symbol} eventType
+   * @return {boolean}
+   */
+  hasEventListeners(eventType) {
+  }
+
+  /**
+   * @param {symbol} eventType
+   * @param {*=} eventData
+   */
+  dispatchEventToListeners(eventType, eventData) {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @typedef {!{data: *}}
+ */
+Common.Event;
+
+/**
+ * @interface
+ */
+Common.EventTarget = EventTarget;
+
+EventTarget.removeEventListeners = removeEventListeners;
+
+/**
+ * @typedef {!{eventTarget: !Common.EventTarget, eventType: (string|symbol), thisObject: (!Object|undefined), listener: function(!Common.Event)}}
+ */
+Common.EventTarget.EventDescriptor;
diff --git a/front_end/common/JavaScriptMetaData.js b/front_end/common/JavaScriptMetaData.js
new file mode 100644
index 0000000000..9e3eda8326
--- /dev/null
+++ b/front_end/common/JavaScriptMetaData.js
@@ -0,0 +1,40 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class JavaScriptMetadata {
+  /**
+   * @param {string} name
+   * @return {?Array<!Array<string>>}
+   */
+  signaturesForNativeFunction(name) {
+  }
+
+  /**
+   * @param {string} name
+   * @param {string} receiverClassName
+   * @return {?Array<!Array<string>>}
+   */
+  signaturesForInstanceMethod(name, receiverClassName) {
+  }
+
+  /**
+   * @param {string} name
+   * @param {string} receiverConstructorName
+   * @return {?Array<!Array<string>>}
+   */
+  signaturesForStaticMethod(name, receiverConstructorName) {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.JavaScriptMetadata = JavaScriptMetadata;
diff --git a/front_end/common/Linkifier.js b/front_end/common/Linkifier.js
new file mode 100644
index 0000000000..14c161b901
--- /dev/null
+++ b/front_end/common/Linkifier.js
@@ -0,0 +1,42 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class Linkifier {
+  /**
+   * @param {!Object} object
+   * @param {!Common.Linkifier.Options=} options
+   * @return {!Node}
+   */
+  linkify(object, options) {
+  }
+}
+
+/**
+ * @param {?Object} object
+ * @param {!Common.Linkifier.Options=} options
+ * @return {!Promise<!Node>}
+ */
+export function linkify(object, options) {
+  if (!object)
+    return Promise.reject(new Error('Can\'t linkify ' + object));
+  return self.runtime.extension(Common.Linkifier, object)
+      .instance()
+      .then(linkifier => linkifier.linkify(object, options));
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.Linkifier = Linkifier;
+Common.Linkifier.linkify = linkify;
+
+/** @typedef {{tooltip: (string|undefined), preventKeyboardFocus: (boolean|undefined)}} */
+Common.Linkifier.Options;
diff --git a/front_end/common/ModuleExtensionInterfaces.js b/front_end/common/ModuleExtensionInterfaces.js
deleted file mode 100644
index 5120202ea3..0000000000
--- a/front_end/common/ModuleExtensionInterfaces.js
+++ /dev/null
@@ -1,155 +0,0 @@
-// Copyright 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.
-
-/**
- * @interface
- */
-Common.Revealer = function() {};
-
-/**
- * @param {?Object} revealable
- * @param {boolean=} omitFocus
- * @return {!Promise.<undefined>}
- */
-Common.Revealer.reveal = function(revealable, omitFocus) {
-  if (!revealable)
-    return Promise.reject(new Error('Can\'t reveal ' + revealable));
-  return self.runtime.allInstances(Common.Revealer, revealable).then(reveal);
-
-  /**
-   * @param {!Array.<!Common.Revealer>} revealers
-   * @return {!Promise.<undefined>}
-   */
-  function reveal(revealers) {
-    const promises = [];
-    for (let i = 0; i < revealers.length; ++i)
-      promises.push(revealers[i].reveal(/** @type {!Object} */ (revealable), omitFocus));
-    return Promise.race(promises);
-  }
-};
-
-/**
- * @param {?Object} revealable
- * @return {?string}
- */
-Common.Revealer.revealDestination = function(revealable) {
-  const extension = self.runtime.extension(Common.Revealer, revealable);
-  if (!extension)
-    return null;
-  return extension.descriptor()['destination'];
-};
-
-Common.Revealer.prototype = {
-  /**
-   * @param {!Object} object
-   * @param {boolean=} omitFocus
-   * @return {!Promise}
-   */
-  reveal(object, omitFocus) {}
-};
-
-/**
- * @interface
- */
-Common.App = function() {};
-
-Common.App.prototype = {
-  /**
-   * @param {!Document} document
-   */
-  presentUI(document) {}
-};
-
-/**
- * @interface
- */
-Common.AppProvider = function() {};
-
-Common.AppProvider.prototype = {
-  /**
-   * @return {!Common.App}
-   */
-  createApp() {}
-};
-
-/**
- * @interface
- */
-Common.QueryParamHandler = function() {};
-
-Common.QueryParamHandler.prototype = {
-  /**
-   * @param {string} value
-   */
-  handleQueryParam(value) {}
-};
-
-/**
- * @interface
- */
-Common.Runnable = function() {};
-
-Common.Runnable.prototype = {
-  /**
-   * @return {!Promise}
-   */
-  run() {}
-};
-
-/**
- * @interface
- */
-Common.Linkifier = function() {};
-
-Common.Linkifier.prototype = {
-  /**
-   * @param {!Object} object
-   * @param {!Common.Linkifier.Options=} options
-   * @return {!Node}
-   */
-  linkify(object, options) {}
-};
-
-/**
- * @param {?Object} object
- * @param {!Common.Linkifier.Options=} options
- * @return {!Promise<!Node>}
- */
-Common.Linkifier.linkify = function(object, options) {
-  if (!object)
-    return Promise.reject(new Error('Can\'t linkify ' + object));
-  return self.runtime.extension(Common.Linkifier, object)
-      .instance()
-      .then(linkifier => linkifier.linkify(object, options));
-};
-
-/** @typedef {{tooltip: (string|undefined), preventKeyboardFocus: (boolean|undefined)}} */
-Common.Linkifier.Options;
-
-/**
- * @interface
- */
-Common.JavaScriptMetadata = function() {};
-Common.JavaScriptMetadata.prototype = {
-
-  /**
-   * @param {string} name
-   * @return {?Array<!Array<string>>}
-   */
-  signaturesForNativeFunction(name) {},
-
-  /**
-   * @param {string} name
-   * @param {string} receiverClassName
-   * @return {?Array<!Array<string>>}
-   */
-  signaturesForInstanceMethod(name, receiverClassName) {},
-
-  /**
-   * @param {string} name
-   * @param {string} receiverConstructorName
-   * @return {?Array<!Array<string>>}
-   */
-  signaturesForStaticMethod(name, receiverConstructorName) {}
-};
diff --git a/front_end/common/Object.js b/front_end/common/Object.js
index 9f5e522499..fa618cbcae 100644
--- a/front_end/common/Object.js
+++ b/front_end/common/Object.js
@@ -27,7 +27,7 @@
  * @implements {Common.EventTarget}
  * @unrestricted
  */
-Common.Object = class {
+export default class ObjectWrapper {
   constructor() {
     /** @type {(!Map<string|symbol, !Array<!Common.Object._listenerCallbackTuple>>|undefined)} */
     this._listeners;
@@ -115,69 +115,18 @@ Common.Object = class {
         listeners[i].listener.call(listeners[i].thisObject, event);
     }
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
 
 /**
- * @typedef {!{data: *}}
+ * @constructor
  */
-Common.Event;
+Common.Object = ObjectWrapper;
 
 /**
  * @typedef {!{thisObject: (!Object|undefined), listener: function(!Common.Event), disposed: (boolean|undefined)}}
  */
 Common.Object._listenerCallbackTuple;
-
-/**
- * @interface
- */
-Common.EventTarget = function() {};
-
-/**
- * @typedef {!{eventTarget: !Common.EventTarget, eventType: (string|symbol), thisObject: (!Object|undefined), listener: function(!Common.Event)}}
- */
-Common.EventTarget.EventDescriptor;
-
-/**
- * @param {!Array<!Common.EventTarget.EventDescriptor>} eventList
- */
-Common.EventTarget.removeEventListeners = function(eventList) {
-  for (const eventInfo of eventList)
-    eventInfo.eventTarget.removeEventListener(eventInfo.eventType, eventInfo.listener, eventInfo.thisObject);
-  // Do not hold references on unused event descriptors.
-  eventList.splice(0);
-};
-
-Common.EventTarget.prototype = {
-  /**
-   * @param {symbol} eventType
-   * @param {function(!Common.Event)} listener
-   * @param {!Object=} thisObject
-   * @return {!Common.EventTarget.EventDescriptor}
-   */
-  addEventListener(eventType, listener, thisObject) {},
-
-  /**
-   * @param {symbol} eventType
-   * @return {!Promise<*>}
-   */
-  once(eventType) {},
-
-  /**
-   * @param {string|symbol} eventType
-   * @param {function(!Common.Event)} listener
-   * @param {!Object=} thisObject
-   */
-  removeEventListener(eventType, listener, thisObject) {},
-
-  /**
-   * @param {symbol} eventType
-   * @return {boolean}
-   */
-  hasEventListeners(eventType) {},
-
-  /**
-   * @param {symbol} eventType
-   * @param {*=} eventData
-   */
-  dispatchEventToListeners(eventType, eventData) {},
-};
diff --git a/front_end/common/ParsedURL.js b/front_end/common/ParsedURL.js
index 9bdc469250..26deddeac6 100644
--- a/front_end/common/ParsedURL.js
+++ b/front_end/common/ParsedURL.js
@@ -29,7 +29,7 @@
 /**
  * @unrestricted
  */
-Common.ParsedURL = class {
+export default class ParsedURL {
   /**
    * @param {string} url
    */
@@ -388,8 +388,7 @@ Common.ParsedURL = class {
       return this.url.substring(this.scheme.length + 3);
     return this.url;
   }
-};
-
+}
 
 /**
  * @return {?Common.ParsedURL}
@@ -400,3 +399,12 @@ String.prototype.asParsedURL = function() {
     return parsedURL;
   return null;
 };
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.ParsedURL = ParsedURL;
diff --git a/front_end/common/Progress.js b/front_end/common/Progress.js
index 669ecf08dd..2f24102209 100644
--- a/front_end/common/Progress.js
+++ b/front_end/common/Progress.js
@@ -27,47 +27,51 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
+
 /**
  * @interface
  */
-Common.Progress = function() {};
-
-Common.Progress.prototype = {
+export default class Progress {
   /**
    * @param {number} totalWork
    */
-  setTotalWork(totalWork) {},
+  setTotalWork(totalWork) {
+  }
 
   /**
    * @param {string} title
    */
-  setTitle(title) {},
+  setTitle(title) {
+  }
 
   /**
    * @param {number} worked
    * @param {string=} title
    */
-  setWorked(worked, title) {},
+  setWorked(worked, title) {
+  }
 
   /**
    * @param {number=} worked
    */
-  worked(worked) {},
+  worked(worked) {
+  }
 
-  done() {},
+  done() {
+  }
 
   /**
    * @return {boolean}
    */
   isCanceled() {
     return false;
-  },
-};
+  }
+}
 
 /**
  * @unrestricted
  */
-Common.CompositeProgress = class {
+export class CompositeProgress {
   /**
    * @param {!Common.Progress} parent
    */
@@ -107,13 +111,13 @@ Common.CompositeProgress = class {
     }
     this._parent.setWorked(done / totalWeights);
   }
-};
+}
 
 /**
  * @implements {Common.Progress}
  * @unrestricted
  */
-Common.SubProgress = class {
+export class SubProgress {
   /**
    * @param {!Common.CompositeProgress} composite
    * @param {number=} weight
@@ -176,13 +180,13 @@ Common.SubProgress = class {
   worked(worked) {
     this.setWorked(this._worked + (worked || 1));
   }
-};
+}
 
 /**
  * @implements {Common.Progress}
  * @unrestricted
  */
-Common.ProgressProxy = class {
+export class ProgressProxy {
   /**
    * @param {?Common.Progress} delegate
    * @param {function()=} doneCallback
@@ -246,4 +250,28 @@ Common.ProgressProxy = class {
     if (this._delegate)
       this._delegate.worked(worked);
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.Progress = Progress;
+
+/**
+ * @constructor
+ */
+Common.CompositeProgress = CompositeProgress;
+
+/**
+ * @constructor
+ */
+Common.SubProgress = SubProgress;
+
+/**
+ * @constructor
+ */
+Common.ProgressProxy = ProgressProxy;
diff --git a/front_end/common/QueryParamHandler.js b/front_end/common/QueryParamHandler.js
new file mode 100644
index 0000000000..60a1036ec6
--- /dev/null
+++ b/front_end/common/QueryParamHandler.js
@@ -0,0 +1,23 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class QueryParamHandler {
+  /**
+   * @param {string} value
+   */
+  handleQueryParam(value) {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.QueryParamHandler = QueryParamHandler;
diff --git a/front_end/common/ResourceType.js b/front_end/common/ResourceType.js
index 5a69005ee4..068df21f8e 100644
--- a/front_end/common/ResourceType.js
+++ b/front_end/common/ResourceType.js
@@ -30,11 +30,11 @@
 /**
  * @unrestricted
  */
-Common.ResourceType = class {
+export default class ResourceType {
   /**
    * @param {string} name
    * @param {string} title
-   * @param {!Common.ResourceCategory} category
+   * @param {!ResourceCategory} category
    * @param {boolean} isTextType
    */
   constructor(name, title, category, isTextType) {
@@ -46,45 +46,45 @@ Common.ResourceType = class {
 
   /**
    * @param {string} mimeType
-   * @return {!Common.ResourceType}
+   * @return {!ResourceType}
    */
   static fromMimeType(mimeType) {
     if (mimeType.startsWith('text/html'))
-      return Common.resourceTypes.Document;
+      return resourceTypes.Document;
     if (mimeType.startsWith('text/css'))
-      return Common.resourceTypes.Stylesheet;
+      return resourceTypes.Stylesheet;
     if (mimeType.startsWith('image/'))
-      return Common.resourceTypes.Image;
+      return resourceTypes.Image;
     if (mimeType.startsWith('text/'))
-      return Common.resourceTypes.Script;
+      return resourceTypes.Script;
 
     if (mimeType.includes('font'))
-      return Common.resourceTypes.Font;
+      return resourceTypes.Font;
     if (mimeType.includes('script'))
-      return Common.resourceTypes.Script;
+      return resourceTypes.Script;
     if (mimeType.includes('octet'))
-      return Common.resourceTypes.Other;
+      return resourceTypes.Other;
     if (mimeType.includes('application'))
-      return Common.resourceTypes.Script;
+      return resourceTypes.Script;
 
-    return Common.resourceTypes.Other;
+    return resourceTypes.Other;
   }
 
   /**
    * @param {string} url
-   * @return {?Common.ResourceType}
+   * @return {?ResourceType}
    */
   static fromURL(url) {
-    return Common.ResourceType._resourceTypeByExtension.get(Common.ParsedURL.extractExtension(url)) || null;
+    return ResourceType._resourceTypeByExtension.get(Common.ParsedURL.extractExtension(url)) || null;
   }
 
   /**
    * @param {string} name
-   * @return {?Common.ResourceType}
+   * @return {?ResourceType}
    */
   static fromName(name) {
-    for (const resourceTypeId in Common.resourceTypes) {
-      const resourceType = Common.resourceTypes[resourceTypeId];
+    for (const resourceTypeId in resourceTypes) {
+      const resourceType = resourceTypes[resourceTypeId];
       if (resourceType.name() === name)
         return resourceType;
     }
@@ -97,11 +97,11 @@ Common.ResourceType = class {
    */
   static mimeFromURL(url) {
     const name = Common.ParsedURL.extractName(url);
-    if (Common.ResourceType._mimeTypeByName.has(name))
-      return Common.ResourceType._mimeTypeByName.get(name);
+    if (ResourceType._mimeTypeByName.has(name))
+      return ResourceType._mimeTypeByName.get(name);
 
     const ext = Common.ParsedURL.extractExtension(url).toLowerCase();
-    return Common.ResourceType._mimeTypeByExtension.get(ext);
+    return ResourceType._mimeTypeByExtension.get(ext);
   }
 
   /**
@@ -109,7 +109,7 @@ Common.ResourceType = class {
    * @return {string|undefined}
    */
   static mimeFromExtension(ext) {
-    return Common.ResourceType._mimeTypeByExtension.get(ext);
+    return ResourceType._mimeTypeByExtension.get(ext);
   }
 
   /**
@@ -127,7 +127,7 @@ Common.ResourceType = class {
   }
 
   /**
-   * @return {!Common.ResourceCategory}
+   * @return {!ResourceCategory}
    */
   category() {
     return this._category;
@@ -202,12 +202,12 @@ Common.ResourceType = class {
       return 'text/css';
     return '';
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Common.ResourceCategory = class {
+export class ResourceCategory {
   /**
    * @param {string} title
    * @param {string} shortTitle
@@ -216,67 +216,68 @@ Common.ResourceCategory = class {
     this.title = title;
     this.shortTitle = shortTitle;
   }
-};
+}
 
-Common.resourceCategories = {
-  XHR: new Common.ResourceCategory('XHR and Fetch', 'XHR'),
-  Script: new Common.ResourceCategory('Scripts', 'JS'),
-  Stylesheet: new Common.ResourceCategory('Stylesheets', 'CSS'),
-  Image: new Common.ResourceCategory('Images', 'Img'),
-  Media: new Common.ResourceCategory('Media', 'Media'),
-  Font: new Common.ResourceCategory('Fonts', 'Font'),
-  Document: new Common.ResourceCategory('Documents', 'Doc'),
-  WebSocket: new Common.ResourceCategory('WebSockets', 'WS'),
-  Manifest: new Common.ResourceCategory('Manifest', 'Manifest'),
-  Other: new Common.ResourceCategory('Other', 'Other')
+/**
+ * @enum {!ResourceCategory}
+ */
+export const resourceCategories = {
+  XHR: new ResourceCategory('XHR and Fetch', 'XHR'),
+  Script: new ResourceCategory('Scripts', 'JS'),
+  Stylesheet: new ResourceCategory('Stylesheets', 'CSS'),
+  Image: new ResourceCategory('Images', 'Img'),
+  Media: new ResourceCategory('Media', 'Media'),
+  Font: new ResourceCategory('Fonts', 'Font'),
+  Document: new ResourceCategory('Documents', 'Doc'),
+  WebSocket: new ResourceCategory('WebSockets', 'WS'),
+  Manifest: new ResourceCategory('Manifest', 'Manifest'),
+  Other: new ResourceCategory('Other', 'Other')
 };
 
 /**
  * Keep these in sync with WebCore::InspectorPageAgent::resourceTypeJson
- * @enum {!Common.ResourceType}
+ * @enum {!ResourceType}
  */
-Common.resourceTypes = {
-  XHR: new Common.ResourceType('xhr', 'XHR', Common.resourceCategories.XHR, true),
-  Fetch: new Common.ResourceType('fetch', 'Fetch', Common.resourceCategories.XHR, true),
-  EventSource: new Common.ResourceType('eventsource', 'EventSource', Common.resourceCategories.XHR, true),
-  Script: new Common.ResourceType('script', 'Script', Common.resourceCategories.Script, true),
-  Stylesheet: new Common.ResourceType('stylesheet', 'Stylesheet', Common.resourceCategories.Stylesheet, true),
-  Image: new Common.ResourceType('image', 'Image', Common.resourceCategories.Image, false),
-  Media: new Common.ResourceType('media', 'Media', Common.resourceCategories.Media, false),
-  Font: new Common.ResourceType('font', 'Font', Common.resourceCategories.Font, false),
-  Document: new Common.ResourceType('document', 'Document', Common.resourceCategories.Document, true),
-  TextTrack: new Common.ResourceType('texttrack', 'TextTrack', Common.resourceCategories.Other, true),
-  WebSocket: new Common.ResourceType('websocket', 'WebSocket', Common.resourceCategories.WebSocket, false),
-  Other: new Common.ResourceType('other', 'Other', Common.resourceCategories.Other, false),
-  SourceMapScript: new Common.ResourceType('sm-script', 'Script', Common.resourceCategories.Script, true),
-  SourceMapStyleSheet:
-      new Common.ResourceType('sm-stylesheet', 'Stylesheet', Common.resourceCategories.Stylesheet, true),
-  Manifest: new Common.ResourceType('manifest', 'Manifest', Common.resourceCategories.Manifest, true),
-  SignedExchange: new Common.ResourceType('signed-exchange', 'SignedExchange', Common.resourceCategories.Other, false),
+export const resourceTypes = {
+  XHR: new ResourceType('xhr', 'XHR', resourceCategories.XHR, true),
+  Fetch: new ResourceType('fetch', 'Fetch', resourceCategories.XHR, true),
+  EventSource: new ResourceType('eventsource', 'EventSource', resourceCategories.XHR, true),
+  Script: new ResourceType('script', 'Script', resourceCategories.Script, true),
+  Stylesheet: new ResourceType('stylesheet', 'Stylesheet', resourceCategories.Stylesheet, true),
+  Image: new ResourceType('image', 'Image', resourceCategories.Image, false),
+  Media: new ResourceType('media', 'Media', resourceCategories.Media, false),
+  Font: new ResourceType('font', 'Font', resourceCategories.Font, false),
+  Document: new ResourceType('document', 'Document', resourceCategories.Document, true),
+  TextTrack: new ResourceType('texttrack', 'TextTrack', resourceCategories.Other, true),
+  WebSocket: new ResourceType('websocket', 'WebSocket', resourceCategories.WebSocket, false),
+  Other: new ResourceType('other', 'Other', resourceCategories.Other, false),
+  SourceMapScript: new ResourceType('sm-script', 'Script', resourceCategories.Script, true),
+  SourceMapStyleSheet: new ResourceType('sm-stylesheet', 'Stylesheet', resourceCategories.Stylesheet, true),
+  Manifest: new ResourceType('manifest', 'Manifest', resourceCategories.Manifest, true),
+  SignedExchange: new ResourceType('signed-exchange', 'SignedExchange', resourceCategories.Other, false),
 };
 
 
-Common.ResourceType._mimeTypeByName = new Map([
+export const _mimeTypeByName = new Map([
   // CoffeeScript
   ['Cakefile', 'text/x-coffeescript']
 ]);
 
-Common.ResourceType._resourceTypeByExtension = new Map([
-  ['js', Common.resourceTypes.Script], ['mjs', Common.resourceTypes.Script],
+export const _resourceTypeByExtension = new Map([
+  ['js', resourceTypes.Script], ['mjs', resourceTypes.Script],
 
-  ['css', Common.resourceTypes.Stylesheet], ['xsl', Common.resourceTypes.Stylesheet],
+  ['css', resourceTypes.Stylesheet], ['xsl', resourceTypes.Stylesheet],
 
-  ['jpeg', Common.resourceTypes.Image], ['jpg', Common.resourceTypes.Image], ['svg', Common.resourceTypes.Image],
-  ['gif', Common.resourceTypes.Image], ['png', Common.resourceTypes.Image], ['ico', Common.resourceTypes.Image],
-  ['tiff', Common.resourceTypes.Image], ['tif', Common.resourceTypes.Image], ['bmp', Common.resourceTypes.Image],
+  ['jpeg', resourceTypes.Image], ['jpg', resourceTypes.Image], ['svg', resourceTypes.Image],
+  ['gif', resourceTypes.Image], ['png', resourceTypes.Image], ['ico', resourceTypes.Image],
+  ['tiff', resourceTypes.Image], ['tif', resourceTypes.Image], ['bmp', resourceTypes.Image],
 
-  ['webp', Common.resourceTypes.Media],
+  ['webp', resourceTypes.Media],
 
-  ['ttf', Common.resourceTypes.Font], ['otf', Common.resourceTypes.Font], ['ttc', Common.resourceTypes.Font],
-  ['woff', Common.resourceTypes.Font]
+  ['ttf', resourceTypes.Font], ['otf', resourceTypes.Font], ['ttc', resourceTypes.Font], ['woff', resourceTypes.Font]
 ]);
 
-Common.ResourceType._mimeTypeByExtension = new Map([
+export const _mimeTypeByExtension = new Map([
   // Web extensions
   ['js', 'text/javascript'], ['mjs', 'text/javascript'], ['css', 'text/css'], ['html', 'text/html'],
   ['htm', 'text/html'], ['xml', 'application/xml'], ['xsl', 'application/xml'],
@@ -346,3 +347,31 @@ Common.ResourceType._mimeTypeByExtension = new Map([
   // Font
   ['ttf', 'font/opentype'], ['otf', 'font/opentype'], ['ttc', 'font/opentype'], ['woff', 'application/font-woff']
 ]);
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @enum {!ResourceType}
+ */
+Common.resourceTypes = resourceTypes;
+
+/**
+ * @enum {!ResourceCategory}
+ */
+Common.resourceCategories = resourceCategories;
+
+/**
+ * @constructor
+ */
+Common.ResourceCategory = ResourceCategory;
+
+/**
+ * @constructor
+ */
+Common.ResourceType = ResourceType;
+
+Common.ResourceType._mimeTypeByName = _mimeTypeByName;
+Common.ResourceType._resourceTypeByExtension = _resourceTypeByExtension;
+Common.ResourceType._mimeTypeByExtension = _mimeTypeByExtension;
diff --git a/front_end/common/Revealer.js b/front_end/common/Revealer.js
new file mode 100644
index 0000000000..467c6e5208
--- /dev/null
+++ b/front_end/common/Revealer.js
@@ -0,0 +1,60 @@
+// Copyright 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.
+
+/**
+ * @interface
+ */
+export default class Revealer {
+  /**
+   * @param {!Object} object
+   * @param {boolean=} omitFocus
+   * @return {!Promise}
+   */
+  reveal(object, omitFocus) {
+  }
+}
+
+/**
+ * @param {?Object} revealable
+ * @param {boolean=} omitFocus
+ * @return {!Promise.<undefined>}
+ */
+export const reveal = function(revealable, omitFocus) {
+  if (!revealable)
+    return Promise.reject(new Error('Can\'t reveal ' + revealable));
+  return self.runtime.allInstances(Common.Revealer, revealable).then(reveal);
+
+  /**
+   * @param {!Array.<!Common.Revealer>} revealers
+   * @return {!Promise.<undefined>}
+   */
+  function reveal(revealers) {
+    const promises = [];
+    for (let i = 0; i < revealers.length; ++i)
+      promises.push(revealers[i].reveal(/** @type {!Object} */ (revealable), omitFocus));
+    return Promise.race(promises);
+  }
+};
+
+/**
+ * @param {?Object} revealable
+ * @return {?string}
+ */
+export const revealDestination = function(revealable) {
+  const extension = self.runtime.extension(Common.Revealer, revealable);
+  if (!extension)
+    return null;
+  return extension.descriptor()['destination'];
+};
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.Revealer = Revealer;
+Common.Revealer.reveal = reveal;
+Common.Revealer.revealDestination = revealDestination;
diff --git a/front_end/common/Runnable.js b/front_end/common/Runnable.js
new file mode 100644
index 0000000000..5edda691c2
--- /dev/null
+++ b/front_end/common/Runnable.js
@@ -0,0 +1,23 @@
+// 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.
+
+/**
+ * @interface
+ */
+export default class Runnable {
+  /**
+   * @return {!Promise}
+   */
+  run() {
+  }
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.Runnable = Runnable;
diff --git a/front_end/common/SegmentedRange.js b/front_end/common/SegmentedRange.js
index ddb66daf1c..9436ba164e 100644
--- a/front_end/common/SegmentedRange.js
+++ b/front_end/common/SegmentedRange.js
@@ -4,7 +4,7 @@
 /**
  * @unrestricted
  */
-Common.Segment = class {
+export class Segment {
   /**
    * @param {number} begin
    * @param {number} end
@@ -25,12 +25,12 @@ Common.Segment = class {
   intersects(that) {
     return this.begin < that.end && that.begin < this.end;
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Common.SegmentedRange = class {
+export default class SegmentedRange {
   /**
    * @param {(function(!Common.Segment, !Common.Segment): ?Common.Segment)=} mergeCallback
    */
@@ -108,4 +108,18 @@ Common.SegmentedRange = class {
     merged.end = Math.max(first.end, second.end);
     return merged;
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.Segment = Segment;
+
+/**
+ * @constructor
+ */
+Common.SegmentedRange = SegmentedRange;
diff --git a/front_end/common/Settings.js b/front_end/common/Settings.js
index 2c1e984496..ede3af62fa 100644
--- a/front_end/common/Settings.js
+++ b/front_end/common/Settings.js
@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Common.Settings = class {
+export default class Settings {
   /**
    * @param {!Common.SettingsStorage} globalStorage
    * @param {!Common.SettingsStorage} localStorage
@@ -164,12 +164,12 @@ Common.Settings = class {
     }
     return this._globalStorage;
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Common.SettingsStorage = class {
+export class SettingsStorage {
   /**
    * @param {!Object} object
    * @param {function(string, string)=} setCallback
@@ -244,13 +244,13 @@ Common.SettingsStorage = class {
     for (let i = 0; i < 10 && i < keys.length; ++i)
       Common.console.log('Setting: \'' + keys[i] + '\', size: ' + sizes[keys[i]]);
   }
-};
+}
 
 /**
  * @template V
  * @unrestricted
  */
-Common.Setting = class {
+export class Setting {
   /**
    * @param {!Common.Settings} settings
    * @param {string} name
@@ -376,12 +376,12 @@ Common.Setting = class {
     Common.console.error(errorMessage);
     this._storage._dumpSizes();
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Common.RegExpSetting = class extends Common.Setting {
+export class RegExpSetting extends Setting {
   /**
    * @param {!Common.Settings} settings
    * @param {string} name
@@ -448,12 +448,12 @@ Common.RegExpSetting = class extends Common.Setting {
     }
     return this._regex;
   }
-};
+}
 
 /**
  * @unrestricted
  */
-Common.VersionController = class {
+export class VersionController {
   updateVersion() {
     const localStorageVersion =
         window.localStorage ? window.localStorage[Common.VersionController._currentVersionName] : 0;
@@ -877,20 +877,12 @@ Common.VersionController = class {
     if (breakpointsSetting.get().length > maxBreakpointsCount)
       breakpointsSetting.set([]);
   }
-};
-
-Common.VersionController._currentVersionName = 'inspectorVersion';
-Common.VersionController.currentVersion = 28;
-
-/**
- * @type {!Common.Settings}
- */
-Common.settings;
+}
 
 /**
  * @enum {symbol}
  */
-Common.SettingStorageType = {
+export const SettingStorageType = {
   Global: Symbol('Global'),
   Local: Symbol('Local'),
   Session: Symbol('Session')
@@ -900,14 +892,58 @@ Common.SettingStorageType = {
  * @param {string} settingName
  * @return {!Common.Setting}
  */
-Common.moduleSetting = function(settingName) {
+export function moduleSetting(settingName) {
   return Common.settings.moduleSetting(settingName);
-};
+}
 
 /**
  * @param {string} settingName
  * @return {!Common.Setting}
  */
-Common.settingForTest = function(settingName) {
+export function settingForTest(settingName) {
   return Common.settings.settingForTest(settingName);
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.Settings = Settings;
+
+/**
+ * @constructor
+ */
+Common.SettingsStorage = SettingsStorage;
+
+/**
+ * @constructor
+ */
+Common.Setting = Setting;
+
+/**
+ * @constructor
+ */
+Common.RegExpSetting = RegExpSetting;
+Common.settingForTest = settingForTest;
+
+/**
+ * @constructor
+ */
+Common.VersionController = VersionController;
+Common.moduleSetting = moduleSetting;
+
+/**
+ * @enum {symbol}
+ */
+Common.SettingStorageType = SettingStorageType;
+
+Common.VersionController._currentVersionName = 'inspectorVersion';
+Common.VersionController.currentVersion = 28;
+
+/**
+ * @type {!Common.Settings}
+ */
+Common.settings;
diff --git a/front_end/common/StaticContentProvider.js b/front_end/common/StaticContentProvider.js
index 96fd15715f..9575a9ab59 100644
--- a/front_end/common/StaticContentProvider.js
+++ b/front_end/common/StaticContentProvider.js
@@ -5,7 +5,7 @@
  * @implements {Common.ContentProvider}
  * @unrestricted
  */
-Common.StaticContentProvider = class {
+export default class StaticContentProvider {
   /**
    * @param {string} contentURL
    * @param {!Common.ResourceType} contentType
@@ -71,4 +71,13 @@ Common.StaticContentProvider = class {
     const content = await this._lazyContent();
     return content ? Common.ContentProvider.performSearchInContent(content, query, caseSensitive, isRegex) : [];
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.StaticContentProvider = StaticContentProvider;
diff --git a/front_end/common/OutputStream.js b/front_end/common/StringOutputStream.js
similarity index 64%
rename from front_end/common/OutputStream.js
rename to front_end/common/StringOutputStream.js
index 1e720253e4..abd6b49793 100644
--- a/front_end/common/OutputStream.js
+++ b/front_end/common/StringOutputStream.js
@@ -5,25 +5,25 @@
 /**
  * @interface
  */
-Common.OutputStream = function() {};
-
-Common.OutputStream.prototype = {
+export class OutputStream {
   /**
    * @param {string} data
    * @return {!Promise}
    */
-  write(data) {},
+  async write(data) {
+  }
 
   /**
    * @return {!Promise}
    */
-  close() {}
-};
+  async close() {
+  }
+}
 
 /**
  * @implements {Common.OutputStream}
  */
-Common.StringOutputStream = class {
+export default class StringOutputStream {
   constructor() {
     this._data = '';
   }
@@ -40,7 +40,7 @@ Common.StringOutputStream = class {
   /**
    * @override
    */
-  close() {
+  async close() {
   }
 
   /**
@@ -49,4 +49,14 @@ Common.StringOutputStream = class {
   data() {
     return this._data;
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @interface
+ */
+Common.OutputStream = OutputStream;
+Common.StringOutputStream = StringOutputStream;
diff --git a/front_end/common/TextDictionary.js b/front_end/common/TextDictionary.js
index 9c555b2763..e190f3926f 100644
--- a/front_end/common/TextDictionary.js
+++ b/front_end/common/TextDictionary.js
@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Common.TextDictionary = class {
+export default class TextDictionary {
   constructor() {
     /** @type {!Map<string, number>} */
     this._words = new Map();
@@ -92,4 +92,10 @@ Common.TextDictionary = class {
     this._words.clear();
     this._index.clear();
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+Common.TextDictionary = TextDictionary;
diff --git a/front_end/common/Throttler.js b/front_end/common/Throttler.js
index a88e78f547..21c5f797f5 100644
--- a/front_end/common/Throttler.js
+++ b/front_end/common/Throttler.js
@@ -1,10 +1,11 @@
 // Copyright 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.
+
 /**
  * @unrestricted
  */
-Common.Throttler = class {
+export default class Throttler {
   /**
    * @param {number} timeout
    */
@@ -108,7 +109,13 @@ Common.Throttler = class {
   _getTime() {
     return window.performance.now();
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+Common.Throttler = Throttler;
 
 /** @typedef {function(!Error=)} */
 Common.Throttler.FinishCallback;
diff --git a/front_end/common/Trie.js b/front_end/common/Trie.js
index 98291c5042..22afde9f24 100644
--- a/front_end/common/Trie.js
+++ b/front_end/common/Trie.js
@@ -4,7 +4,7 @@
 /**
  * @unrestricted
  */
-Common.Trie = class {
+export default class Trie {
   constructor() {
     this.clear();
   }
@@ -132,4 +132,10 @@ Common.Trie = class {
     /** @type {!Array<number>} */
     this._freeNodes = [];
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+Common.Trie = Trie;
diff --git a/front_end/common/UIString.js b/front_end/common/UIString.js
index cd5f7d08e2..64b1fcc1d2 100644
--- a/front_end/common/UIString.js
+++ b/front_end/common/UIString.js
@@ -29,57 +29,55 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-self['Common'] = self['Common'] || {};
-
 /**
  * @param {string} string
  * @param {...*} vararg
  * @return {string}
  */
-Common.UIString = function(string, vararg) {
+export default function UIString(string, vararg) {
   return String.vsprintf(Common.localize(string), Array.prototype.slice.call(arguments, 1));
-};
+}
 
 /**
  * @param {string} string
  * @param {?ArrayLike} values
  * @return {string}
  */
-Common.serializeUIString = function(string, values = []) {
+export function serializeUIString(string, values = []) {
   const messageParts = [string];
   const serializedMessage = {messageParts, values};
   return JSON.stringify(serializedMessage);
-};
+}
 
 /**
  * @param {string} serializedMessage
  * @return {*}
  */
-Common.deserializeUIString = function(serializedMessage) {
+export function deserializeUIString(serializedMessage) {
   if (!serializedMessage)
     return {};
 
   return JSON.parse(serializedMessage);
-};
+}
 
 /**
  * @param {string} string
  * @return {string}
  */
-Common.localize = function(string) {
+export function localize(string) {
   return string;
-};
+}
 
 /**
  * @unrestricted
  */
-Common.UIStringFormat = class {
+export class UIStringFormat {
   /**
    * @param {string} format
    */
   constructor(format) {
     /** @type {string} */
-    this._localizedFormat = Common.localize(format);
+    this._localizedFormat = localize(format);
     /** @type {!Array.<!Object>} */
     this._tokenizedFormat = String.tokenizeFormatString(this._localizedFormat, String.standardFormatters);
   }
@@ -104,10 +102,7 @@ Common.UIStringFormat = class {
             this._tokenizedFormat)
         .formattedResult;
   }
-};
-
-/** @type {!WeakMap<!Array<string>, string>} */
-Common._substitutionStrings = new WeakMap();
+}
 
 /**
  * @param {!Array<string>|string} strings
@@ -124,3 +119,20 @@ self.ls = function(strings, vararg) {
   }
   return Common.UIString(substitutionString, ...Array.prototype.slice.call(arguments, 1));
 };
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.UIStringFormat = UIStringFormat;
+
+Common.UIString = UIString;
+Common.serializeUIString = serializeUIString;
+Common.deserializeUIString = deserializeUIString;
+Common.localize = localize;
+
+/** @type {!WeakMap<!Array<string>, string>} */
+Common._substitutionStrings = new WeakMap();
diff --git a/front_end/common/Worker.js b/front_end/common/Worker.js
index 5bdacedd48..a9c31a64e3 100644
--- a/front_end/common/Worker.js
+++ b/front_end/common/Worker.js
@@ -31,7 +31,7 @@
 /**
  * @unrestricted
  */
-Common.Worker = class {
+export default class WorkerWrapper {
   /**
    * @param {string} appName
    */
@@ -91,4 +91,13 @@ Common.Worker = class {
   set onerror(listener) {
     this._workerPromise.then(worker => worker.onerror = listener);
   }
-};
+}
+
+/* Legacy exported object */
+self.Common = self.Common || {};
+Common = Common || {};
+
+/**
+ * @constructor
+ */
+Common.Worker = WorkerWrapper;
diff --git a/front_end/common/common.js b/front_end/common/common.js
new file mode 100644
index 0000000000..fe28919a0b
--- /dev/null
+++ b/front_end/common/common.js
@@ -0,0 +1,62 @@
+// 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 './EventTarget.js';
+import './Object.js';
+
+// Do not reorder these imports as it breaks dependencies.
+
+import * as App from './App.js';
+import * as AppProvider from './AppProvider.js';
+import * as CharacterIdMap from './CharacterIdMap.js';
+import * as Color from './Color.js';
+import * as Console from './Console.js';
+import * as ContentProvider from './ContentProvider.js';
+import * as EventTarget from './EventTarget.js';
+import * as JavaScriptMetaData from './JavaScriptMetaData.js';
+import * as Linkifier from './Linkifier.js';
+import * as Object from './Object.js';
+import * as ParsedURL from './ParsedURL.js';
+import * as Progress from './Progress.js';
+import * as QueryParamHandler from './QueryParamHandler.js';
+import * as ResourceType from './ResourceType.js';
+import * as Revealer from './Revealer.js';
+import * as Runnable from './Runnable.js';
+import * as SegmentedRange from './SegmentedRange.js';
+import * as Settings from './Settings.js';
+import * as StaticContentProvider from './StaticContentProvider.js';
+import * as StringOutputStream from './StringOutputStream.js';
+import * as TextDictionary from './TextDictionary.js';
+import * as Throttler from './Throttler.js';
+import * as Trie from './Trie.js';
+import * as UIString from './UIString.js';
+import * as Worker from './Worker.js';
+
+export {
+  App,
+  AppProvider,
+  CharacterIdMap,
+  Color,
+  Console,
+  ContentProvider,
+  EventTarget,
+  JavaScriptMetaData,
+  Linkifier,
+  Object,
+  ParsedURL,
+  Progress,
+  QueryParamHandler,
+  ResourceType,
+  Revealer,
+  Runnable,
+  SegmentedRange,
+  Settings,
+  StaticContentProvider,
+  StringOutputStream,
+  TextDictionary,
+  Throttler,
+  Trie,
+  UIString,
+  Worker,
+};
diff --git a/front_end/common/module.json b/front_end/common/module.json
index 99b5427a8a..e6855777a3 100644
--- a/front_end/common/module.json
+++ b/front_end/common/module.json
@@ -3,10 +3,12 @@
         "text_utils",
         "platform"
     ],
-    "scripts": [
+    "modules": [
+        "common.js",
+        "EventTarget.js",
+        "Object.js",
         "Worker.js",
         "TextDictionary.js",
-        "Object.js",
         "Color.js",
         "Console.js",
         "ContentProvider.js",
@@ -15,12 +17,20 @@
         "ResourceType.js",
         "Settings.js",
         "StaticContentProvider.js",
-        "OutputStream.js",
         "SegmentedRange.js",
         "Throttler.js",
         "Trie.js",
         "UIString.js",
-        "ModuleExtensionInterfaces.js",
+        "Revealer.js",
+        "App.js",
+        "AppProvider.js",
+        "JavaScriptMetaData.js",
+        "Linkifier.js",
+        "QueryParamHandler.js",
+        "Revealer.js",
+        "Runnable.js",
+        "StringOutputStream.js",
         "CharacterIdMap.js"
-    ]
+    ],
+    "scripts": []
 }
diff --git a/front_end/heap_snapshot_worker.js b/front_end/heap_snapshot_worker.js
index 44b9b2e61f..7750502227 100644
--- a/front_end/heap_snapshot_worker.js
+++ b/front_end/heap_snapshot_worker.js
@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 // Release build has Runtime.js bundled.
+
+// FIXME(http://crbug.com/1007254)
+const __import = path => {
+  const relativePath = new URL(path, self.location.href);
+  return eval(`import('${relativePath}')`);
+};
+
 if (!self.Runtime)
   self.importScripts('Runtime.js');
-Runtime.startWorker('heap_snapshot_worker');
+__import('./common/common.js').then(_ => Runtime.startWorker('heap_snapshot_worker'));
diff --git a/front_end/javascript_metadata/JavaScriptMetadata.js b/front_end/javascript_metadata/JavaScriptMetadata.js
index 022a911622..4002240466 100644
--- a/front_end/javascript_metadata/JavaScriptMetadata.js
+++ b/front_end/javascript_metadata/JavaScriptMetadata.js
@@ -71,4 +71,4 @@ JavaScriptMetadata.JavaScriptMetadata = class {
  *  receiver: (string|undefined),
  * }>}
  */
-JavaScriptMetadata.NativeFunctions;
\ No newline at end of file
+JavaScriptMetadata.NativeFunctions;
diff --git a/front_end/protocol/InspectorBackend.js b/front_end/protocol/InspectorBackend.js
index 54c6cb54ad..df6ad0b84b 100644
--- a/front_end/protocol/InspectorBackend.js
+++ b/front_end/protocol/InspectorBackend.js
@@ -28,7 +28,10 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/** @typedef {string} */
+/**
+ * @typedef {string}
+ * @suppress {checkTypes}
+ */
 Protocol.Error = Symbol('Protocol.Error');
 
 /**
diff --git a/front_end/root.js b/front_end/root.js
index 4590c37c3e..022ced9763 100644
--- a/front_end/root.js
+++ b/front_end/root.js
@@ -2,4 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './common/common.js';
 import './ui/ui.js';
diff --git a/scripts/compile_frontend.py b/scripts/compile_frontend.py
index 78a553da0e..afe10c596c 100755
--- a/scripts/compile_frontend.py
+++ b/scripts/compile_frontend.py
@@ -279,9 +279,9 @@ def prepare_closure_frontend_compile(temp_devtools_path, descriptors, namespace_
         '--externs',
         namespace_externs_path,
         '--js',
-        RUNTIME_FILE,
-        '--js',
         ROOT_MODULE_FILE,
+        '--js',
+        RUNTIME_FILE,
     ]
 
     all_files = descriptors.all_compiled_files()
@@ -318,7 +318,6 @@ def generate_namespace_externs(modules_by_name):
     namespace_externs_file = tempfile.NamedTemporaryFile(mode='wt', delete=False)
     try:
         for namespace in namespaces:
-            namespace_externs_file.write('/** @const */\n')
             namespace_externs_file.write('var %s = {};\n' % namespace)
     finally:
         namespace_externs_file.close()