diff --git a/front_end/accessibility/AccessibilitySidebarView.js b/front_end/accessibility/AccessibilitySidebarView.js
index a1e0e8541f..62336e63a2 100644
--- a/front_end/accessibility/AccessibilitySidebarView.js
+++ b/front_end/accessibility/AccessibilitySidebarView.js
@@ -34,7 +34,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
       this._sidebarPaneStack.showView(this._sourceOrderSubPane);
     }
     this._sidebarPaneStack.widget().show(this.element);
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._pullNode, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this._pullNode, this);
     this._pullNode();
   }
 
@@ -147,7 +147,7 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
       this._skipNextPullNode = false;
       return;
     }
-    this.setNode(self.UI.context.flavor(SDK.DOMModel.DOMNode));
+    this.setNode(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
   }
 
   /**
diff --git a/front_end/animation/AnimationTimeline.js b/front_end/animation/AnimationTimeline.js
index 35bdd77fe9..c857246d1b 100644
--- a/front_end/animation/AnimationTimeline.js
+++ b/front_end/animation/AnimationTimeline.js
@@ -49,7 +49,7 @@ export class AnimationTimeline extends UI.Widget.VBox {
     SDK.SDKModel.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
     SDK.SDKModel.TargetManager.instance().observeModels(AnimationModel, this);
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._nodeChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this._nodeChanged, this);
   }
 
   /**
@@ -871,7 +871,8 @@ export class NodeUI {
 
   _nodeChanged() {
     this.element.classList.toggle(
-        'animation-node-selected', this._node && this._node === self.UI.context.flavor(SDK.DOMModel.DOMNode));
+        'animation-node-selected',
+        this._node && this._node === UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
   }
 }
 
diff --git a/front_end/browser_debugger/DOMBreakpointsSidebarPane.js b/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
index 346d25c0dc..055f4762e6 100644
--- a/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
+++ b/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
@@ -276,7 +276,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   _update() {
-    const details = self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (this._highlightedBreakpoint) {
       const oldHighlightedBreakpoint = this._highlightedBreakpoint;
       delete this._highlightedBreakpoint;
diff --git a/front_end/browser_debugger/EventListenerBreakpointsSidebarPane.js b/front_end/browser_debugger/EventListenerBreakpointsSidebarPane.js
index ff01361b6f..5ae2c5c4e8 100644
--- a/front_end/browser_debugger/EventListenerBreakpointsSidebarPane.js
+++ b/front_end/browser_debugger/EventListenerBreakpointsSidebarPane.js
@@ -40,7 +40,7 @@ export class EventListenerBreakpointsSidebarPane extends UI.Widget.VBox {
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this._update, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this._update, this);
-    self.UI.context.addFlavorChangeListener(SDK.SDKModel.Target, this._update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.SDKModel.Target, this._update, this);
   }
 
   /**
@@ -97,7 +97,7 @@ export class EventListenerBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   _update() {
-    const target = self.UI.context.flavor(SDK.SDKModel.Target);
+    const target = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;
 
diff --git a/front_end/browser_debugger/ObjectEventListenersSidebarPane.js b/front_end/browser_debugger/ObjectEventListenersSidebarPane.js
index 26d307cef9..ddbef6d7fd 100644
--- a/front_end/browser_debugger/ObjectEventListenersSidebarPane.js
+++ b/front_end/browser_debugger/ObjectEventListenersSidebarPane.js
@@ -37,7 +37,7 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox {
       this._lastRequestedContext.runtimeModel.releaseObjectGroup(objectGroupName);
       delete this._lastRequestedContext;
     }
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       this._eventListenersView.reset();
       this._eventListenersView.addEmptyHolderIfNeeded();
@@ -53,7 +53,7 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox {
    */
   wasShown() {
     super.wasShown();
-    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
     this._refreshButton.setEnabled(true);
     this.update();
   }
@@ -63,7 +63,7 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox {
    */
   willHide() {
     super.willHide();
-    self.UI.context.removeFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
     this._refreshButton.setEnabled(false);
   }
 
diff --git a/front_end/browser_debugger/XHRBreakpointsSidebarPane.js b/front_end/browser_debugger/XHRBreakpointsSidebarPane.js
index 2fe65b81b1..07ae4942a0 100644
--- a/front_end/browser_debugger/XHRBreakpointsSidebarPane.js
+++ b/front_end/browser_debugger/XHRBreakpointsSidebarPane.js
@@ -344,7 +344,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
     this._list.element.classList.toggle('hidden', isEmpty);
     this._emptyElement.classList.toggle('hidden', !isEmpty);
 
-    const details = self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (!details || details.reason !== SDK.DebuggerModel.BreakReason.XHR) {
       if (this._hitBreakpoint) {
         const oldHitBreakpoint = this._hitBreakpoint;
diff --git a/front_end/console/ConsoleContextSelector.js b/front_end/console/ConsoleContextSelector.js
index 9254a82525..35614bdfd2 100644
--- a/front_end/console/ConsoleContextSelector.js
+++ b/front_end/console/ConsoleContextSelector.js
@@ -41,9 +41,10 @@ export class ConsoleContextSelector {
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this._frameNavigated,
         this);
 
-    self.UI.context.addFlavorChangeListener(
+    UI.Context.Context.instance().addFlavorChangeListener(
         SDK.RuntimeModel.ExecutionContext, this._executionContextChangedExternally, this);
-    self.UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameSelectedInUI, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        SDK.DebuggerModel.CallFrame, this._callFrameSelectedInUI, this);
     SDK.SDKModel.TargetManager.instance().observeModels(SDK.RuntimeModel.RuntimeModel, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.CallFrameSelected, this._callFrameSelectedInModel,
@@ -136,7 +137,7 @@ export class ConsoleContextSelector {
   _executionContextCreated(executionContext) {
     this._items.insertWithComparator(executionContext, executionContext.runtimeModel.executionContextComparator());
 
-    if (executionContext === self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext)) {
+    if (executionContext === UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext)) {
       this._dropDown.selectItem(executionContext);
     }
   }
@@ -299,14 +300,14 @@ export class ConsoleContextSelector {
     this._toolbarItem.element.classList.toggle('warning', !this._isTopContext(item) && this._hasTopContext());
     const title = item ? ls`JavaScript context: ${this.titleFor(item)}` : ls`JavaScript context: Not selected`;
     this._toolbarItem.setTitle(title);
-    self.UI.context.setFlavor(SDK.RuntimeModel.ExecutionContext, item);
+    UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, item);
   }
 
   _callFrameSelectedInUI() {
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     const callFrameContext = callFrame && callFrame.script.executionContext();
     if (callFrameContext) {
-      self.UI.context.setFlavor(SDK.RuntimeModel.ExecutionContext, callFrameContext);
+      UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, callFrameContext);
     }
   }
 
diff --git a/front_end/console/ConsolePanel.js b/front_end/console/ConsolePanel.js
index 6c930a1fc1..cf8affdcab 100644
--- a/front_end/console/ConsolePanel.js
+++ b/front_end/console/ConsolePanel.js
@@ -52,7 +52,7 @@ export class ConsolePanel extends UI.Panel.Panel {
 
   static _updateContextFlavor() {
     const consoleView = ConsolePanel.instance()._view;
-    self.UI.context.setFlavor(ConsoleView, consoleView.isShowing() ? consoleView : null);
+    UI.Context.Context.instance().setFlavor(ConsoleView, consoleView.isShowing() ? consoleView : null);
   }
 
   /**
diff --git a/front_end/console/ConsolePinPane.js b/front_end/console/ConsolePinPane.js
index 8133d8a8c5..05c1f7ca39 100644
--- a/front_end/console/ConsolePinPane.js
+++ b/front_end/console/ConsolePinPane.js
@@ -258,7 +258,7 @@ export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
     const isEditing = this._pinElement.hasFocus();
     const throwOnSideEffect = isEditing && text !== this._committedExpression;
     const timeout = throwOnSideEffect ? 250 : undefined;
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         text, throwOnSideEffect, timeout, !isEditing /* allowErrors */, 'console');
     if (this._lastResult && this._lastExecutionContext) {
diff --git a/front_end/console/ConsolePrompt.js b/front_end/console/ConsolePrompt.js
index e740276a40..78abeed9f7 100644
--- a/front_end/console/ConsolePrompt.js
+++ b/front_end/console/ConsolePrompt.js
@@ -125,7 +125,7 @@ export class ConsolePrompt extends UI.Widget.Widget {
    */
   async _requestPreview() {
     const text = this._editor.textWithCurrentSuggestion().trim();
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const {preview, result} =
         await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(text, true /* throwOnSideEffect */, 500);
     this._innerPreviewElement.removeChildren();
@@ -326,7 +326,7 @@ export class ConsolePrompt extends UI.Widget.Widget {
    */
   async _appendCommand(text, useCommandLineAPI) {
     this.setText('');
-    const currentExecutionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
       const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
diff --git a/front_end/console/ConsoleView.js b/front_end/console/ConsoleView.js
index d2f020b86d..1ced3cff1d 100644
--- a/front_end/console/ConsoleView.js
+++ b/front_end/console/ConsoleView.js
@@ -258,7 +258,8 @@ export class ConsoleView extends UI.Widget.VBox {
 
     this._registerWithMessageSink();
 
-    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this._executionContextChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        SDK.RuntimeModel.ExecutionContext, this._executionContextChanged, this);
 
     this._messagesElement.addEventListener(
         'mousedown', event => this._updateStickToBottomOnPointerDown(event.button === 2), false);
@@ -1374,7 +1375,8 @@ export class ConsoleViewFilter {
     this._messageLevelFiltersSetting.addChangeListener(this._onFilterChanged.bind(this));
     this._hideNetworkMessagesSetting.addChangeListener(this._onFilterChanged.bind(this));
     this._filterByExecutionContextSetting.addChangeListener(this._onFilterChanged.bind(this));
-    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this._onFilterChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        SDK.RuntimeModel.ExecutionContext, this._onFilterChanged, this);
 
     const filterKeys = Object.values(FilterType);
     this._suggestionBuilder = new UI.FilterSuggestionBuilder.FilterSuggestionBuilder(filterKeys);
@@ -1442,8 +1444,9 @@ export class ConsoleViewFilter {
       parsedFilters.push({key: FilterType.Source, text: SDK.ConsoleModel.MessageSource.Network, negative: true});
     }
 
-    this._currentFilter.executionContext =
-        this._filterByExecutionContextSetting.get() ? self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext) : null;
+    this._currentFilter.executionContext = this._filterByExecutionContextSetting.get() ?
+        UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext) :
+        null;
     this._currentFilter.parsedFilters = parsedFilters;
     this._currentFilter.levelsMask = this._messageLevelFiltersSetting.get();
   }
diff --git a/front_end/elements/ClassesPaneWidget.js b/front_end/elements/ClassesPaneWidget.js
index 8b613fd173..81dd1db86a 100644
--- a/front_end/elements/ClassesPaneWidget.js
+++ b/front_end/elements/ClassesPaneWidget.js
@@ -43,7 +43,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this._updateNodeThrottler = new Common.Throttler.Throttler(0);
     /** @type {?SDK.DOMModel.DOMNode} */
     this._previousTarget = null;
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onSelectedNodeChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onSelectedNodeChanged, this);
   }
 
   /**
@@ -80,7 +80,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this._prompt.clearAutocomplete();
     event.target.textContent = '';
 
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       return;
     }
@@ -106,7 +106,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   }
 
   _onTextChanged() {
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       return;
     }
@@ -149,7 +149,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
       return;
     }
 
-    let node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
     }
@@ -178,7 +178,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
    * @param {!Event} event
    */
   _onClick(className, event) {
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       return;
     }
@@ -354,7 +354,7 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
       this._classNamesPromise = null;
     }
 
-    const selectedNode = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!selectedNode || (!prefix && !force && !expression.trim())) {
       return Promise.resolve([]);
     }
