diff --git a/front_end/css_overview/CSSOverviewCompletedView.js b/front_end/css_overview/CSSOverviewCompletedView.js
index 428cb41777..80d06d171f 100644
--- a/front_end/css_overview/CSSOverviewCompletedView.js
+++ b/front_end/css_overview/CSSOverviewCompletedView.js
@@ -2,13 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../common/common.js';
+import * as Components from '../components/components.js';
+import * as DataGrid from '../data_grid/data_grid.js';
+import * as SDK from '../sdk/sdk.js';
+import * as TextUtils from '../text_utils/text_utils.js';
+import * as UI from '../ui/ui.js';
+
 import {Events} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
 
 /**
  * @unrestricted
  */
-export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
+export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   constructor(controller, target) {
     super('css_overview_completed_view');
     this.registerRequiredCSS('css_overview/cssOverviewCompletedView.css');
@@ -16,8 +23,8 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
     this._controller = controller;
     this._formatter = new Intl.NumberFormat('en-US');
 
-    this._mainContainer = new UI.SplitWidget(true, true);
-    this._resultsContainer = new UI.VBox();
+    this._mainContainer = new UI.SplitWidget.SplitWidget(true, true);
+    this._resultsContainer = new UI.Widget.VBox();
     this._elementContainer = new DetailsView();
 
     // If closing the last tab, collapse the sidebar.
@@ -40,10 +47,10 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
     this.splitWidget().setSidebarWidget(this._sideBar);
     this.splitWidget().setMainWidget(this._mainContainer);
 
-    this._cssModel = target.model(SDK.CSSModel);
-    this._domModel = target.model(SDK.DOMModel);
+    this._cssModel = target.model(SDK.CSSModel.CSSModel);
+    this._domModel = target.model(SDK.DOMModel.DOMModel);
     this._domAgent = target.domAgent();
-    this._linkifier = new Components.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
+    this._linkifier = new Components.Linkifier.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
 
     this._viewMap = new Map();
 
@@ -218,7 +225,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
     const sortedFillColors = this._sortColorsByLuminance(fillColors);
     const sortedBorderColors = this._sortColorsByLuminance(borderColors);
 
-    this._fragment = UI.Fragment.build`
+    this._fragment = UI.Fragment.Fragment.build`
     <div class="vbox overview-completed-view">
       <div $="summary" class="results-section horizontally-padded summary">
         <h1>${ls`Overview summary`}</h1>
@@ -298,7 +305,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
         <h1>${ls`Font info`}</h1>
         ${
         fontInfo.size > 0 ? this._fontInfoToFragment(fontInfo) :
-                            UI.Fragment.build`<div>${ls`There are no fonts.`}</div>`}
+                            UI.Fragment.Fragment.build`<div>${ls`There are no fonts.`}</div>`}
       </div>
 
       <div $="unused-declarations" class="results-section unused-declarations">
@@ -306,7 +313,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
         ${
         unusedDeclarations.size > 0 ?
             this._groupToFragment(unusedDeclarations, 'unused-declarations', 'declaration') :
-            UI.Fragment.build`<div class="horizontally-padded">${ls`There are no unused declarations.`}</div>`}
+            UI.Fragment.Fragment.build`<div class="horizontally-padded">${ls`There are no unused declarations.`}</div>`}
       </div>
 
       <div $="media-queries" class="results-section media-queries">
@@ -314,7 +321,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
         ${
         mediaQueries.size > 0 ?
             this._groupToFragment(mediaQueries, 'media-queries', 'text') :
-            UI.Fragment.build`<div class="horizontally-padded">${ls`There are no media queries.`}</div>`}
+            UI.Fragment.Fragment.build`<div class="horizontally-padded">${ls`There are no media queries.`}</div>`}
       </div>
     </div>`;
 
@@ -365,9 +372,9 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
 
   _fontInfoToFragment(fontInfo) {
     const fonts = Array.from(fontInfo.entries());
-    return UI.Fragment.build`
+    return UI.Fragment.Fragment.build`
       ${fonts.map(([font, fontMetrics]) => {
-      return UI.Fragment.build
+      return UI.Fragment.Fragment.build
       `<section class="font-family"><h2>${font}</h2> ${this._fontMetricsToFragment(font, fontMetrics)}</section>`;
     })}
     `;
