From 64a94d81058d55bfaee2e797a780cfaabe60be2c Mon Sep 17 00:00:00 2001
From: Tim van der Lippe <tvanderlippe@chromium.org>
Date: Fri, 24 Jan 2020 11:52:24 +0000
Subject: [PATCH] Migrate object_ui/ to import cross-module

Bug: 1006759
Change-Id: Ic6a53e6183e3621771c019c4c9692c072f812736
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2019123
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
---
 front_end/object_ui/CustomPreviewComponent.js |  16 +-
 front_end/object_ui/JavaScriptAutocomplete.js |  72 +++---
 front_end/object_ui/JavaScriptREPL.js         |   4 +-
 front_end/object_ui/ObjectPopoverHelper.js    |  28 ++-
 .../object_ui/ObjectPropertiesSection.js      | 217 +++++++++---------
 .../object_ui/RemoteObjectPreviewFormatter.js |  16 +-
 front_end/sdk/DebuggerModel.js                |   3 +
 front_end/sdk/RemoteObject.js                 |   5 +
 front_end/sdk/RuntimeModel.js                 |   8 +
 front_end/ui/SuggestBox.js                    |  31 +++
 front_end/ui/UIUtils.js                       |   3 +
 .../localization/utils/localization_utils.js  |   3 +-
 12 files changed, 247 insertions(+), 159 deletions(-)

diff --git a/front_end/object_ui/CustomPreviewComponent.js b/front_end/object_ui/CustomPreviewComponent.js
index 3533984d74..38b1e29946 100644
--- a/front_end/object_ui/CustomPreviewComponent.js
+++ b/front_end/object_ui/CustomPreviewComponent.js
@@ -2,6 +2,10 @@
 // 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';  // eslint-disable-line no-unused-vars