diff --git a/front_end/elements/ComputedStyleModel.js b/front_end/elements/ComputedStyleModel.js
index 79ddb57bb0..54f1eff1c5 100644
--- a/front_end/elements/ComputedStyleModel.js
+++ b/front_end/elements/ComputedStyleModel.js
@@ -7,6 +7,7 @@
 
 import * as Common from '../common/common.js';
 import * as SDK from '../sdk/sdk.js';
+import * as UI from '../ui/ui.js';
 
 /**
  * @unrestricted
@@ -14,10 +15,10 @@ import * as SDK from '../sdk/sdk.js';
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper {
   constructor() {
     super();
-    this._node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    this._node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     this._cssModel = null;
     this._eventListeners = [];
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onNodeChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this._onNodeChanged, this);
   }
 
   /**
diff --git a/front_end/elements/ElementStatePaneWidget.js b/front_end/elements/ElementStatePaneWidget.js
index 6da748461a..014a6bf162 100644
--- a/front_end/elements/ElementStatePaneWidget.js
+++ b/front_end/elements/ElementStatePaneWidget.js
@@ -31,7 +31,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
      * @param {!Event} event
      */
     function clickListener(event) {
-      const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+      const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
       if (!node) {
         return;
       }
@@ -70,7 +70,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     }
 
     this.contentElement.appendChild(table);
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this._update, this);
   }
 
   /**
@@ -101,7 +101,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       return;
     }
 
-    let node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
     }
diff --git a/front_end/elements/ElementsPanel.js b/front_end/elements/ElementsPanel.js
index 20de1c5f83..d9694bad1b 100644
--- a/front_end/elements/ElementsPanel.js
+++ b/front_end/elements/ElementsPanel.js
@@ -292,7 +292,7 @@ export class ElementsPanel extends UI.Panel.Panel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(ElementsPanel, this);
+    UI.Context.Context.instance().setFlavor(ElementsPanel, this);
 
     for (const treeOutline of this._treeOutlines) {
       // Attach heavy component lazily
@@ -340,7 +340,7 @@ export class ElementsPanel extends UI.Panel.Panel {
       }
     }
     super.willHide();
-    self.UI.context.setFlavor(ElementsPanel, null);
+    UI.Context.Context.instance().setFlavor(ElementsPanel, null);
   }
 
   /**
@@ -384,7 +384,7 @@ export class ElementsPanel extends UI.Panel.Panel {
       this._breadcrumbs.data = {crumbs: [], selectedNode: null};
     }
 
-    self.UI.context.setFlavor(SDK.DOMModel.DOMNode, selectedNode);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, selectedNode);
 
     if (!selectedNode) {
       return;
@@ -399,7 +399,7 @@ export class ElementsPanel extends UI.Panel.Panel {
     const nodeFrameId = selectedNode.frameId();
     for (const context of executionContexts) {
       if (context.frameId === nodeFrameId) {
-        self.UI.context.setFlavor(SDK.RuntimeModel.ExecutionContext, context);
+        UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, context);
         break;
       }
     }
@@ -1211,7 +1211,7 @@ export class ElementsActionDelegate {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       return true;
     }
diff --git a/front_end/elements/ElementsTreeElement.js b/front_end/elements/ElementsTreeElement.js
index 777d3238cd..7839fd0234 100644
--- a/front_end/elements/ElementsTreeElement.js
+++ b/front_end/elements/ElementsTreeElement.js
@@ -636,7 +636,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
     contextMenu.viewSection().appendItem(
         ls`Capture node screenshot`,
-        deviceModeWrapperAction.handleAction.bind(null, self.UI.context, 'emulation.capture-node-screenshot'));
+        deviceModeWrapperAction.handleAction.bind(
+            null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot'));
   }
 
   _startEditing() {
diff --git a/front_end/elements/ElementsTreeOutline.js b/front_end/elements/ElementsTreeOutline.js
index 13b5c0b3f3..88bfb5d03c 100644
--- a/front_end/elements/ElementsTreeOutline.js
+++ b/front_end/elements/ElementsTreeOutline.js
@@ -830,7 +830,7 @@ export class ElementsTreeOutline extends UI.TreeOutline.TreeOutline {
   async _saveNodeToTempVariable(node) {
     const remoteObjectForConsole = await node.resolveToObject();
     await SDK.ConsoleModel.ConsoleModel.instance().saveToTempVariable(
-        self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext), remoteObjectForConsole);
+        UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext), remoteObjectForConsole);
   }
 
   runPendingUpdates() {
diff --git a/front_end/elements/EventListenersWidget.js b/front_end/elements/EventListenersWidget.js
index 167eef3257..7136741cb5 100644
--- a/front_end/elements/EventListenersWidget.js
+++ b/front_end/elements/EventListenersWidget.js
@@ -86,7 +86,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
     this._toolbarItems.push(new UI.Toolbar.ToolbarSettingCheckbox(
         this._showFrameworkListenersSetting, Common.UIString.UIString('Resolve event listeners bound with framework')));
 
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
     this.update();
   }
 
@@ -100,7 +100,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
       this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(_objectGroupName);
       delete this._lastRequestedNode;
     }
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (!node) {
       this._eventListenersView.reset();
       this._eventListenersView.addEmptyHolderIfNeeded();
diff --git a/front_end/elements/LayoutSidebarPane.js b/front_end/elements/LayoutSidebarPane.js
index 24bc1159e0..fdbb5ce012 100644
--- a/front_end/elements/LayoutSidebarPane.js
+++ b/front_end/elements/LayoutSidebarPane.js
@@ -45,7 +45,7 @@ export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   _pullNode() {
-    this._node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    this._node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
   }
 
   async _fetchGridNodes() {
@@ -131,7 +131,7 @@ export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
     const overlayModel = this._node.domModel().overlayModel();
     overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
     overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
     this.update();
   }
 
@@ -148,6 +148,6 @@ export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
     const overlayModel = this._node.domModel().overlayModel();
     overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayCleared, this.update, this);
     overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.update, this);
-    self.UI.context.removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
   }
 }
diff --git a/front_end/elements/NodeStackTraceWidget.js b/front_end/elements/NodeStackTraceWidget.js
index 6c35cc183a..a34c47b4ff 100644
--- a/front_end/elements/NodeStackTraceWidget.js
+++ b/front_end/elements/NodeStackTraceWidget.js
@@ -28,7 +28,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
    * @override
    */
   wasShown() {
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
     this.update();
   }
 