@@ -376,11 +383,11 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
   _fontMetricsToFragment(font, fontMetrics) {
     const fontMetricInfo = Array.from(fontMetrics.entries());
 
-    return UI.Fragment.build`
+    return UI.Fragment.Fragment.build`
       <div class="font-metric">
       ${fontMetricInfo.map(([label, values]) => {
       const sanitizedPath = `${font}/${label}`;
-      return UI.Fragment.build`
+      return UI.Fragment.Fragment.build`
           <div>
             <h3>${label}</h3>
             ${this._groupToFragment(values, 'font-info', 'value', sanitizedPath)}
@@ -399,12 +406,12 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
 
     const total = values.reduce((prev, curr) => prev + curr[1].length, 0);
 
-    return UI.Fragment.build`<ul>
+    return UI.Fragment.Fragment.build`<ul>
     ${values.map(([title, nodes]) => {
       const width = 100 * nodes.length / total;
       const itemLabel = nodes.length === 1 ? ls`occurrence` : ls`occurrences`;
 
-      return UI.Fragment.build`<li>
+      return UI.Fragment.Fragment.build`<li>
         <div class="title">${title}</div>
         <button data-type="${type}" data-path="${path}" data-${dataLabel}="${title}">
           <div class="details">${ls`${nodes.length} ${itemLabel}`}</div>
@@ -418,7 +425,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
   }
 
   _colorsToFragment(section, color) {
-    const blockFragment = UI.Fragment.build`<li>
+    const blockFragment = UI.Fragment.Fragment.build`<li>
       <button data-type="color" data-color="${color}" data-section="${section}" class="block" $="color"></button>
       <div class="block-title">${color}</div>
     </li>`;
@@ -426,7 +433,7 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
     const block = blockFragment.$('color');
     block.style.backgroundColor = color;
 
-    const borderColor = Common.Color.parse(color);
+    const borderColor = Common.Color.Color.parse(color);
     let [h, s, l] = borderColor.hsla();
     h = Math.round(h * 360);
     s = Math.round(s * 100);
@@ -443,9 +450,9 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
 
   _sortColorsByLuminance(srcColors) {
     return Array.from(srcColors.keys()).sort((colA, colB) => {
-      const colorA = Common.Color.parse(colA);
-      const colorB = Common.Color.parse(colB);
-      return Common.Color.luminance(colorB.rgba()) - Common.Color.luminance(colorA.rgba());
+      const colorA = Common.Color.Color.parse(colA);
+      const colorB = Common.Color.Color.parse(colB);
+      return Common.Color.Color.luminance(colorB.rgba()) - Common.Color.Color.luminance(colorA.rgba());
     });
   }
 
@@ -456,11 +463,11 @@ export class CSSOverviewCompletedView extends UI.PanelWithSidebar {
 
 CSSOverviewCompletedView.pushedNodes = new Set();
 
-export class DetailsView extends UI.VBox {
+export class DetailsView extends UI.Widget.VBox {
   constructor() {
     super();
 
-    this._tabbedPane = new UI.TabbedPane();
+    this._tabbedPane = new UI.TabbedPane.TabbedPane();
     this._tabbedPane.show(this.element);
     this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, () => {
       this.dispatchEventToListeners(UI.TabbedPane.Events.TabClosed, this._tabbedPane.tabIds().length);
@@ -470,7 +477,7 @@ export class DetailsView extends UI.VBox {
   /**
    * @param {string} id
    * @param {string} tabTitle
-   * @param {!UI.Widget} view
+   * @param {!UI.Widget.Widget} view
    * @param {boolean=} isCloseable
    */
   appendTab(id, tabTitle, view, isCloseable) {
@@ -486,7 +493,7 @@ export class DetailsView extends UI.VBox {
   }
 }
 
-export class ElementDetailsView extends UI.Widget {
+export class ElementDetailsView extends UI.Widget.Widget {
   constructor(controller, domModel, cssModel, linkifier) {
     super();
 
@@ -501,8 +508,8 @@ export class ElementDetailsView extends UI.Widget {
       {id: 'sourceURL', title: ls`Source`, visible: true, sortable: false, hideable: true, weight: 100}
     ];
 
-    this._elementGrid =
-        new DataGrid.SortableDataGrid({displayName: ls`CSS Overview Elements`, columns: this._elementGridColumns});
+    this._elementGrid = new DataGrid.SortableDataGrid.SortableDataGrid(
+        {displayName: ls`CSS Overview Elements`, columns: this._elementGridColumns});
     this._elementGrid.element.classList.add('element-grid');
     this._elementGrid.element.addEventListener('mouseover', this._onMouseOver.bind(this));
     this._elementGrid.setStriped(true);
@@ -518,7 +525,7 @@ export class ElementDetailsView extends UI.Widget {
       return;
     }
 
-    const comparator = DataGrid.SortableDataGrid.StringComparator.bind(null, sortColumnId);
+    const comparator = DataGrid.SortableDataGrid.SortableDataGrid.StringComparator.bind(null, sortColumnId);
     this._elementGrid.sortNodes(comparator, !this._elementGrid.isSortOrderAscending());
   }
 
@@ -584,12 +591,12 @@ export class ElementDetailsView extends UI.Widget {
   }
 }
 
-export class ElementNode extends DataGrid.SortableDataGridNode {
+export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode {
   /**
-   * @param {!DataGrid.SortableDataGrid} dataGrid
+   * @param {!DataGrid.SortableDataGrid.SortableDataGrid} dataGrid
    * @param {!Object<string,*>} data
-   * @param {!Components.Linkifier} linkifier
-   * @param {!SDK.CSSModel} cssModel
+   * @param {!Components.Linkifier.Linkifier} linkifier
+   * @param {!SDK.CSSModel.CSSModel} cssModel
    */
   constructor(dataGrid, data, linkifier, cssModel) {
     super(dataGrid, data.hasChildren);
@@ -610,7 +617,7 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
       const cell = this.createTD(columnId);
       cell.textContent = '...';
 
-      Common.Linkifier.linkify(this.data.node).then(link => {
+      Common.Linkifier.Linkifier.linkify(this.data.node).then(link => {
         cell.textContent = '';
         link.dataset.backendNodeId = this.data.node.backendNodeId();
         cell.appendChild(link);
@@ -624,7 +631,8 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
 
       if (this.data.range) {
         const link = this._linkifyRuleLocation(
-            this._cssModel, this._linkifier, this.data.styleSheetId, TextUtils.TextRange.fromObject(this.data.range));
+            this._cssModel, this._linkifier, this.data.styleSheetId,
+            TextUtils.TextRange.TextRange.fromObject(this.data.range));
 
         if (link.textContent !== '') {
           cell.appendChild(link);
@@ -644,7 +652,7 @@ export class ElementNode extends DataGrid.SortableDataGridNode {
     const styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
     const lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
     const columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
-    const matchingSelectorLocation = new SDK.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
+    const matchingSelectorLocation = new SDK.CSSModel.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
     return linkifier.linkifyCSSLocation(matchingSelectorLocation);
   }
 }
diff --git a/front_end/css_overview/CSSOverviewController.js b/front_end/css_overview/CSSOverviewController.js
index e03e9cd15f..55473b4a74 100644
--- a/front_end/css_overview/CSSOverviewController.js
+++ b/front_end/css_overview/CSSOverviewController.js
@@ -2,16 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../common/common.js';
+import * as SDK from '../sdk/sdk.js';
+
 /**
  * @unrestricted
  */
-export class OverviewController extends Common.Object {
+export class OverviewController extends Common.ObjectWrapper.ObjectWrapper {
   constructor() {
     super();
 
     this.currentUrl = self.SDK.targetManager.inspectedURL();
     self.SDK.targetManager.addEventListener(
-        SDK.TargetManager.Events.InspectedURLChanged, this._checkUrlAndResetIfChanged, this);
+        SDK.SDKModel.Events.InspectedURLChanged, this._checkUrlAndResetIfChanged, this);
   }
 
   _checkUrlAndResetIfChanged() {
diff --git a/front_end/css_overview/CSSOverviewModel.js b/front_end/css_overview/CSSOverviewModel.js
index bb22293586..a5443f81e8 100644
--- a/front_end/css_overview/CSSOverviewModel.js
+++ b/front_end/css_overview/CSSOverviewModel.js
@@ -2,14 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../common/common.js';
+import * as SDK from '../sdk/sdk.js';
+
 import {CSSOverviewUnusedDeclarations} from './CSSOverviewUnusedDeclarations.js';
 
 /**
  * @unrestricted
  */
-export class CSSOverviewModel extends SDK.SDKModel {
+export class CSSOverviewModel extends SDK.SDKModel.SDKModel {
   /**
-   * @param {!SDK.Target} target
+   * @param {!SDK.SDKModel.Target} target
    */
   constructor(target) {
     super(target);
@@ -71,7 +74,7 @@ export class CSSOverviewModel extends SDK.SDKModel {
 
       // Parse the color, discard transparent ones.
       const colorText = strings[id];
-      const color = Common.Color.parse(colorText);
+      const color = Common.Color.Color.parse(colorText);
       if (!color || color.rgba()[3] === 0) {
         return;
       }
@@ -337,4 +340,4 @@ export class CSSOverviewModel extends SDK.SDKModel {
   }
 }
 
-SDK.SDKModel.register(CSSOverviewModel, SDK.Target.Capability.DOM, false);
+SDK.SDKModel.SDKModel.register(CSSOverviewModel, SDK.SDKModel.Capability.DOM, false);
diff --git a/front_end/css_overview/CSSOverviewPanel.js b/front_end/css_overview/CSSOverviewPanel.js
index 7b38a727df..4e0795026b 100644
--- a/front_end/css_overview/CSSOverviewPanel.js
+++ b/front_end/css_overview/CSSOverviewPanel.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as UI from '../ui/ui.js';
+
 import {CSSOverviewCompletedView} from './CSSOverviewCompletedView.js';
 import {Events, OverviewController} from './CSSOverviewController.js';
 import {CSSOverviewModel} from './CSSOverviewModel.js';
@@ -11,7 +13,7 @@ import {CSSOverviewStartView} from './CSSOverviewStartView.js';
 /**
  * @unrestricted
  */
-export class CSSOverviewPanel extends UI.Panel {
+export class CSSOverviewPanel extends UI.Panel.Panel {
   constructor() {
     super('css_overview');
     this.registerRequiredCSS('css_overview/cssOverview.css');
diff --git a/front_end/css_overview/CSSOverviewProcessingView.js b/front_end/css_overview/CSSOverviewProcessingView.js
index 7df91f8d27..70e39584cd 100644
--- a/front_end/css_overview/CSSOverviewProcessingView.js
+++ b/front_end/css_overview/CSSOverviewProcessingView.js
@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as UI from '../ui/ui.js';
+
 import {Events} from './CSSOverviewController.js';
 
 /**
  * @unrestricted
  */
-export class CSSOverviewProcessingView extends UI.Widget {
+export class CSSOverviewProcessingView extends UI.Widget.Widget {
   constructor(controller) {
     super();
     this.registerRequiredCSS('css_overview/cssOverviewProcessingView.css');
@@ -18,12 +20,12 @@ export class CSSOverviewProcessingView extends UI.Widget {
   }
 
   _render() {
-    const cancelButton = UI.createTextButton(
+    const cancelButton = UI.UIUtils.createTextButton(
         ls`Cancel`, () => this._controller.dispatchEventToListeners(Events.RequestOverviewCancel), '',
         true /* primary */);
     this.setDefaultFocusedElement(cancelButton);
 
-    this.fragment = UI.Fragment.build`
+    this.fragment = UI.Fragment.Fragment.build`
       <div class="vbox overview-processing-view">
         <h1>Processing page</h1>
         <div>${cancelButton}</div>
diff --git a/front_end/css_overview/CSSOverviewSidebarPanel.js b/front_end/css_overview/CSSOverviewSidebarPanel.js
index c135809f7a..8c627a7fae 100644
--- a/front_end/css_overview/CSSOverviewSidebarPanel.js
+++ b/front_end/css_overview/CSSOverviewSidebarPanel.js
@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export class CSSOverviewSidebarPanel extends UI.VBox {
+import * as UI from '../ui/ui.js';
+
+export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
   static get ITEM_CLASS_NAME() {
     return 'overview-sidebar-panel-item';
   }
@@ -19,12 +21,12 @@ export class CSSOverviewSidebarPanel extends UI.VBox {
     this.contentElement.addEventListener('click', this._onItemClick.bind(this));
 
     // Clear overview.
-    const clearResultsButton = new UI.ToolbarButton(ls`Clear overview`, 'largeicon-clear');
-    clearResultsButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset, this);
+    const clearResultsButton = new UI.Toolbar.ToolbarButton(ls`Clear overview`, 'largeicon-clear');
+    clearResultsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._reset, this);
 
     // Toolbar.
     const toolbarElement = this.contentElement.createChild('div', 'overview-toolbar');
-    const toolbar = new UI.Toolbar('', toolbarElement);
+    const toolbar = new UI.Toolbar.Toolbar('', toolbarElement);
     toolbar.appendToolbarItem(clearResultsButton);
   }
 
diff --git a/front_end/css_overview/CSSOverviewStartView.js b/front_end/css_overview/CSSOverviewStartView.js
index b06f5e6e43..59e38a3062 100644
--- a/front_end/css_overview/CSSOverviewStartView.js
+++ b/front_end/css_overview/CSSOverviewStartView.js
@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as UI from '../ui/ui.js';
+
 import {Events} from './CSSOverviewController.js';
 
 /**
  * @unrestricted
  */
-export class CSSOverviewStartView extends UI.Widget {
+export class CSSOverviewStartView extends UI.Widget.Widget {
   constructor(controller) {
     super();
     this.registerRequiredCSS('css_overview/cssOverviewStartView.css');
@@ -17,13 +19,13 @@ export class CSSOverviewStartView extends UI.Widget {
   }
 
   _render() {
-    const startButton = UI.createTextButton(
+    const startButton = UI.UIUtils.createTextButton(
         ls`Capture overview`, () => this._controller.dispatchEventToListeners(Events.RequestOverviewStart), '',
         true /* primary */);
 
     this.setDefaultFocusedElement(startButton);
 
-    const fragment = UI.Fragment.build`
+    const fragment = UI.Fragment.Fragment.build`
       <div class="vbox overview-start-view">
         <h1>${ls`CSS Overview`}</h1>
         <div>${startButton}</div>