+import * as UI from '../ui/ui.js';
+
 import {ObjectPropertiesSection} from './ObjectPropertiesSection.js';
 
 /**
@@ -9,7 +13,7 @@ import {ObjectPropertiesSection} from './ObjectPropertiesSection.js';
  */
 export class CustomPreviewSection {
   /**
-   * @param {!SDK.RemoteObject} object
+   * @param {!SDK.RemoteObject.RemoteObject} object
    */
   constructor(object) {
     this._sectionElement = createElementWithClass('span', 'custom-expandable-section');
@@ -34,7 +38,7 @@ export class CustomPreviewSection {
     if (customPreview.hasBody || customPreview.bodyGetterId) {
       this._header.classList.add('custom-expandable-section-header');
       this._header.addEventListener('click', this._onClick.bind(this), false);
-      this._expandIcon = UI.Icon.create('smallicon-triangle-right', 'custom-expand-icon');
+      this._expandIcon = UI.Icon.Icon.create('smallicon-triangle-right', 'custom-expand-icon');
       this._header.insertBefore(this._expandIcon, this._header.firstChild);
     }
 
@@ -226,13 +230,13 @@ export class CustomPreviewSection {
  */
 export class CustomPreviewComponent {
   /**
-   * @param {!SDK.RemoteObject} object
+   * @param {!SDK.RemoteObject.RemoteObject} object
    */
   constructor(object) {
     this._object = object;
     this._customPreviewSection = new CustomPreviewSection(object);
     this.element = createElementWithClass('span', 'source-code');
-    const shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'object_ui/customPreviewComponent.css');
+    const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(this.element, 'object_ui/customPreviewComponent.css');
     this.element.addEventListener('contextmenu', this._contextMenuEventFired.bind(this), false);
     shadowRoot.appendChild(this._customPreviewSection.element());
   }
@@ -248,10 +252,10 @@ export class CustomPreviewComponent {
    * @param {!Event} event
    */
   _contextMenuEventFired(event) {
-    const contextMenu = new UI.ContextMenu(event);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (this._customPreviewSection) {
       contextMenu.revealSection().appendItem(
-          Common.UIString('Show as JavaScript object'), this._disassemble.bind(this));
+          Common.UIString.UIString('Show as JavaScript object'), this._disassemble.bind(this));
     }
     contextMenu.appendApplicableItems(this._object);
     contextMenu.show();
diff --git a/front_end/object_ui/JavaScriptAutocomplete.js b/front_end/object_ui/JavaScriptAutocomplete.js
index f04f896d83..febb75c396 100644
--- a/front_end/object_ui/JavaScriptAutocomplete.js
+++ b/front_end/object_ui/JavaScriptAutocomplete.js
@@ -2,16 +2,22 @@
 // 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 Formatter from '../formatter/formatter.js';
+import * as SDK from '../sdk/sdk.js';
+import * as TextUtils from '../text_utils/text_utils.js';
+import * as UI from '../ui/ui.js';
+
 export class JavaScriptAutocomplete {
   constructor() {
     /** @type {!Map<string, {date: number, value: !Promise<?Object>}>} */
     this._expressionCache = new Map();
     self.SDK.consoleModel.addEventListener(SDK.ConsoleModel.Events.CommandEvaluated, this._clearCache, this);
-    UI.context.addFlavorChangeListener(SDK.ExecutionContext, this._clearCache, this);
+    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this._clearCache, this);
     self.SDK.targetManager.addModelListener(
-        SDK.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this._clearCache, this);
+        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this._clearCache, this);
     self.SDK.targetManager.addModelListener(
-        SDK.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this._clearCache, this);
+        SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this._clearCache, this);
   }
 
   _clearCache() {
@@ -37,11 +43,11 @@ export class JavaScriptAutocomplete {
    * @return {!Promise<?{args: !Array<!Array<string>>, argumentIndex: number}|undefined>}
    */
   async argumentsHint(fullText) {
-    const functionCall = await Formatter.formatterWorkerPool().findLastFunctionCall(fullText);
+    const functionCall = await Formatter.FormatterWorkerPool.formatterWorkerPool().findLastFunctionCall(fullText);
     if (!functionCall) {
       return null;
     }
-    const executionContext = UI.context.flavor(SDK.ExecutionContext);
+    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return null;
     }
@@ -85,15 +91,15 @@ export class JavaScriptAutocomplete {
   }
 
   /**
-   * @param {!SDK.RemoteObject} functionObject
-   * @param {function():!Promise<?SDK.RemoteObject>} receiverObjGetter
+   * @param {!SDK.RemoteObject.RemoteObject} functionObject
+   * @param {function():!Promise<?SDK.RemoteObject.RemoteObject>} receiverObjGetter
    * @param {string=} parsedFunctionName
    * @return {!Promise<!Array<!Array<string>>>}
    */
   async _argumentsForFunction(functionObject, receiverObjGetter, parsedFunctionName) {
     const description = functionObject.description;
     if (!description.endsWith('{ [native code] }')) {
-      return [await Formatter.formatterWorkerPool().argumentsList(description)];
+      return [await Formatter.FormatterWorkerPool.formatterWorkerPool().argumentsList(description)];
     }
 
     // Check if this is a bound function.
@@ -106,7 +112,7 @@ export class JavaScriptAutocomplete {
       if (thisProperty && targetProperty && argsProperty) {
         const originalSignatures =
             await this._argumentsForFunction(targetProperty.value, () => Promise.resolve(thisProperty.value));
-        const boundArgsLength = SDK.RemoteObject.arrayLength(argsProperty.value);
+        const boundArgsLength = SDK.RemoteObject.RemoteObject.arrayLength(argsProperty.value);
         const clippedArgs = [];
         for (const signature of originalSignatures) {
           const restIndex = signature.slice(0, boundArgsLength).findIndex(arg => arg.startsWith('...'));
@@ -119,7 +125,7 @@ export class JavaScriptAutocomplete {
         return clippedArgs;
       }
     }
-    const javaScriptMetadata = await self.runtime.extension(Common.JavaScriptMetadata).instance();
+    const javaScriptMetadata = await self.runtime.extension(Common.JavaScriptMetaData.JavaScriptMetaData).instance();
 
     const name = /^function ([^(]*)\(/.exec(description)[1] || parsedFunctionName;
     if (!name) {
@@ -190,12 +196,13 @@ export class JavaScriptAutocomplete {
    */
   async _mapCompletions(text, query) {
     const mapMatch = text.match(/\.\s*(get|set|delete)\s*\(\s*$/);
-    const executionContext = UI.context.flavor(SDK.ExecutionContext);
+    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext || !mapMatch) {
       return [];
     }
 
-    const expression = await Formatter.formatterWorkerPool().findLastExpression(text.substring(0, mapMatch.index));
+    const expression =
+        await Formatter.FormatterWorkerPool.formatterWorkerPool().findLastExpression(text.substring(0, mapMatch.index));
     if (!expression) {
       return [];
     }
@@ -285,7 +292,7 @@ export class JavaScriptAutocomplete {
       const suggestions =
           caseSensitivePrefix.concat(caseInsensitivePrefix, caseSensitiveAnywhere, caseInsensitiveAnywhere);
       if (suggestions.length) {
-        suggestions[0].subtitle = Common.UIString('Keys');
+        suggestions[0].subtitle = Common.UIString.UIString('Keys');
       }
       return suggestions;
     }
@@ -298,13 +305,14 @@ export class JavaScriptAutocomplete {
    * @return {!Promise<!UI.SuggestBox.Suggestions>}
    */
   async _completionsForExpression(fullText, query, force) {
-    const executionContext = UI.context.flavor(SDK.ExecutionContext);
+    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return [];
     }
     let expression;
     if (fullText.endsWith('.') || fullText.endsWith('[')) {
-      expression = await Formatter.formatterWorkerPool().findLastExpression(fullText.substring(0, fullText.length - 1));
+      expression = await Formatter.FormatterWorkerPool.formatterWorkerPool().findLastExpression(
+          fullText.substring(0, fullText.length - 1));
     }
     if (!expression) {
       if (fullText.endsWith('.')) {
@@ -380,8 +388,9 @@ export class JavaScriptAutocomplete {
       }
       let completions = [];
       if (object.type === 'object' || object.type === 'function') {
-        completions =
-            await object.callFunctionJSON(getCompletions, [SDK.RemoteObject.toCallArgument(object.subtype)]) || [];
+        completions = await object.callFunctionJSON(
+                          getCompletions, [SDK.RemoteObject.RemoteObject.toCallArgument(object.subtype)]) ||
+            [];
       } else if (
           object.type === 'string' || object.type === 'number' || object.type === 'boolean' ||
           object.type === 'bigint') {
@@ -408,7 +417,7 @@ export class JavaScriptAutocomplete {
         if (completions.length) {
           completions[0].items = completions[0].items.concat(globalNames);
         } else {
-          completions.push({items: globalNames.sort(), title: Common.UIString('Lexical scope variables')});
+          completions.push({items: globalNames.sort(), title: Common.UIString.UIString('Lexical scope variables')});
         }
       }
 
@@ -657,7 +666,7 @@ export class JavaScriptAutocomplete {
    * @return {!Promise<boolean>}
    */
   static async isExpressionComplete(expression) {
-    const currentExecutionContext = UI.context.flavor(SDK.ExecutionContext);
+    const currentExecutionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
     if (!currentExecutionContext) {
       return true;
     }
@@ -674,15 +683,15 @@ export class JavaScriptAutocomplete {
 
 export class JavaScriptAutocompleteConfig {
   /**
-   * @param {!UI.TextEditor} editor
+   * @param {!UI.TextEditor.TextEditor} editor
    */
   constructor(editor) {
     this._editor = editor;
   }
 
   /**
-   * @param {!UI.TextEditor} editor
-   * @return {!UI.AutocompleteConfig}
+   * @param {!UI.TextEditor.TextEditor} editor
+   * @return {!UI.SuggestBox.AutocompleteConfig}
    */
   static createConfigForEditor(editor) {
     const autocomplete = new JavaScriptAutocompleteConfig(editor);
@@ -696,12 +705,12 @@ export class JavaScriptAutocompleteConfig {
   /**
    * @param {number} lineNumber
    * @param {number} columnNumber
-   * @return {?TextUtils.TextRange}
+   * @return {?TextUtils.TextRange.TextRange}
    */
   _substituteRange(lineNumber, columnNumber) {
     const token = this._editor.tokenAtTextPosition(lineNumber, columnNumber);
     if (token && token.type === 'js-string') {
-      return new TextUtils.TextRange(lineNumber, token.startColumn, lineNumber, columnNumber);
+      return new TextUtils.TextRange.TextRange(lineNumber, token.startColumn, lineNumber, columnNumber);
     }
 
     const lineText = this._editor.line(lineNumber);
@@ -711,18 +720,19 @@ export class JavaScriptAutocompleteConfig {
         break;
       }
     }
-    return new TextUtils.TextRange(lineNumber, index + 1, lineNumber, columnNumber);
+    return new TextUtils.TextRange.TextRange(lineNumber, index + 1, lineNumber, columnNumber);
   }
 
   /**
-   * @param {!TextUtils.TextRange} queryRange
-   * @param {!TextUtils.TextRange} substituteRange
+   * @param {!TextUtils.TextRange.TextRange} queryRange
+   * @param {!TextUtils.TextRange.TextRange} substituteRange
    * @param {boolean=} force
    * @return {!Promise<!UI.SuggestBox.Suggestions>}
    */
   async _suggestionsCallback(queryRange, substituteRange, force) {
     const query = this._editor.text(queryRange);
-    const before = this._editor.text(new TextUtils.TextRange(0, 0, queryRange.startLine, queryRange.startColumn));
+    const before =
+        this._editor.text(new TextUtils.TextRange.TextRange(0, 0, queryRange.startLine, queryRange.startColumn));
     const token = this._editor.tokenAtTextPosition(substituteRange.startLine, substituteRange.startColumn);
     if (token) {
       const excludedTokens = new Set(['js-comment', 'js-string-2', 'js-def']);
@@ -753,7 +763,7 @@ export class JavaScriptAutocompleteConfig {
    * @return {!Promise<?Element>}
    */
   async _tooltipCallback(lineNumber, columnNumber) {
-    const before = this._editor.text(new TextUtils.TextRange(0, 0, lineNumber, columnNumber));
+    const before = this._editor.text(new TextUtils.TextRange.TextRange(0, 0, lineNumber, columnNumber));
     const result = await ObjectUI.javaScriptAutocomplete.argumentsHint(before);
     if (!result) {
       return null;
@@ -764,7 +774,7 @@ export class JavaScriptAutocompleteConfig {
       const argumentsElement = createElement('span');
       for (let i = 0; i < args.length; i++) {
         if (i === argumentIndex || (i < argumentIndex && args[i].startsWith('...'))) {
-          argumentsElement.appendChild(UI.html`<b>${args[i]}</b>`);
+          argumentsElement.appendChild(UI.Fragment.html`<b>${args[i]}</b>`);
         } else {
           argumentsElement.createTextChild(args[i]);
         }
@@ -772,7 +782,7 @@ export class JavaScriptAutocompleteConfig {
           argumentsElement.createTextChild(', ');
         }
       }
-      tooltip.appendChild(UI.html`<div class='source-code'>\u0192(${argumentsElement})</div>`);
+      tooltip.appendChild(UI.Fragment.html`<div class='source-code'>\u0192(${argumentsElement})</div>`);
     }
     return tooltip;
   }
diff --git a/front_end/object_ui/JavaScriptREPL.js b/front_end/object_ui/JavaScriptREPL.js
index 37c5fa641b..225b739cbf 100644
--- a/front_end/object_ui/JavaScriptREPL.js
+++ b/front_end/object_ui/JavaScriptREPL.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 SDK from '../sdk/sdk.js';
+
 import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 
 export class JavaScriptREPL {
@@ -47,7 +49,7 @@ export class JavaScriptREPL {
    * @return {!Promise<!{preview: !DocumentFragment, result: ?SDK.RuntimeModel.EvaluationResult}>}
    */
   static async evaluateAndBuildPreview(text, throwOnSideEffect, timeout, allowErrors, objectGroup) {
-    const executionContext = UI.context.flavor(SDK.ExecutionContext);
+    const executionContext = UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
     const maxLength = typeof self.ObjectUI.JavaScriptREPL._MaxLengthForEvaluation !== 'undefined' ?
         self.ObjectUI.JavaScriptREPL._MaxLengthForEvaluation :
         MaxLengthForEvaluation;
diff --git a/front_end/object_ui/ObjectPopoverHelper.js b/front_end/object_ui/ObjectPopoverHelper.js
index 52a393d8e1..c92307503e 100644
--- a/front_end/object_ui/ObjectPopoverHelper.js
+++ b/front_end/object_ui/ObjectPopoverHelper.js
@@ -28,12 +28,16 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Components from '../components/components.js';
+import * as SDK from '../sdk/sdk.js';
+import * as UI from '../ui/ui.js';
+
 import {CustomPreviewComponent} from './CustomPreviewComponent.js';
 import {ObjectPropertiesSection} from './ObjectPropertiesSection.js';
 
 export class ObjectPopoverHelper {
   /**
-   * @param {?Components.Linkifier} linkifier
+   * @param {?Components.Linkifier.Linkifier} linkifier
    * @param {boolean} resultHighlightedAsDOM
    */
   constructor(linkifier, resultHighlightedAsDOM) {
@@ -43,7 +47,7 @@ export class ObjectPopoverHelper {
 
   dispose() {
     if (this._resultHighlightedAsDOM) {
-      SDK.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
     if (this._linkifier) {
       this._linkifier.dispose();
@@ -51,8 +55,8 @@ export class ObjectPopoverHelper {
   }
 
   /**
-   * @param {!SDK.RemoteObject} result
-   * @param {!UI.GlassPane} popover
+   * @param {!SDK.RemoteObject.RemoteObject} result
+   * @param {!UI.GlassPane.GlassPane} popover
    * @return {!Promise<?ObjectPopoverHelper>}
    */
   static async buildObjectPopover(result, popover) {
@@ -62,7 +66,7 @@ export class ObjectPopoverHelper {
       let linkifier = null;
       let resultHighlightedAsDOM = false;
       if (result.subtype === 'node') {
-        SDK.OverlayModel.highlightObjectAsDOMNode(result);
+        SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(result);
         resultHighlightedAsDOM = true;
       }
 
@@ -72,25 +76,25 @@ export class ObjectPopoverHelper {
         popoverContentElement = customPreviewComponent.element;
       } else {
         popoverContentElement = createElementWithClass('div', 'object-popover-content');
-        UI.appendStyle(popoverContentElement, 'object_ui/objectPopover.css');
+        UI.Utils.appendStyle(popoverContentElement, 'object_ui/objectPopover.css');
         const titleElement = popoverContentElement.createChild('div', 'monospace object-popover-title');
         titleElement.createChild('span').textContent = description;
-        linkifier = new Components.Linkifier();
+        linkifier = new Components.Linkifier.Linkifier();
         const section = new ObjectPropertiesSection(
             result, '', linkifier, undefined, undefined, undefined, true /* showOverflow */);
         section.element.classList.add('object-popover-tree');
         section.titleLessMode();
         popoverContentElement.appendChild(section.element);
       }
-      popover.setMaxContentSize(new UI.Size(300, 250));
+      popover.setMaxContentSize(new UI.Geometry.Size(300, 250));
       popover.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactSize);
       popover.contentElement.appendChild(popoverContentElement);
       return new ObjectPopoverHelper(linkifier, resultHighlightedAsDOM);
     }
 
     popoverContentElement = createElement('span');
-    UI.appendStyle(popoverContentElement, 'object_ui/objectValue.css');
-    UI.appendStyle(popoverContentElement, 'object_ui/objectPopover.css');
+    UI.Utils.appendStyle(popoverContentElement, 'object_ui/objectValue.css');
+    UI.Utils.appendStyle(popoverContentElement, 'object_ui/objectPopover.css');
     const valueElement = popoverContentElement.createChild('span', 'monospace object-value-' + result.type);
     valueElement.style.whiteSpace = 'pre';
 
@@ -114,14 +118,14 @@ export class ObjectPopoverHelper {
     const container = createElementWithClass('div', 'object-popover-container');
     const title = container.createChild('div', 'function-popover-title source-code');
     const functionName = title.createChild('span', 'function-name');
-    functionName.textContent = UI.beautifyFunctionName(response.functionName);
+    functionName.textContent = UI.UIUtils.beautifyFunctionName(response.functionName);
 
     const rawLocation = response.location;
     const linkContainer = title.createChild('div', 'function-title-link-container');
     const sourceURL = rawLocation && rawLocation.script() && rawLocation.script().sourceURL;
     let linkifier = null;
     if (sourceURL) {
-      linkifier = new Components.Linkifier();
+      linkifier = new Components.Linkifier.Linkifier();
       linkContainer.appendChild(
           linkifier.linkifyRawLocation(/** @type {!SDK.DebuggerModel.Location} */ (rawLocation), sourceURL));
     }
diff --git a/front_end/object_ui/ObjectPropertiesSection.js b/front_end/object_ui/ObjectPropertiesSection.js
index c96e30d901..754fda00f0 100644
--- a/front_end/object_ui/ObjectPropertiesSection.js
+++ b/front_end/object_ui/ObjectPropertiesSection.js
@@ -24,6 +24,13 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import * as Common from '../common/common.js';
+import * as Components from '../components/components.js';  // eslint-disable-line no-unused-vars
+import * as Host from '../host/host.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 {CustomPreviewComponent} from './CustomPreviewComponent.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
@@ -31,14 +38,14 @@ import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObj
 /**
  * @unrestricted
  */
-export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
+export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow {
   /**
-   * @param {!SDK.RemoteObject} object
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {?string|!Element=} title
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} ignoreHasOwnProperty
-   * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
+   * @param {!Array.<!SDK.RemoteObject.RemoteObjectProperty>=} extraProperties
    * @param {boolean=} showOverflow
    */
   constructor(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, showOverflow) {
@@ -71,8 +78,8 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObject} object
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!SDK.RemoteObject.RemoteObject} object
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {boolean=} skipProto
    * @param {boolean=} readOnly
    * @return {!Element}
@@ -88,15 +95,15 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObject} object
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!SDK.RemoteObject.RemoteObject} object
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {boolean=} skipProto
    * @param {boolean=} readOnly
    * @return {!ObjectPropertiesSection}
    */
   static defaultObjectPropertiesSection(object, linkifier, skipProto, readOnly) {
     const titleElement = createElementWithClass('span', 'source-code');
-    const shadowRoot = UI.createShadowRootWithCoreStyles(titleElement, 'object_ui/objectValue.css');
+    const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(titleElement, 'object_ui/objectValue.css');
     const propertyValue =
         ObjectPropertiesSection.createPropertyValue(object, /* wasThrown */ false, /* showPreview */ true);
     shadowRoot.appendChild(propertyValue.element);
@@ -113,8 +120,8 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObjectProperty} propertyA
-   * @param {!SDK.RemoteObjectProperty} propertyB
+   * @param {!SDK.RemoteObject.RemoteObjectProperty} propertyA
+   * @param {!SDK.RemoteObject.RemoteObjectProperty} propertyB
    * @return {number}
    */
   static CompareProperties(propertyA, propertyB) {
@@ -160,17 +167,17 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
    */
   static createNameElement(name, isPrivate) {
     if (name === null) {
-      return UI.html`<span class="name"></span>`;
+      return UI.Fragment.html`<span class="name"></span>`;
     }
     if (/^\s|\s$|^$|\n/.test(name)) {
-      return UI.html`<span class="name">"${name.replace(/\n/g, '\u21B5')}"</span>`;
+      return UI.Fragment.html`<span class="name">"${name.replace(/\n/g, '\u21B5')}"</span>`;
     }
     if (isPrivate) {
-      return UI.html`<span class="name">
+      return UI.Fragment.html`<span class="name">
         <span class="private-property-hash">${name[0]}</span>${name.substring(1)}
       </span>`;
     }
-    return UI.html`<span class="name">${name}</span>`;
+    return UI.Fragment.html`<span class="name">${name}</span>`;
   }
 
   /**
@@ -267,11 +274,11 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObject} value
+   * @param {!SDK.RemoteObject.RemoteObject} value
    * @param {boolean} wasThrown
    * @param {boolean} showPreview
    * @param {!Element=} parentElement
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @return {!ObjectPropertyValue}
    */
   static createPropertyValueWithCustomSupport(value, wasThrown, showPreview, parentElement, linkifier) {
@@ -284,11 +291,11 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObject} value
+   * @param {!SDK.RemoteObject.RemoteObject} value
    * @param {boolean} wasThrown
    * @param {boolean} showPreview
    * @param {!Element=} parentElement
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @return {!ObjectPropertyValue}
    */
   static createPropertyValue(value, wasThrown, showPreview, parentElement, linkifier) {
@@ -335,7 +342,7 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
 
     if (wasThrown) {
       const wrapperElement = createElementWithClass('span', 'error value');
-      wrapperElement.appendChild(UI.formatLocalized('[Exception: %s]', [propertyValue.element]));
+      wrapperElement.appendChild(UI.UIUtils.formatLocalized('[Exception: %s]', [propertyValue.element]));
       propertyValue.element = wrapperElement;
     }
     propertyValue.element.classList.add('value');
@@ -346,7 +353,7 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
      */
     function createUnknownInternalLocationElement() {
       const valueElement = createElementWithClass('span');
-      valueElement.textContent = '<' + Common.UIString('unknown') + '>';
+      valueElement.textContent = '<' + Common.UIString.UIString('unknown') + '>';
       valueElement.title = description || '';
       return valueElement;
     }
@@ -381,8 +388,9 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
         Common.Revealer.reveal(value);
         event.consume(true);
       }, false);
-      valueElement.addEventListener('mousemove', () => SDK.OverlayModel.highlightObjectAsDOMNode(value), false);
-      valueElement.addEventListener('mouseleave', () => SDK.OverlayModel.hideDOMNodeHighlight(), false);
+      valueElement.addEventListener(
+          'mousemove', () => SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(value), false);
+      valueElement.addEventListener('mouseleave', () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(), false);
       return valueElement;
     }
 
@@ -401,7 +409,7 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObject} func
+   * @param {!SDK.RemoteObject.RemoteObject} func
    * @param {!Element} element
    * @param {boolean} linkify
    * @param {boolean=} includePreview
@@ -431,8 +439,8 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @param {!SDK.RemoteObjectProperty} property
-   * @param {!SDK.RemoteObjectProperty=} parentProperty
+   * @param {!SDK.RemoteObject.RemoteObjectProperty} property
+   * @param {!SDK.RemoteObject.RemoteObjectProperty=} parentProperty
    * @return {boolean}
    */
   static _isDisplayableProperty(property, parentProperty) {
@@ -460,7 +468,7 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   /**
-   * @return {!UI.TreeElement}
+   * @return {!UI.TreeOutline.TreeElement}
    */
   objectTreeElement() {
     return this._objectTreeElement;
@@ -471,9 +479,9 @@ export class ObjectPropertiesSection extends UI.TreeOutlineInShadow {
   }
 
   _contextMenuEventFired(event) {
-    const contextMenu = new UI.ContextMenu(event);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this._object);
-    if (this._object instanceof SDK.LocalJSONObject) {
+    if (this._object instanceof SDK.RemoteObject.LocalJSONObject) {
       contextMenu.viewSection().appendItem(
           ls`Expand recursively`,
           this._objectTreeElement.expandRecursively.bind(this._objectTreeElement, Number.MAX_VALUE));
@@ -496,7 +504,7 @@ const _arrayLoadThreshold = 100;
 /** @const */
 export const maxRenderableStringLength = 10000;
 
-export class ObjectPropertiesSectionsTreeOutline extends UI.TreeOutlineInShadow {
+export class ObjectPropertiesSectionsTreeOutline extends UI.TreeOutline.TreeOutlineInShadow {
   /**
    * @param {?ObjectUI.ObjectPropertiesSectionsTreeOutlineOptions=} options
    */
@@ -514,13 +522,13 @@ export class ObjectPropertiesSectionsTreeOutline extends UI.TreeOutlineInShadow
 /**
  * @unrestricted
  */
-export class RootElement extends UI.TreeElement {
+export class RootElement extends UI.TreeOutline.TreeElement {
   /**
-   * @param {!SDK.RemoteObject} object
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!SDK.RemoteObject.RemoteObject} object
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} ignoreHasOwnProperty
-   * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
+   * @param {!Array.<!SDK.RemoteObject.RemoteObjectProperty>=} extraProperties
    */
   constructor(object, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties) {
     const contentElement = createElement('slot');
@@ -579,10 +587,10 @@ export class RootElement extends UI.TreeElement {
 /**
  * @unrestricted
  */
-export class ObjectPropertyTreeElement extends UI.TreeElement {
+export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   /**
-   * @param {!SDK.RemoteObjectProperty} property
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!SDK.RemoteObject.RemoteObjectProperty} property
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    */
   constructor(property, linkifier) {
     // Pass an empty title, the title gets made later in onattach.
@@ -597,14 +605,14 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeElement
-   * @param {!SDK.RemoteObject} value
+   * @param {!UI.TreeOutline.TreeElement} treeElement
+   * @param {!SDK.RemoteObject.RemoteObject} value
    * @param {boolean} skipProto
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} flattenProtoChain
-   * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
-   * @param {!SDK.RemoteObject=} targetValue
+   * @param {!Array.<!SDK.RemoteObject.RemoteObjectProperty>=} extraProperties
+   * @param {!SDK.RemoteObject.RemoteObject=} targetValue
    * @return {!Promise}
    */
   static async _populate(
@@ -619,7 +627,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
     if (flattenProtoChain) {
       allProperties = await value.getAllProperties(false /* accessorPropertiesOnly */, true /* generatePreview */);
     } else {
-      allProperties = await SDK.RemoteObject.loadFromObjectPerProto(value, true /* generatePreview */);
+      allProperties = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(value, true /* generatePreview */);
     }
     const properties = allProperties.properties;
     const internalProperties = allProperties.internalProperties;
@@ -638,12 +646,12 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
-   * @param {!Array.<!SDK.RemoteObjectProperty>} properties
-   * @param {?Array.<!SDK.RemoteObjectProperty>} internalProperties
+   * @param {!UI.TreeOutline.TreeElement} treeNode
+   * @param {!Array.<!SDK.RemoteObject.RemoteObjectProperty>} properties
+   * @param {?Array.<!SDK.RemoteObject.RemoteObjectProperty>} internalProperties
    * @param {boolean} skipProto
-   * @param {?SDK.RemoteObject} value
-   * @param {!Components.Linkifier=} linkifier
+   * @param {?SDK.RemoteObject.RemoteObject} value
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    */
   static populateWithProperties(
@@ -680,12 +688,14 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
       }
 
       if (property.isOwn && property.getter) {
-        const getterProperty = new SDK.RemoteObjectProperty('get ' + property.name, property.getter, false);
+        const getterProperty =
+            new SDK.RemoteObject.RemoteObjectProperty('get ' + property.name, property.getter, false);
         getterProperty.parentObject = value;
         tailProperties.push(getterProperty);
       }
       if (property.isOwn && property.setter) {
-        const setterProperty = new SDK.RemoteObjectProperty('set ' + property.name, property.setter, false);
+        const setterProperty =
+            new SDK.RemoteObject.RemoteObjectProperty('set ' + property.name, property.setter, false);
         setterProperty.parentObject = value;
         tailProperties.push(setterProperty);
       }
@@ -714,7 +724,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
+   * @param {!UI.TreeOutline.TreeElement} treeNode
    * @param {?string=} emptyPlaceholder
    */
   static _appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder) {
@@ -722,26 +732,26 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
       return;
     }
     const title = createElementWithClass('div', 'gray-info-message');
-    title.textContent = emptyPlaceholder || Common.UIString('No properties');
-    const infoElement = new UI.TreeElement(title);
+    title.textContent = emptyPlaceholder || Common.UIString.UIString('No properties');
+    const infoElement = new UI.TreeOutline.TreeElement(title);
     treeNode.appendChild(infoElement);
   }
 
   /**
-   * @param {?SDK.RemoteObject} object
+   * @param {?SDK.RemoteObject.RemoteObject} object
    * @param {!Array.<string>} propertyPath
-   * @param {function(!SDK.CallFunctionResult)} callback
+   * @param {function(!SDK.RemoteObject.CallFunctionResult)} callback
    * @return {!Element}
    */
   static createRemoteObjectAccessorPropertySpan(object, propertyPath, callback) {
     const rootElement = createElement('span');
     const element = rootElement.createChild('span');
-    element.textContent = Common.UIString('(...)');
+    element.textContent = Common.UIString.UIString('(...)');
     if (!object) {
       return rootElement;
     }
     element.classList.add('object-value-calculate-value-button');
-    element.title = Common.UIString('Invoke property getter');
+    element.title = Common.UIString.UIString('Invoke property getter');
     element.addEventListener('click', onInvokeGetterClick, false);
 
     function onInvokeGetterClick(event) {
@@ -772,7 +782,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
    * @return {boolean}
    */
   setSearchRegex(regex, additionalCssClassName) {
-    let cssClasses = UI.highlightedSearchResultClassName;
+    let cssClasses = UI.UIUtils.highlightedSearchResultClassName;
     if (additionalCssClassName) {
       cssClasses += ' ' + additionalCssClassName;
     }
@@ -798,16 +808,16 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
     regex.lastIndex = 0;
     let match = regex.exec(content);
     while (match) {
-      ranges.push(new TextUtils.SourceRange(match.index, match[0].length));
+      ranges.push(new TextUtils.TextRange.SourceRange(match.index, match[0].length));
       match = regex.exec(content);
     }
     if (ranges.length) {
-      UI.highlightRangesWithStyleClass(element, ranges, cssClassName, this._highlightChanges);
+      UI.UIUtils.highlightRangesWithStyleClass(element, ranges, cssClassName, this._highlightChanges);
     }
   }
 
   revertHighlightChanges() {
-    UI.revertDomChanges(this._highlightChanges);
+    UI.UIUtils.revertDomChanges(this._highlightChanges);
     this._highlightChanges = [];
   }
 
@@ -816,7 +826,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
    * @returns {!Promise}
    */
   async onpopulate() {
-    const propertyValue = /** @type {!SDK.RemoteObject} */ (this.property.value);
+    const propertyValue = /** @type {!SDK.RemoteObject.RemoteObject} */ (this.property.value);
     console.assert(propertyValue);
     const skipProto = this.treeOutline ? this.treeOutline._skipProto : true;
     const targetValue = this.property.name !== '__proto__' ? propertyValue : this.property.parentObject;
@@ -887,7 +897,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!SDK.RemoteObject} value
+   * @param {!SDK.RemoteObject.RemoteObject} value
    * @return {?Element}
    */
   _createExpandedValueElement(value) {
@@ -932,8 +942,8 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
           this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
     } else {
       this.valueElement = createElementWithClass('span', 'object-value-undefined');
-      this.valueElement.textContent = Common.UIString('<unreadable>');
-      this.valueElement.title = Common.UIString('No property getter');
+      this.valueElement.textContent = Common.UIString.UIString('<unreadable>');
+      this.valueElement.title = Common.UIString.UIString('No property getter');
     }
 
     const valueText = this.valueElement.textContent;
@@ -943,9 +953,10 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
 
     this.listItemElement.removeChildren();
     if (isInternalEntries) {
-      this._rowContainer = UI.html`<span class='name-and-value'>${this.nameElement}</span>`;
+      this._rowContainer = UI.Fragment.html`<span class='name-and-value'>${this.nameElement}</span>`;
     } else {
-      this._rowContainer = UI.html`<span class='name-and-value'>${this.nameElement}: ${this.valueElement}</span>`;
+      this._rowContainer =
+          UI.Fragment.html`<span class='name-and-value'>${this.nameElement}: ${this.valueElement}</span>`;
     }
     this.listItemElement.appendChild(this._rowContainer);
   }
@@ -982,7 +993,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
    * @param {!Event} event
    */
   _contextMenuFired(event) {
-    const contextMenu = new UI.ContextMenu(event);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this);
     if (this.property.symbol) {
       contextMenu.appendApplicableItems(this.property.symbol);
@@ -991,11 +1002,11 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
       contextMenu.appendApplicableItems(this.property.value);
     }
     if (!this.property.synthetic && this.nameElement && this.nameElement.title) {
-      const copyPathHandler =
-          Host.InspectorFrontendHost.copyText.bind(Host.InspectorFrontendHost, this.nameElement.title);
+      const copyPathHandler = Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance, this.nameElement.title);
       contextMenu.clipboardSection().appendItem(ls`Copy property path`, copyPathHandler);
     }
-    if (this.property.parentObject instanceof SDK.LocalJSONObject) {
+    if (this.property.parentObject instanceof SDK.RemoteObject.LocalJSONObject) {
       contextMenu.viewSection().appendItem(ls`Expand recursively`, this.expandRecursively.bind(this, Number.MAX_VALUE));
       contextMenu.viewSection().appendItem(ls`Collapse children`, this.collapseChildren.bind(this));
     }
@@ -1017,7 +1028,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
       text = `"${text}"`;
     }
 
-    this._editableDiv.setTextContentTruncatedIfNeeded(text, Common.UIString('<string is too large to edit>'));
+    this._editableDiv.setTextContentTruncatedIfNeeded(text, Common.UIString.UIString('<string is too large to edit>'));
     const originalContent = this._editableDiv.textContent;
 
     // Lie about our children to prevent expanding on double click and to collapse subproperties.
@@ -1085,7 +1096,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
    * @param {string} expression
    */
   async _applyExpression(expression) {
-    const property = SDK.RemoteObject.toCallArgument(this.property.symbol || this.property.name);
+    const property = SDK.RemoteObject.RemoteObject.toCallArgument(this.property.symbol || this.property.name);
     expression = JavaScriptREPL.wrapObjectLiteral(expression.trim());
 
     if (this.property.synthetic) {
@@ -1123,7 +1134,7 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!SDK.CallFunctionResult} result
+   * @param {!SDK.RemoteObject.CallFunctionResult} result
    */
   _onInvokeGetterClick(result) {
     if (!result.object) {
@@ -1158,13 +1169,13 @@ export class ObjectPropertyTreeElement extends UI.TreeElement {
 /**
  * @unrestricted
  */
-export class ArrayGroupingTreeElement extends UI.TreeElement {
+export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   /**
-   * @param {!SDK.RemoteObject} object
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {number} propertyCount
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    */
   constructor(object, fromIndex, toIndex, propertyCount, linkifier) {
     super(String.sprintf('[%d \u2026 %d]', fromIndex, toIndex), true);
@@ -1178,11 +1189,11 @@ export class ArrayGroupingTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
-   * @param {!SDK.RemoteObject} object
+   * @param {!UI.TreeOutline.TreeElement} treeNode
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @returns {!Promise}
    */
   static async _populateArray(treeNode, object, fromIndex, toIndex, linkifier) {
@@ -1190,12 +1201,12 @@ export class ArrayGroupingTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
-   * @param {!SDK.RemoteObject} object
+   * @param {!UI.TreeOutline.TreeElement} treeNode
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {boolean} topLevel
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @this {ArrayGroupingTreeElement}
    * @returns {!Promise}
    */
@@ -1317,11 +1328,11 @@ export class ArrayGroupingTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
-   * @param {!SDK.RemoteObject} object
+   * @param {!UI.TreeOutline.TreeElement} treeNode
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @return {!Promise}
    * @this {ArrayGroupingTreeElement}
    */
@@ -1378,10 +1389,10 @@ export class ArrayGroupingTreeElement extends UI.TreeElement {
   }
 
   /**
-   * @param {!UI.TreeElement} treeNode
-   * @param {!SDK.RemoteObject} object
+   * @param {!UI.TreeOutline.TreeElement} treeNode
+   * @param {!SDK.RemoteObject.RemoteObject} object
    * @param {boolean} skipGetOwnPropertyNames
-   * @param {!Components.Linkifier=} linkifier
+   * @param {!Components.Linkifier.Linkifier=} linkifier
    * @return {!Promise<undefined>}
    * @this {ArrayGroupingTreeElement}
    */
@@ -1463,7 +1474,7 @@ ArrayGroupingTreeElement._getOwnPropertyNamesThreshold = 500000;
 /**
  * @unrestricted
  */
-export class ObjectPropertyPrompt extends UI.TextPrompt {
+export class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {
   constructor() {
     super();
     this.initialize(
@@ -1476,7 +1487,7 @@ export class ObjectPropertyPrompt extends UI.TextPrompt {
  */
 export class ObjectPropertiesSectionsTreeExpandController {
   /**
-   * @param {!UI.TreeOutline} treeOutline
+   * @param {!UI.TreeOutline.TreeOutline} treeOutline
    */
   constructor(treeOutline) {
     /** @type {!Set.<string>} */
@@ -1513,7 +1524,7 @@ export class ObjectPropertiesSectionsTreeExpandController {
    * @param {!Common.Event} event
    */
   _elementAttached(event) {
-    const element = /** @type {!UI.TreeElement} */ (event.data);
+    const element = /** @type {!UI.TreeOutline.TreeElement} */ (event.data);
     if (element.isExpandable() && this._expandedProperties.has(this._propertyPath(element))) {
       element.expand();
     }
@@ -1523,7 +1534,7 @@ export class ObjectPropertiesSectionsTreeExpandController {
    * @param {!Common.Event} event
    */
   _elementExpanded(event) {
-    const element = /** @type {!UI.TreeElement} */ (event.data);
+    const element = /** @type {!UI.TreeOutline.TreeElement} */ (event.data);
     this._expandedProperties.add(this._propertyPath(element));
   }
 
@@ -1531,12 +1542,12 @@ export class ObjectPropertiesSectionsTreeExpandController {
    * @param {!Common.Event} event
    */
   _elementCollapsed(event) {
-    const element = /** @type {!UI.TreeElement} */ (event.data);
+    const element = /** @type {!UI.TreeOutline.TreeElement} */ (event.data);
     this._expandedProperties.delete(this._propertyPath(element));
   }
 
   /**
-   * @param {!UI.TreeElement} treeElement
+   * @param {!UI.TreeOutline.TreeElement} treeElement
    * @return {string}
    */
   _propertyPath(treeElement) {
@@ -1574,17 +1585,17 @@ ObjectPropertiesSectionsTreeExpandController._cachedPathSymbol = Symbol('cachedP
 ObjectPropertiesSectionsTreeExpandController._treeOutlineId = Symbol('treeOutlineId');
 
 /**
- * @implements {UI.Renderer}
+ * @implements {UI.UIUtils.Renderer}
  */
 export class Renderer {
   /**
    * @override
    * @param {!Object} object
-   * @param {!UI.Renderer.Options=} options
-   * @return {!Promise<?{node: !Node, tree: ?UI.TreeOutline}>}
+   * @param {!UI.UIUtils.Options=} options
+   * @return {!Promise<?{node: !Node, tree: ?UI.TreeOutline.TreeOutline}>}
    */
   render(object, options) {
-    if (!(object instanceof SDK.RemoteObject)) {
+    if (!(object instanceof SDK.RemoteObject.RemoteObject)) {
       return Promise.reject(new Error('Can\'t render ' + object));
     }
     options = options || {};
@@ -1595,7 +1606,7 @@ export class Renderer {
     }
     section.editable = !!options.editable;
     return Promise.resolve(
-        /** @type {?{node: !Node, tree: ?UI.TreeOutline}} */ ({node: section.element, tree: section}));
+        /** @type {?{node: !Node, tree: ?UI.TreeOutline.TreeOutline}} */ ({node: section.element, tree: section}));
   }
 }
 
@@ -1613,7 +1624,7 @@ export class ObjectPropertyValue {
   /**
    * @override
    * @param {!Event} event
-   * @param {!UI.ContextMenu} contextMenu
+   * @param {!UI.ContextMenu.ContextMenu} contextMenu
    * @param {!Object} object
    */
   appendApplicableItems(event, contextMenu, object) {
@@ -1670,7 +1681,7 @@ export class ExpandableTextPropertyValue extends ObjectPropertyValue {
   /**
    * @override
    * @param {!Event} event
-   * @param {!UI.ContextMenu} contextMenu
+   * @param {!UI.ContextMenu.ContextMenu} contextMenu
    * @param {!Object} object
    */
   appendApplicableItems(event, contextMenu, object) {
@@ -1694,6 +1705,6 @@ export class ExpandableTextPropertyValue extends ObjectPropertyValue {
   }
 
   _copyText() {
-    Host.InspectorFrontendHost.copyText(this._text);
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this._text);
   }
 }
diff --git a/front_end/object_ui/RemoteObjectPreviewFormatter.js b/front_end/object_ui/RemoteObjectPreviewFormatter.js
index ef4e18d8cd..0911624902 100644
--- a/front_end/object_ui/RemoteObjectPreviewFormatter.js
+++ b/front_end/object_ui/RemoteObjectPreviewFormatter.js
@@ -1,6 +1,11 @@
 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
+import * as Common from '../common/common.js';
+
+import * as SDK from '../sdk/sdk.js';
+
 /**
  * @unrestricted
  */
@@ -51,9 +56,9 @@ export class RemoteObjectPreviewFormatter {
     if (description) {
       let text;
       if (isArrayOrTypedArray) {
-        const arrayLength = SDK.RemoteObject.arrayLength(preview);
+        const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
         const arrayLengthText = arrayLength > 1 ? ('(' + arrayLength + ')') : '';
-        const arrayName = SDK.RemoteObject.arrayNameFromDescription(description);
+        const arrayName = SDK.RemoteObject.RemoteObject.arrayNameFromDescription(description);
         text = arrayName === 'Array' ? arrayLengthText : (arrayName + arrayLengthText);
       } else {
         const hideDescription = description === 'Object';
@@ -135,7 +140,7 @@ export class RemoteObjectPreviewFormatter {
    * @param {!Protocol.Runtime.ObjectPreview} preview
    */
   _appendArrayPropertiesPreview(parentElement, preview) {
-    const arrayLength = SDK.RemoteObject.arrayLength(preview);
+    const arrayLength = SDK.RemoteObject.RemoteObject.arrayLength(preview);
     const indexProperties = preview.properties.filter(p => toArrayIndex(p.name) !== -1).sort(arrayEntryComparator);
     const otherProperties = preview.properties.filter(p => toArrayIndex(p.name) === -1)
                                 .sort(RemoteObjectPreviewFormatter._objectPropertyComparator);
@@ -210,7 +215,8 @@ export class RemoteObjectPreviewFormatter {
     function appendUndefined(index) {
       const span = parentElement.createChild('span', 'object-value-undefined');
       const count = index - lastNonEmptyArrayIndex - 1;
-      span.textContent = count !== 1 ? Common.UIString('empty × %d', count) : Common.UIString('empty');
+      span.textContent =
+          count !== 1 ? Common.UIString.UIString('empty × %d', count) : Common.UIString.UIString('empty');
       elementsAdded = true;
     }
   }
@@ -266,7 +272,7 @@ export class RemoteObjectPreviewFormatter {
 
     if (type === 'accessor') {
       span.textContent = '(...)';
-      span.title = Common.UIString('The property is computed with a getter');
+      span.title = Common.UIString.UIString('The property is computed with a getter');
       return span;
     }
 
diff --git a/front_end/sdk/DebuggerModel.js b/front_end/sdk/DebuggerModel.js
index 54626fc44a..26720571d6 100644
--- a/front_end/sdk/DebuggerModel.js
+++ b/front_end/sdk/DebuggerModel.js
@@ -1571,3 +1571,6 @@ export class DebuggerPausedDetails {
 }
 
 SDKModel.register(DebuggerModel, Capability.JS, true);
+
+/** @typedef {{location: ?Location, functionName: string}} */
+export let FunctionDetails;
diff --git a/front_end/sdk/RemoteObject.js b/front_end/sdk/RemoteObject.js
index a803436986..d86f2ef8f5 100644
--- a/front_end/sdk/RemoteObject.js
+++ b/front_end/sdk/RemoteObject.js
@@ -1350,3 +1350,8 @@ const UnserializableNumber = {
   Infinity: /** @type {!Protocol.Runtime.UnserializableValue} */ ('Infinity'),
   NegativeInfinity: /** @type {!Protocol.Runtime.UnserializableValue} */ ('-Infinity')
 };
+
+/**
+ * @typedef {{object: ?RemoteObject, wasThrown: (boolean|undefined)}}
+ */
+export let CallFunctionResult;
diff --git a/front_end/sdk/RuntimeModel.js b/front_end/sdk/RuntimeModel.js
index 019e2cd687..61470b3557 100644
--- a/front_end/sdk/RuntimeModel.js
+++ b/front_end/sdk/RuntimeModel.js
@@ -868,3 +868,11 @@ export class ExecutionContext {
 }
 
 SDKModel.register(RuntimeModel, Capability.JS, true);
+
+/** @typedef {{
+ *    object: (!RemoteObject|undefined),
+ *    exceptionDetails: (!Protocol.Runtime.ExceptionDetails|undefined),
+ *    error: (!Protocol.Error|undefined)}
+ *  }}
+ */
+export let EvaluationResult;
diff --git a/front_end/ui/SuggestBox.js b/front_end/ui/SuggestBox.js
index 0ca38ea1b5..df793d0bc3 100644
--- a/front_end/ui/SuggestBox.js
+++ b/front_end/ui/SuggestBox.js
@@ -389,3 +389,34 @@ export class SuggestBox {
     return hasSelectedItem;
   }
 }
+
+/**
+ * @typedef {{
+  *      text: string,
+  *      title: (string|undefined),
+  *      subtitle: (string|undefined),
+  *      iconType: (string|undefined),
+  *      priority: (number|undefined),
+  *      isSecondary: (boolean|undefined),
+  *      subtitleRenderer: (function():!Element|undefined),
+  *      selectionRange: ({startColumn: number, endColumn: number}|undefined),
+  *      hideGhostText: (boolean|undefined)
+  * }}
+  */
+export let Suggestion;
+
+/**
+  * @typedef {!Array<!Suggestion>}
+  */
+export let Suggestions;
+
+/**
+  * @typedef {{
+    *     substituteRangeCallback: ((function(number, number):?TextUtils.TextRange)|undefined),
+    *     tooltipCallback: ((function(number, number):!Promise<?Element>)|undefined),
+    *     suggestionsCallback: ((function(!TextUtils.TextRange, !TextUtils.TextRange, boolean=):?Promise.<!Suggestions>)|undefined),
+    *     isWordChar: ((function(string):boolean)|undefined),
+    *     anchorBehavior: (UI.GlassPane.AnchorBehavior|undefined)
+    * }}
+    */
+export let AutocompleteConfig;
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index 0e22916018..fe8edcdf3c 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -2165,3 +2165,6 @@ export function formatTimestamp(timestamp, full) {
     return valueString.padStart(length, '0');
   }
 }
+
+/** @typedef {!{title: (string|!Element|undefined), editable: (boolean|undefined) }} */
+export let Options;
diff --git a/scripts/localization/utils/localization_utils.js b/scripts/localization/utils/localization_utils.js
index bac6d5ab42..dd530a98f8 100644
--- a/scripts/localization/utils/localization_utils.js
+++ b/scripts/localization/utils/localization_utils.js
@@ -82,7 +82,8 @@ function isNodeCommonUIStringFormat(node) {
 }
 
 function isNodeUIformatLocalized(node) {
-  return isNodeCallOnObject(node, 'UI', 'formatLocalized');
+  return isNodeCallOnObject(node, 'UI', 'formatLocalized') ||
+      isNodeCallOnNestedObject(node, 'UI', 'UIUtils', 'formatLocalized');
 }
 
 function isNodelsTaggedTemplateExpression(node) {