@@ -36,7 +36,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
    * @override
    */
   willHide() {
-    self.UI.context.removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
   }
 
   /**
@@ -45,7 +45,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
    * @return {!Promise<undefined>}
    */
   async doUpdate() {
-    const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+    const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     if (!node) {
       this._noStackTraceElement.classList.remove('hidden');
diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
index 60b18f237f..7c6755872b 100644
--- a/front_end/elements/StylesSidebarPane.js
+++ b/front_end/elements/StylesSidebarPane.js
@@ -112,7 +112,7 @@ export class StylesSidebarPane extends ElementsSidebarPane {
     this._idleCallbackManager = null;
     this._needsForceUpdate = false;
     StylesSidebarPane._instance = this;
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
     this.contentElement.addEventListener('copy', this._clipboardCopy.bind(this));
     this._resizeThrottler = new Common.Throttler.Throttler(100);
 
@@ -2797,14 +2797,14 @@ export class ButtonProvider {
     this._button.element.appendChild(longclickTriangle);
 
     new UI.UIUtils.LongClickController(this._button.element, this._longClicked.bind(this));
-    self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, onNodeChanged.bind(this));
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, onNodeChanged.bind(this));
     onNodeChanged.call(this);
 
     /**
      * @this {ButtonProvider}
      */
     function onNodeChanged() {
-      let node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+      let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
       node = node ? node.enclosingElementOrSelf() : null;
       this._button.setEnabled(!!node);
     }
diff --git a/front_end/emulation/DeviceModeWrapper.js b/front_end/emulation/DeviceModeWrapper.js
index a7e1d9de13..6cb724c128 100644
--- a/front_end/emulation/DeviceModeWrapper.js
+++ b/front_end/emulation/DeviceModeWrapper.js
@@ -118,7 +118,7 @@ export class ActionDelegate {
           return DeviceModeView.wrapperInstance._captureScreenshot();
 
         case 'emulation.capture-node-screenshot': {
-          const node = self.UI.context.flavor(SDK.DOMModel.DOMNode);
+          const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
           if (!node) {
             return true;
           }
diff --git a/front_end/extensions/ExtensionServer.js b/front_end/extensions/ExtensionServer.js
index d10546706c..5f01611755 100644
--- a/front_end/extensions/ExtensionServer.js
+++ b/front_end/extensions/ExtensionServer.js
@@ -701,14 +701,16 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper {
      * @this {ExtensionServer}
      */
     function onElementsSubscriptionStarted() {
-      self.UI.context.addFlavorChangeListener(SDK.DOMModel.DOMNode, this._notifyElementsSelectionChanged, this);
+      UI.Context.Context.instance().addFlavorChangeListener(
+          SDK.DOMModel.DOMNode, this._notifyElementsSelectionChanged, this);
     }
 
     /**
      * @this {ExtensionServer}
      */
     function onElementsSubscriptionStopped() {
-      self.UI.context.removeFlavorChangeListener(SDK.DOMModel.DOMNode, this._notifyElementsSelectionChanged, this);
+      UI.Context.Context.instance().removeFlavorChangeListener(
+          SDK.DOMModel.DOMNode, this._notifyElementsSelectionChanged, this);
     }
 
     this._registerSubscriptionHandler(
diff --git a/front_end/main/MainImpl.js b/front_end/main/MainImpl.js
index 612fa0f200..3d8027a113 100644
--- a/front_end/main/MainImpl.js
+++ b/front_end/main/MainImpl.js
@@ -299,7 +299,7 @@ export class MainImpl {
     self.Persistence.networkPersistenceManager = new Persistence.NetworkPersistenceManager.NetworkPersistenceManager(
         Workspace.Workspace.WorkspaceImpl.instance());
 
-    new ExecutionContextSelector(SDK.SDKModel.TargetManager.instance(), self.UI.context);
+    new ExecutionContextSelector(SDK.SDKModel.TargetManager.instance(), UI.Context.Context.instance());
     self.Bindings.blackboxManager = Bindings.BlackboxManager.BlackboxManager.instance({
       forceNew: true,
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
@@ -812,7 +812,7 @@ export class PauseListener {
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerPaused, this._debuggerPaused, this);
     const debuggerModel = /** @type {!SDK.DebuggerModel.DebuggerModel} */ (event.data);
     const debuggerPausedDetails = debuggerModel.debuggerPausedDetails();
-    self.UI.context.setFlavor(SDK.SDKModel.Target, debuggerModel.target());
+    UI.Context.Context.instance().setFlavor(SDK.SDKModel.Target, debuggerModel.target());
     Common.Revealer.reveal(debuggerPausedDetails);
   }
 }
diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js
index 96eece5c06..5ff28c7f2d 100644
--- a/front_end/network/NetworkPanel.js
+++ b/front_end/network/NetworkPanel.js
@@ -473,7 +473,7 @@ export class NetworkPanel extends UI.Panel.Panel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(NetworkPanel, this);
+    UI.Context.Context.instance().setFlavor(NetworkPanel, this);
 
     // Record the network tool load time after the panel has loaded.
     Host.userMetrics.panelLoaded('network', 'DevTools.Launch.Network');
@@ -483,7 +483,7 @@ export class NetworkPanel extends UI.Panel.Panel {
    * @override
    */
   willHide() {
-    self.UI.context.setFlavor(NetworkPanel, null);
+    UI.Context.Context.instance().setFlavor(NetworkPanel, null);
   }
 
   /**
@@ -863,7 +863,7 @@ export class ActionDelegate {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const panel = self.UI.context.flavor(NetworkPanel);
+    const panel = UI.Context.Context.instance().flavor(NetworkPanel);
     console.assert(panel && panel instanceof NetworkPanel);
     switch (actionId) {
       case 'network.toggle-recording': {
diff --git a/front_end/object_ui/JavaScriptAutocomplete.js b/front_end/object_ui/JavaScriptAutocomplete.js
index 9ec7524de9..4f0ffd7eaf 100644
--- a/front_end/object_ui/JavaScriptAutocomplete.js
+++ b/front_end/object_ui/JavaScriptAutocomplete.js
@@ -20,7 +20,7 @@ export class JavaScriptAutocomplete {
     this._expressionCache = new Map();
     SDK.ConsoleModel.ConsoleModel.instance().addEventListener(
         SDK.ConsoleModel.Events.CommandEvaluated, this._clearCache, this);
-    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this._clearCache, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this._clearCache, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerResumed, this._clearCache, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
@@ -54,7 +54,7 @@ export class JavaScriptAutocomplete {
     if (!functionCall) {
       return null;
     }
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return null;
     }
@@ -203,7 +203,7 @@ export class JavaScriptAutocomplete {
    */
   async _mapCompletions(text, query) {
     const mapMatch = text.match(/\.\s*(get|set|delete)\s*\(\s*$/);
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext || !mapMatch) {
       return [];
     }
@@ -312,7 +312,7 @@ export class JavaScriptAutocomplete {
    * @return {!Promise<!UI.SuggestBox.Suggestions>}
    */
   async _completionsForExpression(fullText, query, force) {
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return [];
     }
@@ -674,7 +674,7 @@ export class JavaScriptAutocomplete {
    * @return {!Promise<boolean>}
    */
   static async isExpressionComplete(expression) {
-    const currentExecutionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!currentExecutionContext) {
       return true;
     }
diff --git a/front_end/object_ui/JavaScriptREPL.js b/front_end/object_ui/JavaScriptREPL.js
index 6c18554b18..a486a4b288 100644
--- a/front_end/object_ui/JavaScriptREPL.js
+++ b/front_end/object_ui/JavaScriptREPL.js
@@ -6,6 +6,7 @@
 // TODO(crbug.com/1011811): Enable TypeScript compiler checks
 
 import * as SDK from '../sdk/sdk.js';
+import * as UI from '../ui/ui.js';
 
 import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 
@@ -52,7 +53,7 @@ export class JavaScriptREPL {
    * @return {!Promise<!{preview: !DocumentFragment, result: ?SDK.RuntimeModel.EvaluationResult}>}
    */
   static async evaluateAndBuildPreview(text, throwOnSideEffect, timeout, allowErrors, objectGroup) {
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const maxLength = typeof self.ObjectUI.JavaScriptREPL._MaxLengthForEvaluation !== 'undefined' ?
         self.ObjectUI.JavaScriptREPL._MaxLengthForEvaluation :
         MaxLengthForEvaluation;
diff --git a/front_end/profiler/CPUProfileView.js b/front_end/profiler/CPUProfileView.js
index 2f89b30793..4f92fd4511 100644
--- a/front_end/profiler/CPUProfileView.js
+++ b/front_end/profiler/CPUProfileView.js
@@ -176,7 +176,7 @@ export class CPUProfileType extends ProfileType {
   }
 
   _startRecordingProfile() {
-    const cpuProfilerModel = self.UI.context.flavor(SDK.CPUProfilerModel.CPUProfilerModel);
+    const cpuProfilerModel = UI.Context.Context.instance().flavor(SDK.CPUProfilerModel.CPUProfilerModel);
     if (this.profileBeingRecorded() || !cpuProfilerModel) {
       return;
     }
diff --git a/front_end/profiler/HeapProfileView.js b/front_end/profiler/HeapProfileView.js
index 0d3aa3d3ed..068d803509 100644
--- a/front_end/profiler/HeapProfileView.js
+++ b/front_end/profiler/HeapProfileView.js
@@ -287,7 +287,7 @@ export class SamplingHeapProfileTypeBase extends ProfileType {
   }
 
   _startRecordingProfile() {
-    const heapProfilerModel = self.UI.context.flavor(SDK.HeapProfilerModel.HeapProfilerModel);
+    const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     if (this.profileBeingRecorded() || !heapProfilerModel) {
       return;
     }
@@ -516,7 +516,7 @@ export class SamplingNativeHeapSnapshotType extends SamplingHeapProfileTypeBase
     if (this.profileBeingRecorded()) {
       return;
     }
-    const heapProfilerModel = self.UI.context.flavor(SDK.HeapProfilerModel.HeapProfilerModel);
+    const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     if (!heapProfilerModel) {
       return;
     }
diff --git a/front_end/profiler/HeapProfilerPanel.js b/front_end/profiler/HeapProfilerPanel.js
index ab5aeefb28..2ce150d65c 100644
--- a/front_end/profiler/HeapProfilerPanel.js
+++ b/front_end/profiler/HeapProfilerPanel.js
@@ -84,7 +84,7 @@ export class HeapProfilerPanel extends ProfilesPanel {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const panel = self.UI.context.flavor(HeapProfilerPanel);
+    const panel = UI.Context.Context.instance().flavor(HeapProfilerPanel);
     console.assert(panel && panel instanceof HeapProfilerPanel);
     panel.toggleRecord();
     return true;
@@ -94,7 +94,7 @@ export class HeapProfilerPanel extends ProfilesPanel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(HeapProfilerPanel, this);
+    UI.Context.Context.instance().setFlavor(HeapProfilerPanel, this);
     // Record the memory tool load time.
     Host.userMetrics.panelLoaded('heap_profiler', 'DevTools.Launch.HeapProfiler');
   }
@@ -103,7 +103,7 @@ export class HeapProfilerPanel extends ProfilesPanel {
    * @override
    */
   willHide() {
-    self.UI.context.setFlavor(HeapProfilerPanel, null);
+    UI.Context.Context.instance().setFlavor(HeapProfilerPanel, null);
   }
 
   /**
diff --git a/front_end/profiler/HeapSnapshotGridNodes.js b/front_end/profiler/HeapSnapshotGridNodes.js
index 4f3126923e..5173e88be2 100644
--- a/front_end/profiler/HeapSnapshotGridNodes.js
+++ b/front_end/profiler/HeapSnapshotGridNodes.js
@@ -701,7 +701,7 @@ export class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode {
           Common.Console.Console.instance().error(ls`Preview is not available`);
         } else {
           await SDK.ConsoleModel.ConsoleModel.instance().saveToTempVariable(
-              self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext), remoteObject);
+              UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext), remoteObject);
         }
       });
     }
diff --git a/front_end/profiler/HeapSnapshotView.js b/front_end/profiler/HeapSnapshotView.js
index b58677c433..16707b3598 100644
--- a/front_end/profiler/HeapSnapshotView.js
+++ b/front_end/profiler/HeapSnapshotView.js
@@ -1203,7 +1203,7 @@ export class HeapSnapshotProfileType extends ProfileType {
     if (this.profileBeingRecorded()) {
       return;
     }
-    const heapProfilerModel = self.UI.context.flavor(SDK.HeapProfilerModel.HeapProfilerModel);
+    const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     if (!heapProfilerModel) {
       return;
     }
@@ -1410,7 +1410,7 @@ export class TrackingHeapSnapshotProfileType extends HeapSnapshotProfileType {
    * @return {?SDK.HeapProfilerModel.HeapProfilerModel}
    */
   _addNewProfile() {
-    const heapProfilerModel = self.UI.context.flavor(SDK.HeapProfilerModel.HeapProfilerModel);
+    const heapProfilerModel = UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel);
     if (!heapProfilerModel) {
       return null;
     }
diff --git a/front_end/profiler/IsolateSelector.js b/front_end/profiler/IsolateSelector.js
index de36b98415..ed6f7cb64c 100644
--- a/front_end/profiler/IsolateSelector.js
+++ b/front_end/profiler/IsolateSelector.js
@@ -221,8 +221,9 @@ export class IsolateSelector extends UI.Widget.VBox {
       toElement.classList.add('selected');
     }
     const model = to && to.model();
-    self.UI.context.setFlavor(SDK.HeapProfilerModel.HeapProfilerModel, model && model.heapProfilerModel());
-    self.UI.context.setFlavor(
+    UI.Context.Context.instance().setFlavor(
+        SDK.HeapProfilerModel.HeapProfilerModel, model && model.heapProfilerModel());
+    UI.Context.Context.instance().setFlavor(
         SDK.CPUProfilerModel.CPUProfilerModel, model && model.target().model(SDK.CPUProfilerModel.CPUProfilerModel));
   }
 
diff --git a/front_end/profiler/ProfilesPanel.js b/front_end/profiler/ProfilesPanel.js
index c0396153bb..302f65ee7b 100644
--- a/front_end/profiler/ProfilesPanel.js
+++ b/front_end/profiler/ProfilesPanel.js
@@ -116,9 +116,9 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar {
 
     SDK.SDKModel.TargetManager.instance().addEventListener(
         SDK.SDKModel.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
-    self.UI.context.addFlavorChangeListener(
+    UI.Context.Context.instance().addFlavorChangeListener(
         SDK.CPUProfilerModel.CPUProfilerModel, this._updateProfileTypeSpecificUI, this);
-    self.UI.context.addFlavorChangeListener(
+    UI.Context.Context.instance().addFlavorChangeListener(
         SDK.HeapProfilerModel.HeapProfilerModel, this._updateProfileTypeSpecificUI, this);
   }
 
@@ -223,8 +223,8 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar {
    */
   _updateToggleRecordAction(toggled) {
     const hasSelectedTarget =
-        !!(self.UI.context.flavor(SDK.CPUProfilerModel.CPUProfilerModel) ||
-           self.UI.context.flavor(SDK.HeapProfilerModel.HeapProfilerModel));
+        !!(UI.Context.Context.instance().flavor(SDK.CPUProfilerModel.CPUProfilerModel) ||
+           UI.Context.Context.instance().flavor(SDK.HeapProfilerModel.HeapProfilerModel));
     const enable = toggled || (!SDK.SDKModel.TargetManager.instance().allTargetsSuspended() && hasSelectedTarget);
     this._toggleRecordAction.setEnabled(enable);
     this._toggleRecordAction.setToggled(toggled);
@@ -717,14 +717,14 @@ export class JSProfilerPanel extends ProfilesPanel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(JSProfilerPanel, this);
+    UI.Context.Context.instance().setFlavor(JSProfilerPanel, this);
   }
 
   /**
    * @override
    */
   willHide() {
-    self.UI.context.setFlavor(JSProfilerPanel, null);
+    UI.Context.Context.instance().setFlavor(JSProfilerPanel, null);
   }
 
   /**
@@ -734,7 +734,7 @@ export class JSProfilerPanel extends ProfilesPanel {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const panel = self.UI.context.flavor(JSProfilerPanel);
+    const panel = UI.Context.Context.instance().flavor(JSProfilerPanel);
     console.assert(panel && panel instanceof JSProfilerPanel);
     panel.toggleRecord();
     return true;
diff --git a/front_end/resources/ApplicationPanelSidebar.js b/front_end/resources/ApplicationPanelSidebar.js
index 02e6825a72..efa8351dbb 100644
--- a/front_end/resources/ApplicationPanelSidebar.js
+++ b/front_end/resources/ApplicationPanelSidebar.js
@@ -914,7 +914,7 @@ export class BackgroundServiceTreeElement extends BaseStorageTreeElement {
       this._view = new BackgroundServiceView(this._serviceName, this._model);
     }
     this.showView(this._view);
-    self.UI.context.setFlavor(BackgroundServiceView, this._view);
+    UI.Context.Context.instance().setFlavor(BackgroundServiceView, this._view);
     return false;
   }
 }
diff --git a/front_end/snippets/ScriptSnippetFileSystem.js b/front_end/snippets/ScriptSnippetFileSystem.js
index 253d93588e..66cea6b61b 100644
--- a/front_end/snippets/ScriptSnippetFileSystem.js
+++ b/front_end/snippets/ScriptSnippetFileSystem.js
@@ -9,6 +9,7 @@ import * as Common from '../common/common.js';
 import * as Persistence from '../persistence/persistence.js';
 import * as SDK from '../sdk/sdk.js';
 import * as TextUtils from '../text_utils/text_utils.js';  // eslint-disable-line no-unused-vars
+import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';
 
 /**
@@ -183,7 +184,7 @@ export async function evaluateScriptSnippet(uiSourceCode) {
     return;
   }
 
-  const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+  const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
   if (!executionContext) {
     return;
   }
diff --git a/front_end/sources/CallStackSidebarPane.js b/front_end/sources/CallStackSidebarPane.js
index ed96d1058c..fb54b2f365 100644
--- a/front_end/sources/CallStackSidebarPane.js
+++ b/front_end/sources/CallStackSidebarPane.js
@@ -99,14 +99,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView {
   async _doUpdate() {
     this._locationPool.disposeAll();
 
-    const details = self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (!details) {
       this.setDefaultFocusedElement(this._notPausedMessageElement);
       this._notPausedMessageElement.classList.remove('hidden');
       this._blackboxedMessageElement.classList.add('hidden');
       this._showMoreMessageElement.classList.add('hidden');
       this._items.replaceAll([]);
-      self.UI.context.setFlavor(SDK.DebuggerModel.CallFrame, null);
+      UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, null);
       return;
     }
 
@@ -238,7 +238,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView {
         UI.ARIAUtils.setDisabled(element, true);
       }
     }
-    const isSelected = item[debuggerCallFrameSymbol] === self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const isSelected =
+        item[debuggerCallFrameSymbol] === UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     element.classList.toggle('selected', isSelected);
     UI.ARIAUtils.setSelected(element, isSelected);
     element.classList.toggle('hidden', !this._showBlackboxed && item.isBlackboxed);
@@ -380,7 +381,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView {
     const oldItem = this.activeCallFrameItem();
     if (debuggerCallFrame && oldItem !== item) {
       debuggerCallFrame.debuggerModel.setSelectedCallFrame(debuggerCallFrame);
-      self.UI.context.setFlavor(SDK.DebuggerModel.CallFrame, debuggerCallFrame);
+      UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, debuggerCallFrame);
       if (oldItem) {
         this._refreshItem(oldItem);
       }
@@ -394,7 +395,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView {
    * @return {?Item}
    */
   activeCallFrameItem() {
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (callFrame) {
       return this._items.find(callFrameItem => callFrameItem[debuggerCallFrameSymbol] === callFrame) || null;
     }
diff --git a/front_end/sources/DebuggerPlugin.js b/front_end/sources/DebuggerPlugin.js
index 4cc0bf283b..c51ecdbc87 100644
--- a/front_end/sources/DebuggerPlugin.js
+++ b/front_end/sources/DebuggerPlugin.js
@@ -174,7 +174,7 @@ export class DebuggerPlugin extends Plugin {
     /** @type {?Map<!Object, !Function>} */
     this._continueToLocationDecorations = null;
 
-    self.UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
     this._liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
     this._callFrameChanged();
 
@@ -481,7 +481,7 @@ export class DebuggerPlugin extends Plugin {
     if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlOrMeta(event)) {
       return null;
     }
-    const target = self.UI.context.flavor(SDK.SDKModel.Target);
+    const target = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     if (!debuggerModel || !debuggerModel.isPaused()) {
       return null;
@@ -501,7 +501,7 @@ export class DebuggerPlugin extends Plugin {
     let endHighlight;
 
     const selectedCallFrame =
-        /** @type {!SDK.DebuggerModel.CallFrame} */ (self.UI.context.flavor(SDK.DebuggerModel.CallFrame));
+        /** @type {!SDK.DebuggerModel.CallFrame} */ (UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame));
     if (!selectedCallFrame) {
       return null;
     }
@@ -595,7 +595,7 @@ export class DebuggerPlugin extends Plugin {
         }
         objectPopoverHelper =
             await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(result.object, popover);
-        const potentiallyUpdatedCallFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+        const potentiallyUpdatedCallFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
         if (!objectPopoverHelper || selectedCallFrame !== potentiallyUpdatedCallFrame) {
           debuggerModel.runtimeModel().releaseObjectGroup('popover');
           if (objectPopoverHelper) {
@@ -785,11 +785,11 @@ export class DebuggerPlugin extends Plugin {
     if (!Common.Settings.Settings.instance().moduleSetting('inlineVariableValues').get()) {
       return;
     }
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return;
     }
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
       return;
     }
@@ -805,11 +805,11 @@ export class DebuggerPlugin extends Plugin {
 
   _showContinueToLocations() {
     this._popoverHelper.hidePopover();
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return;
     }
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
       return;
     }
@@ -1750,7 +1750,7 @@ export class DebuggerPlugin extends Plugin {
 
   async _callFrameChanged() {
     this._liveLocationPool.disposeAll();
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
       this._clearExecutionLine();
       return;
@@ -1822,7 +1822,7 @@ export class DebuggerPlugin extends Plugin {
     super.dispose();
 
     this._clearExecutionLine();
-    self.UI.context.removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
     this._liveLocationPool.disposeAll();
   }
 }
diff --git a/front_end/sources/GoToLineQuickOpen.js b/front_end/sources/GoToLineQuickOpen.js
index 86aae61ba6..55b5d4cac5 100644
--- a/front_end/sources/GoToLineQuickOpen.js
+++ b/front_end/sources/GoToLineQuickOpen.js
@@ -7,6 +7,7 @@
 
 import * as Common from '../common/common.js';
 import * as QuickOpen from '../quick_open/quick_open.js';
+import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';  // eslint-disable-line no-unused-vars
 
 import {SourcesView} from './SourcesView.js';
@@ -76,7 +77,7 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
    * @return {?Workspace.UISourceCode.UISourceCode}
    */
   _currentUISourceCode() {
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (!sourcesView) {
       return null;
     }
@@ -87,7 +88,7 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
    * @return {?UISourceCodeFrame}
    */
   _currentSourceFrame() {
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (!sourcesView) {
       return null;
     }
diff --git a/front_end/sources/JavaScriptBreakpointsSidebarPane.js b/front_end/sources/JavaScriptBreakpointsSidebarPane.js
index f30c6e8855..855c3a318b 100644
--- a/front_end/sources/JavaScriptBreakpointsSidebarPane.js
+++ b/front_end/sources/JavaScriptBreakpointsSidebarPane.js
@@ -116,7 +116,7 @@ export class JavaScriptBreakpointsSidebarPane extends UI.ThrottledWidget.Throttl
    * @return {!Promise<?Workspace.UISourceCode.UILocation>}
    */
   async _getSelectedUILocation() {
-    const details = self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (details && details.callFrames.length) {
       return await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
           details.callFrames[0].location());
diff --git a/front_end/sources/JavaScriptCompilerPlugin.js b/front_end/sources/JavaScriptCompilerPlugin.js
index bd4a046401..3f52f94a53 100644
--- a/front_end/sources/JavaScriptCompilerPlugin.js
+++ b/front_end/sources/JavaScriptCompilerPlugin.js
@@ -91,7 +91,7 @@ export class JavaScriptCompilerPlugin extends Plugin {
     if (!runtimeModel) {
       return;
     }
-    const currentExecutionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!currentExecutionContext) {
       return;
     }
diff --git a/front_end/sources/OutlineQuickOpen.js b/front_end/sources/OutlineQuickOpen.js
index 6cac7cb4cd..1b6db85dfb 100644
--- a/front_end/sources/OutlineQuickOpen.js
+++ b/front_end/sources/OutlineQuickOpen.js
@@ -8,6 +8,7 @@
 import * as Common from '../common/common.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as QuickOpen from '../quick_open/quick_open.js';
+import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';  // eslint-disable-line no-unused-vars
 
 import {SourcesView} from './SourcesView.js';
@@ -117,7 +118,7 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
    * @return {?Workspace.UISourceCode.UISourceCode}
    */
   _currentUISourceCode() {
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (!sourcesView) {
       return null;
     }
diff --git a/front_end/sources/ScopeChainSidebarPane.js b/front_end/sources/ScopeChainSidebarPane.js
index 715b7c1b6f..65348c57cc 100644
--- a/front_end/sources/ScopeChainSidebarPane.js
+++ b/front_end/sources/ScopeChainSidebarPane.js
@@ -72,7 +72,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox {
       return;
     }
 
-    if (self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails)) {
+    if (UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails)) {
       this._treeOutline.forceSelect();
     }
   }
@@ -82,8 +82,8 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox {
   }
 
   _update() {
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
-    const details = self.UI.context.flavor(SDK.DebuggerModel.DebuggerPausedDetails);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     this._linkifier.reset();
     resolveThisObject(callFrame).then(this._innerUpdate.bind(this, details, callFrame));
   }
diff --git a/front_end/sources/SourcesPanel.js b/front_end/sources/SourcesPanel.js
index 9437956fa1..e6347bf1d2 100644
--- a/front_end/sources/SourcesPanel.js
+++ b/front_end/sources/SourcesPanel.js
@@ -140,12 +140,12 @@ export class SourcesPanel extends UI.Panel.Panel {
 
     this._liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
 
-    this._setTarget(self.UI.context.flavor(SDK.SDKModel.Target));
+    this._setTarget(UI.Context.Context.instance().flavor(SDK.SDKModel.Target));
     Common.Settings.Settings.instance()
         .moduleSetting('breakpointsActive')
         .addChangeListener(this._breakpointsActiveStateChanged, this);
-    self.UI.context.addFlavorChangeListener(SDK.SDKModel.Target, this._onCurrentTargetChanged, this);
-    self.UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.SDKModel.Target, this._onCurrentTargetChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this._callFrameChanged, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerWasEnabled, this._debuggerWasEnabled, this);
     SDK.SDKModel.TargetManager.instance().addModelListener(
@@ -260,7 +260,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(SourcesPanel, this);
+    UI.Context.Context.instance().setFlavor(SourcesPanel, this);
     super.wasShown();
     const wrapper = WrapperView._instance;
     if (wrapper && wrapper.isShowing()) {
@@ -275,7 +275,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    */
   willHide() {
     super.willHide();
-    self.UI.context.setFlavor(SourcesPanel, null);
+    UI.Context.Context.instance().setFlavor(SourcesPanel, null);
     if (WrapperView.isShowing()) {
       WrapperView._instance._showViewInWrapper();
       self.UI.inspectorView.setDrawerMinimized(false);
@@ -337,10 +337,10 @@ export class SourcesPanel extends UI.Panel.Panel {
       this._setAsCurrentPanel();
     }
 
-    if (self.UI.context.flavor(SDK.SDKModel.Target) === debuggerModel.target()) {
+    if (UI.Context.Context.instance().flavor(SDK.SDKModel.Target) === debuggerModel.target()) {
       this._showDebuggerPausedDetails(/** @type {!SDK.DebuggerModel.DebuggerPausedDetails} */ (details));
     } else if (!this._paused) {
-      self.UI.context.setFlavor(SDK.SDKModel.Target, debuggerModel.target());
+      UI.Context.Context.instance().setFlavor(SDK.SDKModel.Target, debuggerModel.target());
     }
   }
 
@@ -350,7 +350,7 @@ export class SourcesPanel extends UI.Panel.Panel {
   _showDebuggerPausedDetails(details) {
     this._paused = true;
     this._updateDebuggerButtonsAndStatus();
-    self.UI.context.setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
+    UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
     this._toggleDebuggerSidebarButton.setEnabled(false);
     this._revealDebuggerSidebar();
     window.focus();
@@ -362,7 +362,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    */
   _debuggerResumed(debuggerModel) {
     const target = debuggerModel.target();
-    if (self.UI.context.flavor(SDK.SDKModel.Target) !== target) {
+    if (UI.Context.Context.instance().flavor(SDK.SDKModel.Target) !== target) {
       return;
     }
     this._paused = false;
@@ -376,7 +376,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    */
   _debuggerWasEnabled(event) {
     const debuggerModel = /** @type {!SDK.DebuggerModel.DebuggerModel} */ (event.data);
-    if (self.UI.context.flavor(SDK.SDKModel.Target) !== debuggerModel.target()) {
+    if (UI.Context.Context.instance().flavor(SDK.SDKModel.Target) !== debuggerModel.target()) {
       return;
     }
 
@@ -497,7 +497,7 @@ export class SourcesPanel extends UI.Panel.Panel {
   }
 
   async _callFrameChanged() {
-    const callFrame = self.UI.context.flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
     if (!callFrame) {
       return;
     }
@@ -517,7 +517,7 @@ export class SourcesPanel extends UI.Panel.Panel {
   }
 
   async _updateDebuggerButtonsAndStatus() {
-    const currentTarget = self.UI.context.flavor(SDK.SDKModel.Target);
+    const currentTarget = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     const currentDebuggerModel = currentTarget ? currentTarget.model(SDK.DebuggerModel.DebuggerModel) : null;
     if (!currentDebuggerModel) {
       this._togglePauseAction.setEnabled(false);
@@ -555,7 +555,7 @@ export class SourcesPanel extends UI.Panel.Panel {
 
   _clearInterface() {
     this._updateDebuggerButtonsAndStatus();
-    self.UI.context.setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, null);
+    UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, null);
 
     if (this._switchToPausedTargetTimeout) {
       clearTimeout(this._switchToPausedTargetTimeout);
@@ -574,7 +574,7 @@ export class SourcesPanel extends UI.Panel.Panel {
 
     for (const debuggerModel of SDK.SDKModel.TargetManager.instance().models(SDK.DebuggerModel.DebuggerModel)) {
       if (debuggerModel.isPaused()) {
-        self.UI.context.setFlavor(SDK.SDKModel.Target, debuggerModel.target());
+        UI.Context.Context.instance().setFlavor(SDK.SDKModel.Target, debuggerModel.target());
         break;
       }
     }
@@ -608,7 +608,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    * @return {boolean}
    */
   _togglePause() {
-    const target = self.UI.context.flavor(SDK.SDKModel.Target);
+    const target = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     if (!target) {
       return true;
     }
@@ -640,7 +640,7 @@ export class SourcesPanel extends UI.Panel.Panel {
     this._paused = false;
 
     this._clearInterface();
-    const target = self.UI.context.flavor(SDK.SDKModel.Target);
+    const target = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     return target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
   }
 
@@ -714,7 +714,7 @@ export class SourcesPanel extends UI.Panel.Panel {
    * @param {!Workspace.UISourceCode.UILocation} uiLocation
    */
   async _continueToLocation(uiLocation) {
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext) {
       return;
     }
@@ -842,7 +842,7 @@ export class SourcesPanel extends UI.Panel.Panel {
 
     const contentType = uiSourceCode.contentType();
     if (contentType.hasScripts()) {
-      const target = self.UI.context.flavor(SDK.SDKModel.Target);
+      const target = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
       if (debuggerModel && debuggerModel.isPaused()) {
         contextMenu.debugSection().appendItem(
@@ -870,7 +870,7 @@ export class SourcesPanel extends UI.Panel.Panel {
       return;
     }
     const remoteObject = /** @type {!SDK.RemoteObject.RemoteObject} */ (target);
-    const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     contextMenu.debugSection().appendItem(
         ls`Store as global variable`,
         () => SDK.ConsoleModel.ConsoleModel.instance().saveToTempVariable(executionContext, remoteObject));
@@ -1219,10 +1219,10 @@ export class DebuggingActionDelegate {
         return true;
       }
       case 'debugger.evaluate-selection': {
-        const frame = self.UI.context.flavor(UISourceCodeFrame);
+        const frame = UI.Context.Context.instance().flavor(UISourceCodeFrame);
         if (frame) {
           let text = frame.textEditor.text(frame.textEditor.selection());
-          const executionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+          const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
           if (executionContext) {
             const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
             text = ObjectUI.JavaScriptREPL.JavaScriptREPL.wrapObjectLiteral(text);
diff --git a/front_end/sources/SourcesView.js b/front_end/sources/SourcesView.js
index 709970d8cf..0f7101b8f1 100644
--- a/front_end/sources/SourcesView.js
+++ b/front_end/sources/SourcesView.js
@@ -206,7 +206,7 @@ export class SourcesView extends UI.Widget.VBox {
   static defaultUISourceCodeScores() {
     /** @type {!Map.<!Workspace.UISourceCode.UISourceCode, number>} */
     const defaultScores = new Map();
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (sourcesView) {
       const uiSourceCodes = sourcesView._editorContainer.historyUISourceCodes();
       for (let i = 1; i < uiSourceCodes.length; ++i)  // Skip current element
@@ -261,14 +261,14 @@ export class SourcesView extends UI.Widget.VBox {
    */
   wasShown() {
     super.wasShown();
-    self.UI.context.setFlavor(SourcesView, this);
+    UI.Context.Context.instance().setFlavor(SourcesView, this);
   }
 
   /**
    * @override
    */
   willHide() {
-    self.UI.context.setFlavor(SourcesView, null);
+    UI.Context.Context.instance().setFlavor(SourcesView, null);
     this._resetPlaceholderState();
     super.willHide();
   }
@@ -746,7 +746,7 @@ export class SwitchFileActionDelegate {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     const currentUISourceCode = sourcesView.currentUISourceCode();
     if (!currentUISourceCode) {
       return false;
@@ -772,7 +772,7 @@ export class ActionDelegate {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const sourcesView = self.UI.context.flavor(SourcesView);
+    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (!sourcesView) {
       return false;
     }
diff --git a/front_end/sources/ThreadsSidebarPane.js b/front_end/sources/ThreadsSidebarPane.js
index 8e1cdd625a..67277b3887 100644
--- a/front_end/sources/ThreadsSidebarPane.js
+++ b/front_end/sources/ThreadsSidebarPane.js
@@ -22,11 +22,11 @@ export class ThreadsSidebarPane extends UI.Widget.VBox {
     this._items = new UI.ListModel.ListModel();
     /** @type {!UI.ListControl.ListControl<!SDK.DebuggerModel.DebuggerModel>} */
     this._list = new UI.ListControl.ListControl(this._items, this, UI.ListControl.ListMode.NonViewport);
-    const currentTarget = self.UI.context.flavor(SDK.SDKModel.Target);
+    const currentTarget = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     this._selectedModel = !!currentTarget ? currentTarget.model(SDK.DebuggerModel.DebuggerModel) : null;
     this.contentElement.appendChild(this._list.element);
 
-    self.UI.context.addFlavorChangeListener(SDK.SDKModel.Target, this._targetFlavorChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.SDKModel.Target, this._targetFlavorChanged, this);
     SDK.SDKModel.TargetManager.instance().observeModels(SDK.DebuggerModel.DebuggerModel, this);
   }
 
@@ -50,10 +50,10 @@ export class ThreadsSidebarPane extends UI.Widget.VBox {
     element.appendChild(UI.Icon.Icon.create('smallicon-thick-right-arrow', 'selected-thread-icon'));
     element.tabIndex = -1;
     self.onInvokeElement(element, event => {
-      self.UI.context.setFlavor(SDK.SDKModel.Target, debuggerModel.target());
+      UI.Context.Context.instance().setFlavor(SDK.SDKModel.Target, debuggerModel.target());
       event.consume(true);
     });
-    const isSelected = self.UI.context.flavor(SDK.SDKModel.Target) === debuggerModel.target();
+    const isSelected = UI.Context.Context.instance().flavor(SDK.SDKModel.Target) === debuggerModel.target();
     element.classList.toggle('selected', isSelected);
     UI.ARIAUtils.setSelected(element, isSelected);
 
@@ -142,7 +142,7 @@ export class ThreadsSidebarPane extends UI.Widget.VBox {
    */
   modelAdded(debuggerModel) {
     this._items.insert(this._items.length, debuggerModel);
-    const currentTarget = self.UI.context.flavor(SDK.SDKModel.Target);
+    const currentTarget = UI.Context.Context.instance().flavor(SDK.SDKModel.Target);
     if (currentTarget === debuggerModel.target()) {
       this._list.selectItem(debuggerModel);
     }
diff --git a/front_end/sources/UISourceCodeFrame.js b/front_end/sources/UISourceCodeFrame.js
index cc6c30b769..3ca384adaa 100644
--- a/front_end/sources/UISourceCodeFrame.js
+++ b/front_end/sources/UISourceCodeFrame.js
@@ -79,9 +79,11 @@ export class UISourceCodeFrame extends SourceFrame.SourceFrame.SourceFrameImpl {
     this._boundOnBindingChanged = this._onBindingChanged.bind(this);
 
     this.textEditor.addEventListener(
-        SourceFrame.SourcesTextEditor.Events.EditorBlurred, () => self.UI.context.setFlavor(UISourceCodeFrame, null));
+        SourceFrame.SourcesTextEditor.Events.EditorBlurred,
+        () => UI.Context.Context.instance().setFlavor(UISourceCodeFrame, null));
     this.textEditor.addEventListener(
-        SourceFrame.SourcesTextEditor.Events.EditorFocused, () => self.UI.context.setFlavor(UISourceCodeFrame, this));
+        SourceFrame.SourcesTextEditor.Events.EditorFocused,
+        () => UI.Context.Context.instance().setFlavor(UISourceCodeFrame, this));
     Common.Settings.Settings.instance()
         .moduleSetting('persistenceNetworkOverridesEnabled')
         .addChangeListener(this._onNetworkPersistenceChanged, this);
@@ -224,7 +226,7 @@ export class UISourceCodeFrame extends SourceFrame.SourceFrame.SourceFrameImpl {
       plugin.willHide();
     }
     super.willHide();
-    self.UI.context.setFlavor(UISourceCodeFrame, null);
+    UI.Context.Context.instance().setFlavor(UISourceCodeFrame, null);
     this._uiSourceCode.removeWorkingCopyGetter();
   }
 
diff --git a/front_end/sources/WatchExpressionsSidebarPane.js b/front_end/sources/WatchExpressionsSidebarPane.js
index d8d418905c..ef16484290 100644
--- a/front_end/sources/WatchExpressionsSidebarPane.js
+++ b/front_end/sources/WatchExpressionsSidebarPane.js
@@ -75,8 +75,8 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this._expandController =
         new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this._treeOutline);
 
-    self.UI.context.addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
-    self.UI.context.addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.update, this);
     this._linkifier = new Components.Linkifier.Linkifier();
     this.update();
   }
@@ -248,7 +248,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const frame = self.UI.context.flavor(UISourceCodeFrame);
+    const frame = UI.Context.Context.instance().flavor(UISourceCodeFrame);
     if (!frame) {
       return false;
     }
@@ -276,7 +276,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
           ls`Add property path to watch`, this._addPropertyPathToWatch.bind(this, target));
     }
 
-    const frame = self.UI.context.flavor(UISourceCodeFrame);
+    const frame = UI.Context.Context.instance().flavor(UISourceCodeFrame);
     if (!frame || frame.textEditor.selection().isEmpty()) {
       return;
     }
@@ -323,7 +323,7 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper {
   }
 
   update() {
-    const currentExecutionContext = self.UI.context.flavor(SDK.RuntimeModel.ExecutionContext);
+    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext && this._expression) {
       currentExecutionContext
           .evaluate(
diff --git a/front_end/timeline/TimelinePanel.js b/front_end/timeline/TimelinePanel.js
index 702be8fe69..a3bae583b5 100644
--- a/front_end/timeline/TimelinePanel.js
+++ b/front_end/timeline/TimelinePanel.js
@@ -173,7 +173,7 @@ export class TimelinePanel extends UI.Panel.Panel {
    * @override
    */
   wasShown() {
-    self.UI.context.setFlavor(TimelinePanel, this);
+    UI.Context.Context.instance().setFlavor(TimelinePanel, this);
     // Record the performance tool load time.
     Host.userMetrics.panelLoaded('timeline', 'DevTools.Launch.Timeline');
   }
@@ -182,7 +182,7 @@ export class TimelinePanel extends UI.Panel.Panel {
    * @override
    */
   willHide() {
-    self.UI.context.setFlavor(TimelinePanel, null);
+    UI.Context.Context.instance().setFlavor(TimelinePanel, null);
     this._historyManager.cancelIfShowing();
   }
 
@@ -1325,7 +1325,7 @@ export class ActionDelegate {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    const panel = self.UI.context.flavor(TimelinePanel);
+    const panel = UI.Context.Context.instance().flavor(TimelinePanel);
     console.assert(panel && panel instanceof TimelinePanel);
     switch (actionId) {
       case 'timeline.toggle-recording':
diff --git a/front_end/ui/Action.js b/front_end/ui/Action.js
index 1d64a5bb9e..2763ae3684 100644
--- a/front_end/ui/Action.js
+++ b/front_end/ui/Action.js
@@ -4,7 +4,9 @@
 
 import * as Common from '../common/common.js';
 import * as Root from '../root/root.js';
+
 import {ActionDelegate} from './ActionDelegate.js';  // eslint-disable-line no-unused-vars
+import {Context} from './Context.js';
 
 class ActionRuntimeExtensionDescriptor extends  // eslint-disable-line no-unused-vars
     Root.Runtime.RuntimeExtensionDescriptor {
@@ -75,9 +77,7 @@ export class Action extends Common.ObjectWrapper.ObjectWrapper {
     }
     const delegate = /** @type {!ActionDelegate} */ (await this._extension.instance());
     const actionId = this.id();
-    // @ts-ignore
-    // TODO(crbug.com/1011811): Replace self.UI.context global.
-    return delegate.handleAction(self.UI.context, actionId);
+    return delegate.handleAction(Context.instance(), actionId);
   }
 
   /**
diff --git a/front_end/ui/ActionRegistry.js b/front_end/ui/ActionRegistry.js
index dbe5b7bf59..35b5e56862 100644
--- a/front_end/ui/ActionRegistry.js
+++ b/front_end/ui/ActionRegistry.js
@@ -11,6 +11,9 @@ import {Context} from './Context.js';  // eslint-disable-line no-unused-vars
 let actionRegistryInstance;
 
 export class ActionRegistry {
+  /**
+   * @private
+   */
   constructor() {
     /** @type {!Map.<string, !Action>} */
     this._actionsById = new Map();
@@ -62,9 +65,7 @@ export class ActionRegistry {
    * @return {!Array.<!Action>}
    */
   availableActions() {
-    // @ts-ignore
-    // TODO(crbug.com/1058320): Replace self.UI.context global.
-    return this.applicableActions([...this._actionsById.keys()], self.UI.context);
+    return this.applicableActions([...this._actionsById.keys()], Context.instance());
   }
 
   /**
diff --git a/front_end/ui/Context.js b/front_end/ui/Context.js
index fefa4a62d2..13d7fd42da 100644
--- a/front_end/ui/Context.js
+++ b/front_end/ui/Context.js
@@ -6,13 +6,30 @@ import * as Common from '../common/common.js';
 import * as Root from '../root/root.js';  // eslint-disable-line no-unused-vars
 import {ContextFlavorListener} from './ContextFlavorListener.js';
 
+/** @type {!Context} */
+let contextInstance;
 
 export class Context {
+  /**
+   * @private
+   */
   constructor() {
     this._flavors = new Map();
     this._eventDispatchers = new Map();
   }
 
+  /**
+   * @param {{forceNew: ?boolean}} opts
+   */
+  static instance(opts = {forceNew: null}) {
+    const {forceNew} = opts;
+    if (!contextInstance || forceNew) {
+      contextInstance = new Context();
+    }
+
+    return contextInstance;
+  }
+
   /**
    * @param {function(new:T, ...?):void} flavorType
    * @param {?T} flavorValue
diff --git a/front_end/ui/ForwardedInputEventHandler.js b/front_end/ui/ForwardedInputEventHandler.js
index a13f3424e7..ee767d1860 100644
--- a/front_end/ui/ForwardedInputEventHandler.js
+++ b/front_end/ui/ForwardedInputEventHandler.js
@@ -30,12 +30,10 @@ export class ForwardedInputEventHandler {
       return;
     }
 
-    // @ts-ignore
-    // TODO(crbug.com/1058320): Replace self.UI.context global.
-    const context = /** @type {!Context} */ (self.UI.context);
+    const context = Context.instance();
 
     // @ts-ignore
-    // TODO(crbug.com/1058320): Replace self.UI.context global.
+    // TODO(crbug.com/1058320): Replace self.UI.shortcutRegistry global.
     const shortcutRegistry = /** @type {!ShortcutRegistry} */ (self.UI.shortcutRegistry);
 
     context.setFlavor(ForwardedShortcut, ForwardedShortcut.instance);
diff --git a/front_end/ui/ShortcutRegistry.js b/front_end/ui/ShortcutRegistry.js
index 5e543c0308..5102ec57c2 100644
--- a/front_end/ui/ShortcutRegistry.js
+++ b/front_end/ui/ShortcutRegistry.js
@@ -60,7 +60,7 @@ export class ShortcutRegistry {
     if (keyNode) {
       actions = keyNode.actions();
     }
-    const applicableActions = this._actionRegistry.applicableActions(actions, self.UI.context);
+    const applicableActions = this._actionRegistry.applicableActions(actions, Context.instance());
     if (keyNode) {
       for (const actionId of Object.keys(handlers)) {
         if (keyNode.actions().indexOf(actionId) >= 0) {
@@ -89,7 +89,7 @@ export class ShortcutRegistry {
     const keys = [];
     for (const node of this._keyMap.chords().values()) {
       const actions = node.actions();
-      const applicableActions = this._actionRegistry.applicableActions(actions, new Context());
+      const applicableActions = this._actionRegistry.applicableActions(actions, Context.instance());
       if (applicableActions.length || node.hasChords()) {
         keys.push(node.key());
       }
diff --git a/front_end/ui/ui-legacy.js b/front_end/ui/ui-legacy.js
index af00ab1125..afbcc89212 100644
--- a/front_end/ui/ui-legacy.js
+++ b/front_end/ui/ui-legacy.js
@@ -250,7 +250,7 @@ UI.XLink = UIModule.XLink.XLink;
 UI.XLink.ContextMenuProvider = UIModule.XLink.ContextMenuProvider;
 
 /** @type {!UIModule.Context.Context} */
-self.UI.context = new UIModule.Context.Context();
+self.UI.context = UIModule.Context.Context.instance();
 
 
 /**