DevTools: rename WebInspector into modules.

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 10 matching lines @@
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-WebInspector.highlightedSearchResultClassName = 'highlighted-search-result';
-WebInspector.highlightedCurrentSearchResultClassName = 'current-search-result';
+UI.highlightedSearchResultClassName = 'highlighted-search-result';
+UI.highlightedCurrentSearchResultClassName = 'current-search-result';
 
 /**
  * @param {!Element} element
  * @param {?function(!MouseEvent): boolean} elementDragStart
  * @param {function(!MouseEvent)} elementDrag
  * @param {?function(!MouseEvent)} elementDragEnd
  * @param {string} cursor
  * @param {?string=} hoverCursor
  * @param {number=} startDelay
  */
-WebInspector.installDragHandle = function(
+UI.installDragHandle = function(
     element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay) {
   /**
    * @param {!Event} event
    */
   function onMouseDown(event) {
-    var dragHandler = new WebInspector.DragHandler();
+    var dragHandler = new UI.DragHandler();
     var dragStart = dragHandler.elementDragStart.bind(
         dragHandler, element, elementDragStart, elementDrag, elementDragEnd, cursor, event);
     if (startDelay)
       startTimer = setTimeout(dragStart, startDelay);
     else
       dragStart();
   }
 
   function onMouseUp() {
     if (startTimer)
@@ skipping 10 matching lines @@
 };
 
 /**
  * @param {!Element} targetElement
  * @param {?function(!MouseEvent):boolean} elementDragStart
  * @param {function(!MouseEvent)} elementDrag
  * @param {?function(!MouseEvent)} elementDragEnd
  * @param {string} cursor
  * @param {!Event} event
  */
-WebInspector.elementDragStart = function(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event) {
-  var dragHandler = new WebInspector.DragHandler();
+UI.elementDragStart = function(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event) {
+  var dragHandler = new UI.DragHandler();
   dragHandler.elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event);
 };
 
 /**
  * @unrestricted
  */
-WebInspector.DragHandler = class {
+UI.DragHandler = class {
   constructor() {
     this._elementDragMove = this._elementDragMove.bind(this);
     this._elementDragEnd = this._elementDragEnd.bind(this);
     this._mouseOutWhileDragging = this._mouseOutWhileDragging.bind(this);
   }
 
   _createGlassPane() {
     this._glassPaneInUse = true;
-    if (!WebInspector.DragHandler._glassPaneUsageCount++)
-      WebInspector.DragHandler._glassPane = new WebInspector.GlassPane(WebInspector.DragHandler._documentForMouseOut);
+    if (!UI.DragHandler._glassPaneUsageCount++)
+      UI.DragHandler._glassPane = new UI.GlassPane(UI.DragHandler._documentForMouseOut);
   }
 
   _disposeGlassPane() {
     if (!this._glassPaneInUse)
       return;
     this._glassPaneInUse = false;
-    if (--WebInspector.DragHandler._glassPaneUsageCount)
+    if (--UI.DragHandler._glassPaneUsageCount)
       return;
-    WebInspector.DragHandler._glassPane.dispose();
-    delete WebInspector.DragHandler._glassPane;
-    delete WebInspector.DragHandler._documentForMouseOut;
+    UI.DragHandler._glassPane.dispose();
+    delete UI.DragHandler._glassPane;
+    delete UI.DragHandler._documentForMouseOut;
   }
 
   /**
    * @param {!Element} targetElement
    * @param {?function(!MouseEvent):boolean} elementDragStart
    * @param {function(!MouseEvent)} elementDrag
    * @param {?function(!MouseEvent)} elementDragEnd
    * @param {string} cursor
    * @param {!Event} event
    */
   elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event) {
     // Only drag upon left button. Right will likely cause a context menu. So will ctrl-click on mac.
-    if (event.button || (WebInspector.isMac() && event.ctrlKey))
+    if (event.button || (Host.isMac() && event.ctrlKey))
       return;
 
     if (this._elementDraggingEventListener)
       return;
 
     if (elementDragStart && !elementDragStart(/** @type {!MouseEvent} */ (event)))
       return;
 
     var targetDocument = event.target.ownerDocument;
     this._elementDraggingEventListener = elementDrag;
     this._elementEndDraggingEventListener = elementDragEnd;
     console.assert(
-        (WebInspector.DragHandler._documentForMouseOut || targetDocument) === targetDocument,
+        (UI.DragHandler._documentForMouseOut || targetDocument) === targetDocument,
         'Dragging on multiple documents.');
-    WebInspector.DragHandler._documentForMouseOut = targetDocument;
+    UI.DragHandler._documentForMouseOut = targetDocument;
     this._dragEventsTargetDocument = targetDocument;
     this._dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
 
     targetDocument.addEventListener('mousemove', this._elementDragMove, true);
     targetDocument.addEventListener('mouseup', this._elementDragEnd, true);
     targetDocument.addEventListener('mouseout', this._mouseOutWhileDragging, true);
     if (targetDocument !== this._dragEventsTargetDocumentTop)
       this._dragEventsTargetDocumentTop.addEventListener('mouseup', this._elementDragEnd, true);
 
     if (typeof cursor === 'string') {
       this._restoreCursorAfterDrag = restoreCursor.bind(this, targetElement.style.cursor);
       targetElement.style.cursor = cursor;
       targetDocument.body.style.cursor = cursor;
     }
     /**
      * @param {string} oldCursor
-     * @this {WebInspector.DragHandler}
+     * @this {UI.DragHandler}
      */
     function restoreCursor(oldCursor) {
       targetDocument.body.style.removeProperty('cursor');
       targetElement.style.cursor = oldCursor;
       this._restoreCursorAfterDrag = null;
     }
     event.preventDefault();
   }
 
   _mouseOutWhileDragging() {
     this._unregisterMouseOutWhileDragging();
     this._createGlassPane();
   }
 
   _unregisterMouseOutWhileDragging() {
-    if (!WebInspector.DragHandler._documentForMouseOut)
+    if (!UI.DragHandler._documentForMouseOut)
       return;
-    WebInspector.DragHandler._documentForMouseOut.removeEventListener('mouseout', this._mouseOutWhileDragging, true);
+    UI.DragHandler._documentForMouseOut.removeEventListener('mouseout', this._mouseOutWhileDragging, true);
   }
 
   _unregisterDragEvents() {
     if (!this._dragEventsTargetDocument)
       return;
     this._dragEventsTargetDocument.removeEventListener('mousemove', this._elementDragMove, true);
     this._dragEventsTargetDocument.removeEventListener('mouseup', this._elementDragEnd, true);
     if (this._dragEventsTargetDocument !== this._dragEventsTargetDocumentTop)
       this._dragEventsTargetDocumentTop.removeEventListener('mouseup', this._elementDragEnd, true);
     delete this._dragEventsTargetDocument;
@@ skipping 33 matching lines @@
    */
   _elementDragEnd(event) {
     var elementDragEnd = this._elementEndDraggingEventListener;
     this._cancelDragEvents(/** @type {!MouseEvent} */ (event));
     event.preventDefault();
     if (elementDragEnd)
       elementDragEnd(/** @type {!MouseEvent} */ (event));
   }
 };
 
-WebInspector.DragHandler._glassPaneUsageCount = 0;
+UI.DragHandler._glassPaneUsageCount = 0;
 
 /**
  * @param {!Element} element
  * @param {function(number, number, !MouseEvent): boolean} elementDragStart
  * @param {function(number, number)} elementDrag
  * @param {function(number, number)} elementDragEnd
  * @param {string} cursor
  * @param {?string=} hoverCursor
  * @param {number=} startDelay
  * @param {number=} friction
  */
-WebInspector.installInertialDragHandle = function(
+UI.installInertialDragHandle = function(
     element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay, friction) {
-  WebInspector.installDragHandle(
+  UI.installDragHandle(
       element, drag.bind(null, elementDragStart), drag.bind(null, elementDrag), dragEnd, cursor, hoverCursor,
       startDelay);
   if (typeof friction !== 'number')
     friction = 50;
   var lastX;
   var lastY;
   var lastTime;
   var velocityX;
   var velocityY;
   var holding = false;
@@ skipping 44 matching lines @@
     var k = Math.pow(1 / (1 + friction), duration / 1000);
     velocityX *= k;
     velocityY *= k;
     elementDrag(lastX, lastY);
   }
 };
 
 /**
  * @unrestricted
  */
-WebInspector.GlassPane = class {
+UI.GlassPane = class {
   /**
    * @param {!Document} document
    * @param {boolean=} dimmed
    */
   constructor(document, dimmed) {
     this.element = createElement('div');
     var background = dimmed ? 'rgba(255, 255, 255, 0.5)' : 'transparent';
-    this._zIndex = WebInspector._glassPane ?
-        WebInspector._glassPane._zIndex + 1000 :
+    this._zIndex = UI._glassPane ?
+        UI._glassPane._zIndex + 1000 :
         3000;  // Deliberately starts with 3000 to hide other z-indexed elements below.
     this.element.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;background-color:' + background +
         ';z-index:' + this._zIndex + ';overflow:hidden;';
     document.body.appendChild(this.element);
-    WebInspector._glassPane = this;
+    UI._glassPane = this;
     // TODO(dgozman): disallow focus outside of glass pane?
   }
 
   dispose() {
-    delete WebInspector._glassPane;
+    delete UI._glassPane;
     this.element.remove();
   }
 };
 
-/** @type {!WebInspector.GlassPane|undefined} */
-WebInspector._glassPane;
+/** @type {!UI.GlassPane|undefined} */
+UI._glassPane;
 
 /**
  * @param {?Node=} node
  * @return {boolean}
  */
-WebInspector.isBeingEdited = function(node) {
+UI.isBeingEdited = function(node) {
   if (!node || node.nodeType !== Node.ELEMENT_NODE)
     return false;
   var element = /** {!Element} */ (node);
   if (element.classList.contains('text-prompt') || element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA')
     return true;
 
-  if (!WebInspector.__editingCount)
+  if (!UI.__editingCount)
     return false;
 
   while (element) {
     if (element.__editing)
       return true;
     element = element.parentElementOrShadowHost();
   }
   return false;
 };
 
 /**
  * @return {boolean}
  * @suppressGlobalPropertiesCheck
  */
-WebInspector.isEditing = function() {
-  if (WebInspector.__editingCount)
+UI.isEditing = function() {
+  if (UI.__editingCount)
     return true;
 
   var focused = document.deepActiveElement();
   if (!focused)
     return false;
   return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA';
 };
 
 /**
  * @param {!Element} element
  * @param {boolean} value
  * @return {boolean}
  */
-WebInspector.markBeingEdited = function(element, value) {
+UI.markBeingEdited = function(element, value) {
   if (value) {
     if (element.__editing)
       return false;
     element.classList.add('being-edited');
     element.__editing = true;
-    WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
+    UI.__editingCount = (UI.__editingCount || 0) + 1;
   } else {
     if (!element.__editing)
       return false;
     element.classList.remove('being-edited');
     delete element.__editing;
-    --WebInspector.__editingCount;
+    --UI.__editingCount;
   }
   return true;
 };
 
-WebInspector.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
+UI.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
 
-WebInspector.StyleValueDelimiters = ' \xA0\t\n"\':;,/()';
+UI.StyleValueDelimiters = ' \xA0\t\n"\':;,/()';
 
 /**
  * @param {!Event} event
  * @return {?string}
  */
-WebInspector._valueModificationDirection = function(event) {
+UI._valueModificationDirection = function(event) {
   var direction = null;
   if (event.type === 'mousewheel') {
     // When shift is pressed while spinning mousewheel, delta comes as wheelDeltaX.
     if (event.wheelDeltaY > 0 || event.wheelDeltaX > 0)
       direction = 'Up';
     else if (event.wheelDeltaY < 0 || event.wheelDeltaX < 0)
       direction = 'Down';
   } else {
     if (event.key === 'ArrowUp' || event.key === 'PageUp')
       direction = 'Up';
     else if (event.key === 'ArrowDown' || event.key === 'PageDown')
       direction = 'Down';
   }
   return direction;
 };
 
 /**
  * @param {string} hexString
  * @param {!Event} event
  * @return {?string}
  */
-WebInspector._modifiedHexValue = function(hexString, event) {
-  var direction = WebInspector._valueModificationDirection(event);
+UI._modifiedHexValue = function(hexString, event) {
+  var direction = UI._valueModificationDirection(event);
   if (!direction)
     return null;
 
   var mouseEvent = /** @type {!MouseEvent} */ (event);
   var number = parseInt(hexString, 16);
   if (isNaN(number) || !isFinite(number))
     return null;
 
   var hexStrLen = hexString.length;
   var channelLen = hexStrLen / 3;
 
   // Colors are either rgb or rrggbb.
   if (channelLen !== 1 && channelLen !== 2)
     return null;
 
   // Precision modifier keys work with both mousewheel and up/down keys.
   // When ctrl is pressed, increase R by 1.
   // When shift is pressed, increase G by 1.
   // When alt is pressed, increase B by 1.
   // If no shortcut keys are pressed then increase hex value by 1.
   // Keys can be pressed together to increase RGB channels. e.g trying different shades.
   var delta = 0;
-  if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
+  if (UI.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
     delta += Math.pow(16, channelLen * 2);
   if (mouseEvent.shiftKey)
     delta += Math.pow(16, channelLen);
   if (mouseEvent.altKey)
     delta += 1;
   if (delta === 0)
     delta = 1;
   if (direction === 'Down')
     delta *= -1;
 
   // Increase hex value by 1 and clamp from 0 ... maxValue.
   var maxValue = Math.pow(16, hexStrLen) - 1;
   var result = Number.constrain(number + delta, 0, maxValue);
 
   // Ensure the result length is the same as the original hex value.
   var resultString = result.toString(16).toUpperCase();
   for (var i = 0, lengthDelta = hexStrLen - resultString.length; i < lengthDelta; ++i)
     resultString = '0' + resultString;
   return resultString;
 };
 
 /**
  * @param {number} number
  * @param {!Event} event
  * @return {?number}
  */
-WebInspector._modifiedFloatNumber = function(number, event) {
-  var direction = WebInspector._valueModificationDirection(event);
+UI._modifiedFloatNumber = function(number, event) {
+  var direction = UI._valueModificationDirection(event);
   if (!direction)
     return null;
 
   var mouseEvent = /** @type {!MouseEvent} */ (event);
 
   // Precision modifier keys work with both mousewheel and up/down keys.
   // When ctrl is pressed, increase by 100.
   // When shift is pressed, increase by 10.
   // When alt is pressed, increase by 0.1.
   // Otherwise increase by 1.
   var delta = 1;
-  if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
+  if (UI.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
     delta = 100;
   else if (mouseEvent.shiftKey)
     delta = 10;
   else if (mouseEvent.altKey)
     delta = 0.1;
 
   if (direction === 'Down')
     delta *= -1;
 
   // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
   // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
   var result = Number((number + delta).toFixed(6));
-  if (!String(result).match(WebInspector.CSSNumberRegex))
+  if (!String(result).match(UI.CSSNumberRegex))
     return null;
 
   return result;
 };
 
 /**
  * @param {string} wordString
  * @param {!Event} event
  * @param {function(string, number, string):string=} customNumberHandler
  * @return {?string}
  */
-WebInspector.createReplacementString = function(wordString, event, customNumberHandler) {
+UI.createReplacementString = function(wordString, event, customNumberHandler) {
   var prefix;
   var suffix;
   var number;
   var replacementString = null;
   var matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
   if (matches && matches.length) {
     prefix = matches[1];
     suffix = matches[3];
-    number = WebInspector._modifiedHexValue(matches[2], event);
+    number = UI._modifiedHexValue(matches[2], event);
     if (number !== null)
       replacementString = prefix + number + suffix;
   } else {
     matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
     if (matches && matches.length) {
       prefix = matches[1];
       suffix = matches[3];
-      number = WebInspector._modifiedFloatNumber(parseFloat(matches[2]), event);
+      number = UI._modifiedFloatNumber(parseFloat(matches[2]), event);
       if (number !== null)
         replacementString =
             customNumberHandler ? customNumberHandler(prefix, number, suffix) : prefix + number + suffix;
     }
   }
   return replacementString;
 };
 
 /**
  * @param {!Event} event
  * @param {!Element} element
  * @param {function(string,string)=} finishHandler
  * @param {function(string)=} suggestionHandler
  * @param {function(string, number, string):string=} customNumberHandler
  * @return {boolean}
  */
-WebInspector.handleElementValueModifications = function(
+UI.handleElementValueModifications = function(
     event, element, finishHandler, suggestionHandler, customNumberHandler) {
   /**
    * @return {?Range}
    * @suppressGlobalPropertiesCheck
    */
   function createRange() {
     return document.createRange();
   }
 
   var arrowKeyOrMouseWheelEvent = (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.type === 'mousewheel');
   var pageKeyPressed = (event.key === 'PageUp' || event.key === 'PageDown');
   if (!arrowKeyOrMouseWheelEvent && !pageKeyPressed)
     return false;
 
   var selection = element.getComponentSelection();
   if (!selection.rangeCount)
     return false;
 
   var selectionRange = selection.getRangeAt(0);
   if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
     return false;
 
   var originalValue = element.textContent;
   var wordRange =
-      selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StyleValueDelimiters, element);
+      selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, UI.StyleValueDelimiters, element);
   var wordString = wordRange.toString();
 
   if (suggestionHandler && suggestionHandler(wordString))
     return false;
 
-  var replacementString = WebInspector.createReplacementString(wordString, event, customNumberHandler);
+  var replacementString = UI.createReplacementString(wordString, event, customNumberHandler);
 
   if (replacementString) {
     var replacementTextNode = createTextNode(replacementString);
 
     wordRange.deleteContents();
     wordRange.insertNode(replacementTextNode);
 
     var finalSelectionRange = createRange();
     finalSelectionRange.setStart(replacementTextNode, 0);
     finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
@@ skipping 13 matching lines @@
 };
 
 /**
  * @param {number} ms
  * @param {number=} precision
  * @return {string}
  */
 Number.preciseMillisToString = function(ms, precision) {
   precision = precision || 0;
   var format = '%.' + precision + 'f\u2009ms';
-  return WebInspector.UIString(format, ms);
+  return Common.UIString(format, ms);
 };
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._microsFormat = new WebInspector.UIStringFormat('%.0f\u2009\u03bcs');
+/** @type {!Common.UIStringFormat} */
+UI._microsFormat = new Common.UIStringFormat('%.0f\u2009\u03bcs');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._subMillisFormat = new WebInspector.UIStringFormat('%.2f\u2009ms');
+/** @type {!Common.UIStringFormat} */
+UI._subMillisFormat = new Common.UIStringFormat('%.2f\u2009ms');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._millisFormat = new WebInspector.UIStringFormat('%.0f\u2009ms');
+/** @type {!Common.UIStringFormat} */
+UI._millisFormat = new Common.UIStringFormat('%.0f\u2009ms');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._secondsFormat = new WebInspector.UIStringFormat('%.2f\u2009s');
+/** @type {!Common.UIStringFormat} */
+UI._secondsFormat = new Common.UIStringFormat('%.2f\u2009s');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._minutesFormat = new WebInspector.UIStringFormat('%.1f\u2009min');
+/** @type {!Common.UIStringFormat} */
+UI._minutesFormat = new Common.UIStringFormat('%.1f\u2009min');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._hoursFormat = new WebInspector.UIStringFormat('%.1f\u2009hrs');
+/** @type {!Common.UIStringFormat} */
+UI._hoursFormat = new Common.UIStringFormat('%.1f\u2009hrs');
 
-/** @type {!WebInspector.UIStringFormat} */
-WebInspector._daysFormat = new WebInspector.UIStringFormat('%.1f\u2009days');
+/** @type {!Common.UIStringFormat} */
+UI._daysFormat = new Common.UIStringFormat('%.1f\u2009days');
 
 /**
  * @param {number} ms
  * @param {boolean=} higherResolution
  * @return {string}
  */
 Number.millisToString = function(ms, higherResolution) {
   if (!isFinite(ms))
     return '-';
 
   if (ms === 0)
     return '0';
 
   if (higherResolution && ms < 0.1)
-    return WebInspector._microsFormat.format(ms * 1000);
+    return UI._microsFormat.format(ms * 1000);
   if (higherResolution && ms < 1000)
-    return WebInspector._subMillisFormat.format(ms);
+    return UI._subMillisFormat.format(ms);
   if (ms < 1000)
-    return WebInspector._millisFormat.format(ms);
+    return UI._millisFormat.format(ms);
 
   var seconds = ms / 1000;
   if (seconds < 60)
-    return WebInspector._secondsFormat.format(seconds);
+    return UI._secondsFormat.format(seconds);
 
   var minutes = seconds / 60;
   if (minutes < 60)
-    return WebInspector._minutesFormat.format(minutes);
+    return UI._minutesFormat.format(minutes);
 
   var hours = minutes / 60;
   if (hours < 24)
-    return WebInspector._hoursFormat.format(hours);
+    return UI._hoursFormat.format(hours);
 
   var days = hours / 24;
-  return WebInspector._daysFormat.format(days);
+  return UI._daysFormat.format(days);
 };
 
 /**
  * @param {number} seconds
  * @param {boolean=} higherResolution
  * @return {string}
  */
 Number.secondsToString = function(seconds, higherResolution) {
   if (!isFinite(seconds))
     return '-';
   return Number.millisToString(seconds * 1000, higherResolution);
 };
 
 /**
  * @param {number} bytes
  * @return {string}
  */
 Number.bytesToString = function(bytes) {
   if (bytes < 1024)
-    return WebInspector.UIString('%.0f\u2009B', bytes);
+    return Common.UIString('%.0f\u2009B', bytes);
 
   var kilobytes = bytes / 1024;
   if (kilobytes < 100)
-    return WebInspector.UIString('%.1f\u2009KB', kilobytes);
+    return Common.UIString('%.1f\u2009KB', kilobytes);
   if (kilobytes < 1024)
-    return WebInspector.UIString('%.0f\u2009KB', kilobytes);
+    return Common.UIString('%.0f\u2009KB', kilobytes);
 
   var megabytes = kilobytes / 1024;
   if (megabytes < 100)
-    return WebInspector.UIString('%.1f\u2009MB', megabytes);
+    return Common.UIString('%.1f\u2009MB', megabytes);
   else
-    return WebInspector.UIString('%.0f\u2009MB', megabytes);
+    return Common.UIString('%.0f\u2009MB', megabytes);
 };
 
 /**
  * @param {number} num
  * @return {string}
  */
 Number.withThousandsSeparator = function(num) {
   var str = num + '';
   var re = /(\d+)(\d{3})/;
   while (str.match(re))
     str = str.replace(re, '$1\u2009$2');  // \u2009 is a thin space.
   return str;
 };
 
 /**
  * @param {string} format
  * @param {?ArrayLike} substitutions
  * @return {!Element}
  */
-WebInspector.formatLocalized = function(format, substitutions) {
+UI.formatLocalized = function(format, substitutions) {
   var formatters = {s: substitution => substitution};
   /**
    * @param {!Element} a
    * @param {string|!Element} b
    * @return {!Element}
    */
   function append(a, b) {
     a.appendChild(typeof b === 'string' ? createTextNode(b) : b);
     return a;
   }
-  return String.format(WebInspector.UIString(format), substitutions, formatters, createElement('span'), append)
+  return String.format(Common.UIString(format), substitutions, formatters, createElement('span'), append)
       .formattedResult;
 };
 
 /**
  * @return {string}
  */
-WebInspector.openLinkExternallyLabel = function() {
-  return WebInspector.UIString.capitalize('Open ^link in ^new ^tab');
+UI.openLinkExternallyLabel = function() {
+  return Common.UIString.capitalize('Open ^link in ^new ^tab');
 };
 
 /**
  * @return {string}
  */
-WebInspector.copyLinkAddressLabel = function() {
-  return WebInspector.UIString.capitalize('Copy ^link ^address');
+UI.copyLinkAddressLabel = function() {
+  return Common.UIString.capitalize('Copy ^link ^address');
 };
 
 /**
  * @return {string}
  */
-WebInspector.anotherProfilerActiveLabel = function() {
-  return WebInspector.UIString('Another profiler is already active');
+UI.anotherProfilerActiveLabel = function() {
+  return Common.UIString('Another profiler is already active');
 };
 
 /**
  * @param {string|undefined} description
  * @return {string}
  */
-WebInspector.asyncStackTraceLabel = function(description) {
+UI.asyncStackTraceLabel = function(description) {
   if (description)
-    return description + ' ' + WebInspector.UIString('(async)');
-  return WebInspector.UIString('Async Call');
+    return description + ' ' + Common.UIString('(async)');
+  return Common.UIString('Async Call');
 };
 
 /**
  * @param {!Element} element
  */
-WebInspector.installComponentRootStyles = function(element) {
-  WebInspector.appendStyle(element, 'ui/inspectorCommon.css');
-  WebInspector.themeSupport.injectHighlightStyleSheets(element);
-  element.classList.add('platform-' + WebInspector.platform());
+UI.installComponentRootStyles = function(element) {
+  UI.appendStyle(element, 'ui/inspectorCommon.css');
+  UI.themeSupport.injectHighlightStyleSheets(element);
+  element.classList.add('platform-' + Host.platform());
 };
 
 /**
  * @param {!Element} element
  * @param {string=} cssFile
  * @return {!DocumentFragment}
  */
-WebInspector.createShadowRootWithCoreStyles = function(element, cssFile) {
+UI.createShadowRootWithCoreStyles = function(element, cssFile) {
   var shadowRoot = element.createShadowRoot();
-  WebInspector.appendStyle(shadowRoot, 'ui/inspectorCommon.css');
-  WebInspector.themeSupport.injectHighlightStyleSheets(shadowRoot);
+  UI.appendStyle(shadowRoot, 'ui/inspectorCommon.css');
+  UI.themeSupport.injectHighlightStyleSheets(shadowRoot);
   if (cssFile)
-    WebInspector.appendStyle(shadowRoot, cssFile);
-  shadowRoot.addEventListener('focus', WebInspector._focusChanged.bind(WebInspector), true);
+    UI.appendStyle(shadowRoot, cssFile);
+  shadowRoot.addEventListener('focus', UI._focusChanged.bind(UI), true);
   return shadowRoot;
 };
 
 /**
  * @param {!Document} document
  * @param {!Event} event
  */
-WebInspector._windowFocused = function(document, event) {
+UI._windowFocused = function(document, event) {
   if (event.target.document.nodeType === Node.DOCUMENT_NODE)
     document.body.classList.remove('inactive');
 };
 
 /**
  * @param {!Document} document
  * @param {!Event} event
  */
-WebInspector._windowBlurred = function(document, event) {
+UI._windowBlurred = function(document, event) {
   if (event.target.document.nodeType === Node.DOCUMENT_NODE)
     document.body.classList.add('inactive');
 };
 
 /**
  * @param {!Event} event
  */
-WebInspector._focusChanged = function(event) {
+UI._focusChanged = function(event) {
   var document = event.target && event.target.ownerDocument;
   var element = document ? document.deepActiveElement() : null;
-  WebInspector.Widget.focusWidgetForNode(element);
+  UI.Widget.focusWidgetForNode(element);
 };
 
 /**
  * @unrestricted
  */
-WebInspector.ElementFocusRestorer = class {
+UI.ElementFocusRestorer = class {
   /**
    * @param {!Element} element
    */
   constructor(element) {
     this._element = element;
     this._previous = element.ownerDocument.deepActiveElement();
     element.focus();
   }
 
   restore() {
     if (!this._element)
       return;
     if (this._element.hasFocus() && this._previous)
       this._previous.focus();
     this._previous = null;
     this._element = null;
   }
 };
 
 /**
  * @param {!Element} element
  * @param {number} offset
  * @param {number} length
  * @param {!Array.<!Object>=} domChanges
  * @return {?Element}
  */
-WebInspector.highlightSearchResult = function(element, offset, length, domChanges) {
-  var result = WebInspector.highlightSearchResults(element, [new WebInspector.SourceRange(offset, length)], domChanges);
+UI.highlightSearchResult = function(element, offset, length, domChanges) {
+  var result = UI.highlightSearchResults(element, [new Common.SourceRange(offset, length)], domChanges);
   return result.length ? result[0] : null;
 };
 
 /**
  * @param {!Element} element
- * @param {!Array.<!WebInspector.SourceRange>} resultRanges
+ * @param {!Array.<!Common.SourceRange>} resultRanges
  * @param {!Array.<!Object>=} changes
  * @return {!Array.<!Element>}
  */
-WebInspector.highlightSearchResults = function(element, resultRanges, changes) {
-  return WebInspector.highlightRangesWithStyleClass(
-      element, resultRanges, WebInspector.highlightedSearchResultClassName, changes);
+UI.highlightSearchResults = function(element, resultRanges, changes) {
+  return UI.highlightRangesWithStyleClass(
+      element, resultRanges, UI.highlightedSearchResultClassName, changes);
 };
 
 /**
  * @param {!Element} element
  * @param {string} className
  */
-WebInspector.runCSSAnimationOnce = function(element, className) {
+UI.runCSSAnimationOnce = function(element, className) {
   function animationEndCallback() {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
   }
 
   if (element.classList.contains(className))
     element.classList.remove(className);
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
   element.classList.add(className);
 };
 
 /**
  * @param {!Element} element
- * @param {!Array.<!WebInspector.SourceRange>} resultRanges
+ * @param {!Array.<!Common.SourceRange>} resultRanges
  * @param {string} styleClass
  * @param {!Array.<!Object>=} changes
  * @return {!Array.<!Element>}
  */
-WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes) {
+UI.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes) {
   changes = changes || [];
   var highlightNodes = [];
   var textNodes = element.childTextNodes();
   var lineText = textNodes
                      .map(function(node) {
                        return node.textContent;
                      })
                      .join('');
   var ownerDocument = element.ownerDocument;
 
@@ skipping 61 matching lines @@
         changes.push({node: textNode, type: 'changed', oldText: text, newText: textNode.textContent});
       }
     }
     startIndex = endIndex;
     nodeRanges[startIndex].offset = endOffset;
     nodeRanges[startIndex].length = lastTextNode.textContent.length;
   }
   return highlightNodes;
 };
 
-WebInspector.applyDomChanges = function(domChanges) {
+UI.applyDomChanges = function(domChanges) {
   for (var i = 0, size = domChanges.length; i < size; ++i) {
     var entry = domChanges[i];
     switch (entry.type) {
       case 'added':
         entry.parent.insertBefore(entry.node, entry.nextSibling);
         break;
       case 'changed':
         entry.node.textContent = entry.newText;
         break;
     }
   }
 };
 
-WebInspector.revertDomChanges = function(domChanges) {
+UI.revertDomChanges = function(domChanges) {
   for (var i = domChanges.length - 1; i >= 0; --i) {
     var entry = domChanges[i];
     switch (entry.type) {
       case 'added':
         entry.node.remove();
         break;
       case 'changed':
         entry.node.textContent = entry.oldText;
         break;
     }
   }
 };
 
 /**
  * @param {!Element} element
  * @param {?Element=} containerElement
  * @return {!Size}
  */
-WebInspector.measurePreferredSize = function(element, containerElement) {
+UI.measurePreferredSize = function(element, containerElement) {
   var oldParent = element.parentElement;
   var oldNextSibling = element.nextSibling;
   containerElement = containerElement || element.ownerDocument.body;
   containerElement.appendChild(element);
   element.positionAt(0, 0);
   var result = new Size(element.offsetWidth, element.offsetHeight);
 
   element.positionAt(undefined, undefined);
   if (oldParent)
     oldParent.insertBefore(element, oldNextSibling);
   else
     element.remove();
   return result;
 };
 
 /**
  * @unrestricted
  */
-WebInspector.InvokeOnceHandlers = class {
+UI.InvokeOnceHandlers = class {
   /**
    * @param {boolean} autoInvoke
    */
   constructor(autoInvoke) {
     this._handlers = null;
     this._autoInvoke = autoInvoke;
   }
 
   /**
    * @param {!Object} object
@@ skipping 27 matching lines @@
     var keys = handlers.keysArray();
     for (var i = 0; i < keys.length; ++i) {
       var object = keys[i];
       var methods = handlers.get(object).valuesArray();
       for (var j = 0; j < methods.length; ++j)
         methods[j].call(object);
     }
   }
 };
 
-WebInspector._coalescingLevel = 0;
-WebInspector._postUpdateHandlers = null;
+UI._coalescingLevel = 0;
+UI._postUpdateHandlers = null;
 
-WebInspector.startBatchUpdate = function() {
-  if (!WebInspector._coalescingLevel++)
-    WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(false);
+UI.startBatchUpdate = function() {
+  if (!UI._coalescingLevel++)
+    UI._postUpdateHandlers = new UI.InvokeOnceHandlers(false);
 };
 
-WebInspector.endBatchUpdate = function() {
-  if (--WebInspector._coalescingLevel)
+UI.endBatchUpdate = function() {
+  if (--UI._coalescingLevel)
     return;
-  WebInspector._postUpdateHandlers.scheduleInvoke();
-  WebInspector._postUpdateHandlers = null;
+  UI._postUpdateHandlers.scheduleInvoke();
+  UI._postUpdateHandlers = null;
 };
 
 /**
  * @param {!Object} object
  * @param {function()} method
  */
-WebInspector.invokeOnceAfterBatchUpdate = function(object, method) {
-  if (!WebInspector._postUpdateHandlers)
-    WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(true);
-  WebInspector._postUpdateHandlers.add(object, method);
+UI.invokeOnceAfterBatchUpdate = function(object, method) {
+  if (!UI._postUpdateHandlers)
+    UI._postUpdateHandlers = new UI.InvokeOnceHandlers(true);
+  UI._postUpdateHandlers.add(object, method);
 };
 
 /**
  * @param {!Window} window
  * @param {!Function} func
  * @param {!Array.<{from:number, to:number}>} params
  * @param {number} frames
  * @param {function()=} animationComplete
  * @return {function()}
  */
-WebInspector.animateFunction = function(window, func, params, frames, animationComplete) {
+UI.animateFunction = function(window, func, params, frames, animationComplete) {
   var values = new Array(params.length);
   var deltas = new Array(params.length);
   for (var i = 0; i < params.length; ++i) {
     values[i] = params[i].from;
     deltas[i] = (params[i].to - params[i].from) / frames;
   }
 
   var raf = window.requestAnimationFrame(animationStep);
 
   var framesLeft = frames;
@@ skipping 17 matching lines @@
   function cancelAnimation() {
     window.cancelAnimationFrame(raf);
   }
 
   return cancelAnimation;
 };
 
 /**
  * @unrestricted
  */
-WebInspector.LongClickController = class extends WebInspector.Object {
+UI.LongClickController = class extends Common.Object {
   /**
    * @param {!Element} element
    * @param {function(!Event)} callback
    */
   constructor(element, callback) {
     super();
     this._element = element;
     this._callback = callback;
     this._enable();
   }
@@ skipping 14 matching lines @@
 
     this._element.addEventListener('mousedown', boundMouseDown, false);
     this._element.addEventListener('mouseout', boundReset, false);
     this._element.addEventListener('mouseup', boundMouseUp, false);
     this._element.addEventListener('click', boundReset, true);
 
     this._longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
 
     /**
      * @param {!Event} e
-     * @this {WebInspector.LongClickController}
+     * @this {UI.LongClickController}
      */
     function mouseDown(e) {
       if (e.which !== 1)
         return;
       var callback = this._callback;
       this._longClickInterval = setTimeout(callback.bind(null, e), 200);
     }
 
     /**
      * @param {!Event} e
-     * @this {WebInspector.LongClickController}
+     * @this {UI.LongClickController}
      */
     function mouseUp(e) {
       if (e.which !== 1)
         return;
       this.reset();
     }
   }
 
   dispose() {
     if (!this._longClickData)
       return;
     this._element.removeEventListener('mousedown', this._longClickData.mouseDown, false);
     this._element.removeEventListener('mouseout', this._longClickData.reset, false);
     this._element.removeEventListener('mouseup', this._longClickData.mouseUp, false);
     this._element.addEventListener('click', this._longClickData.reset, true);
     delete this._longClickData;
   }
 };
 
 /**
  * @param {!Document} document
- * @param {!WebInspector.Setting} themeSetting
+ * @param {!Common.Setting} themeSetting
  */
-WebInspector.initializeUIUtils = function(document, themeSetting) {
-  document.defaultView.addEventListener('focus', WebInspector._windowFocused.bind(WebInspector, document), false);
-  document.defaultView.addEventListener('blur', WebInspector._windowBlurred.bind(WebInspector, document), false);
-  document.addEventListener('focus', WebInspector._focusChanged.bind(WebInspector), true);
+UI.initializeUIUtils = function(document, themeSetting) {
+  document.defaultView.addEventListener('focus', UI._windowFocused.bind(UI, document), false);
+  document.defaultView.addEventListener('blur', UI._windowBlurred.bind(UI, document), false);
+  document.addEventListener('focus', UI._focusChanged.bind(UI), true);
 
-  if (!WebInspector.themeSupport)
-    WebInspector.themeSupport = new WebInspector.ThemeSupport(themeSetting);
-  WebInspector.themeSupport.applyTheme(document);
+  if (!UI.themeSupport)
+    UI.themeSupport = new UI.ThemeSupport(themeSetting);
+  UI.themeSupport.applyTheme(document);
 
   var body = /** @type {!Element} */ (document.body);
-  WebInspector.appendStyle(body, 'ui/inspectorStyle.css');
-  WebInspector.appendStyle(body, 'ui/popover.css');
+  UI.appendStyle(body, 'ui/inspectorStyle.css');
+  UI.appendStyle(body, 'ui/popover.css');
 };
 
 /**
  * @param {string} name
  * @return {string}
  */
-WebInspector.beautifyFunctionName = function(name) {
-  return name || WebInspector.UIString('(anonymous)');
+UI.beautifyFunctionName = function(name) {
+  return name || Common.UIString('(anonymous)');
 };
 
 /**
  * @param {string} localName
  * @param {string} typeExtension
  * @param {!Object} prototype
  * @return {function()}
  * @suppressGlobalPropertiesCheck
  * @template T
  */
@@ skipping 77 matching lines @@
   element.sliderElement.step = 1;
   element.sliderElement.tabIndex = tabIndex;
   return element;
 }
 
 /**
  * @param {!Node} node
  * @param {string} cssFile
  * @suppressGlobalPropertiesCheck
  */
-WebInspector.appendStyle =
-    function(node, cssFile) {
+UI.appendStyle = function(node, cssFile) {
   var content = Runtime.cachedResources[cssFile] || '';
   if (!content)
     console.error(cssFile + ' not preloaded. Check module.json');
   var styleElement = createElement('style');
   styleElement.type = 'text/css';
   styleElement.textContent = content;
   node.appendChild(styleElement);
 
-  var themeStyleSheet = WebInspector.themeSupport.themeStyleSheet(cssFile, content);
+  var themeStyleSheet = UI.themeSupport.themeStyleSheet(cssFile, content);
   if (themeStyleSheet) {
     styleElement = createElement('style');
     styleElement.type = 'text/css';
     styleElement.textContent = themeStyleSheet + '\n' + Runtime.resolveSourceURL(cssFile + '.theme');
     node.appendChild(styleElement);
   }
 }
 
 ;
 (function() {
   registerCustomElement('button', 'text-button', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
       this.type = 'button';
-      var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/textButton.css');
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/textButton.css');
       root.createChild('content');
     },
 
     __proto__: HTMLButtonElement.prototype
   });
 
   registerCustomElement('label', 'dt-radio', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
       this.radioElement = this.createChild('input', 'dt-radio-button');
       this.radioElement.type = 'radio';
-      var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/radioButton.css');
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/radioButton.css');
       root.createChild('content').select = '.dt-radio-button';
       root.createChild('content');
       this.addEventListener('click', radioClickHandler, false);
     },
 
     __proto__: HTMLLabelElement.prototype
   });
 
   /**
    * @param {!Event} event
    * @suppressReceiverCheck
    * @this {Element}
    */
   function radioClickHandler(event) {
     if (this.radioElement.checked || this.radioElement.disabled)
       return;
     this.radioElement.checked = true;
     this.radioElement.dispatchEvent(new Event('change'));
   }
 
   registerCustomElement('label', 'dt-checkbox', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
-      this._root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/checkboxTextLabel.css');
+      this._root = UI.createShadowRootWithCoreStyles(this, 'ui/checkboxTextLabel.css');
       var checkboxElement = createElementWithClass('input', 'dt-checkbox-button');
       checkboxElement.type = 'checkbox';
       this._root.appendChild(checkboxElement);
       this.checkboxElement = checkboxElement;
 
       this.addEventListener('click', toggleCheckbox.bind(this));
 
       /**
        * @param {!Event} event
        * @this {Node}
@@ skipping 46 matching lines @@
     },
 
     __proto__: HTMLLabelElement.prototype
   });
 
   registerCustomElement('label', 'dt-icon-label', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
-      var root = WebInspector.createShadowRootWithCoreStyles(this);
-      this._iconElement = WebInspector.Icon.create();
+      var root = UI.createShadowRootWithCoreStyles(this);
+      this._iconElement = UI.Icon.create();
       this._iconElement.style.setProperty('margin-right', '4px');
       root.appendChild(this._iconElement);
       root.createChild('content');
     },
 
     /**
      * @param {string} type
      * @this {Element}
      */
     set type(type) {
       this._iconElement.setIconType(type);
     },
 
     __proto__: HTMLLabelElement.prototype
   });
 
   registerCustomElement('label', 'dt-slider', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
-      var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/slider.css');
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/slider.css');
       this.sliderElement = createElementWithClass('input', 'dt-range-input');
       this.sliderElement.type = 'range';
       root.appendChild(this.sliderElement);
     },
 
     /**
      * @param {number} amount
      * @this {Element}
      */
     set value(amount) {
       this.sliderElement.value = amount;
     },
 
     /**
      * @this {Element}
      */
     get value() {
       return this.sliderElement.value;
     },
 
     __proto__: HTMLLabelElement.prototype
   });
 
   registerCustomElement('label', 'dt-small-bubble', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
-      var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/smallBubble.css');
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/smallBubble.css');
       this._textElement = root.createChild('div');
       this._textElement.className = 'info';
       this._textElement.createChild('content');
     },
 
     /**
      * @param {string} type
      * @this {Element}
      */
     set type(type) {
       this._textElement.className = type;
     },
 
     __proto__: HTMLLabelElement.prototype
   });
 
   registerCustomElement('div', 'dt-close-button', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
-      var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/closeButton.css');
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/closeButton.css');
       this._buttonElement = root.createChild('div', 'close-button');
     },
 
     /**
      * @param {boolean} gray
      * @this {Element}
      */
     set gray(gray) {
       this._buttonElement.className = gray ? 'close-button-gray' : 'close-button';
     },
 
     __proto__: HTMLDivElement.prototype
   });
 })();
 
 /**
  * @param {!Element} input
  * @param {function(string)} apply
  * @param {function(string):boolean} validate
  * @param {boolean} numeric
  * @return {function(string)}
  */
-WebInspector.bindInput = function(input, apply, validate, numeric) {
+UI.bindInput = function(input, apply, validate, numeric) {
   input.addEventListener('change', onChange, false);
   input.addEventListener('input', onInput, false);
   input.addEventListener('keydown', onKeyDown, false);
   input.addEventListener('focus', input.select.bind(input), false);
 
   function onInput() {
     input.classList.toggle('error-input', !validate(input.value));
   }
 
   function onChange() {
@@ skipping 49 matching lines @@
 
   return setValue;
 };
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {string} text
    * @param {number} maxWidth
    * @return {string}
    */
-WebInspector.trimTextMiddle = function(context, text, maxWidth) {
+UI.trimTextMiddle = function(context, text, maxWidth) {
   const maxLength = 200;
   if (maxWidth <= 10)
     return '';
   if (text.length > maxLength)
     text = text.trimMiddle(maxLength);
-  const textWidth = WebInspector.measureTextWidth(context, text);
+  const textWidth = UI.measureTextWidth(context, text);
   if (textWidth <= maxWidth)
     return text;
 
   var l = 0;
   var r = text.length;
   var lv = 0;
   var rv = textWidth;
   while (l < r && lv !== rv && lv !== maxWidth) {
     const m = Math.ceil(l + (r - l) * (maxWidth - lv) / (rv - lv));
-    const mv = WebInspector.measureTextWidth(context, text.trimMiddle(m));
+    const mv = UI.measureTextWidth(context, text.trimMiddle(m));
     if (mv <= maxWidth) {
       l = m;
       lv = mv;
     } else {
       r = m - 1;
       rv = mv;
     }
   }
   text = text.trimMiddle(l);
   return text !== '\u2026' ? text : '';
 };
 
 /**
  * @param {!CanvasRenderingContext2D} context
  * @param {string} text
  * @return {number}
  */
-WebInspector.measureTextWidth = function(context, text) {
+UI.measureTextWidth = function(context, text) {
   const maxCacheableLength = 200;
   if (text.length > maxCacheableLength)
     return context.measureText(text).width;
 
-  var widthCache = WebInspector.measureTextWidth._textWidthCache;
+  var widthCache = UI.measureTextWidth._textWidthCache;
   if (!widthCache) {
     widthCache = new Map();
-    WebInspector.measureTextWidth._textWidthCache = widthCache;
+    UI.measureTextWidth._textWidthCache = widthCache;
   }
   const font = context.font;
   var textWidths = widthCache.get(font);
   if (!textWidths) {
     textWidths = new Map();
     widthCache.set(font, textWidths);
   }
   var width = textWidths.get(text);
   if (!width) {
     width = context.measureText(text).width;
     textWidths.set(text, width);
   }
   return width;
 };
 
 /**
  * @unrestricted
  */
-WebInspector.ThemeSupport = class {
+UI.ThemeSupport = class {
   /**
-   * @param {!WebInspector.Setting} setting
+   * @param {!Common.Setting} setting
    */
   constructor(setting) {
     this._themeName = setting.get() || 'default';
     this._themableProperties = new Set([
       'color', 'box-shadow', 'text-shadow', 'outline-color', 'background-image', 'background-color',
       'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', '-webkit-border-image'
     ]);
     /** @type {!Map<string, string>} */
     this._cachedThemePatches = new Map();
     this._setting = setting;
@@ skipping 11 matching lines @@
    */
   themeName() {
     return this._themeName;
   }
 
   /**
    * @param {!Element} element
    */
   injectHighlightStyleSheets(element) {
     this._injectingStyleSheet = true;
-    WebInspector.appendStyle(element, 'ui/inspectorSyntaxHighlight.css');
+    UI.appendStyle(element, 'ui/inspectorSyntaxHighlight.css');
     if (this._themeName === 'dark')
-      WebInspector.appendStyle(element, 'ui/inspectorSyntaxHighlightDark.css');
+      UI.appendStyle(element, 'ui/inspectorSyntaxHighlightDark.css');
     this._injectingStyleSheet = false;
   }
 
   /**
    * @param {!Document} document
    */
   applyTheme(document) {
     if (!this.hasTheme())
       return;
 
@@ skipping 94 matching lines @@
     var isSelection = selectorText.indexOf('.-theme-selection-color') !== -1;
     if (selectorText.indexOf('-theme-') !== -1 && !isSelection)
       return;
 
     if (name === '-webkit-border-image') {
       output.push('-webkit-filter: invert(100%)');
       return;
     }
 
     isSelection = isSelection || selectorText.indexOf('selected') !== -1 || selectorText.indexOf('.selection') !== -1;
-    var colorUsage = WebInspector.ThemeSupport.ColorUsage.Unknown;
+    var colorUsage = UI.ThemeSupport.ColorUsage.Unknown;
     if (isSelection)
-      colorUsage |= WebInspector.ThemeSupport.ColorUsage.Selection;
+      colorUsage |= UI.ThemeSupport.ColorUsage.Selection;
     if (name.indexOf('background') === 0 || name.indexOf('border') === 0)
-      colorUsage |= WebInspector.ThemeSupport.ColorUsage.Background;
+      colorUsage |= UI.ThemeSupport.ColorUsage.Background;
     if (name.indexOf('background') === -1)
-      colorUsage |= WebInspector.ThemeSupport.ColorUsage.Foreground;
+      colorUsage |= UI.ThemeSupport.ColorUsage.Foreground;
 
     output.push(name);
     output.push(':');
-    var items = value.replace(WebInspector.Color.Regex, '\0$1\0').split('\0');
+    var items = value.replace(Common.Color.Regex, '\0$1\0').split('\0');
     for (var i = 0; i < items.length; ++i)
       output.push(this.patchColor(items[i], colorUsage));
     if (style.getPropertyPriority(name))
       output.push(' !important');
     output.push(';');
   }
 
   /**
    * @param {string} text
-   * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
+   * @param {!UI.ThemeSupport.ColorUsage} colorUsage
    * @return {string}
    */
   patchColor(text, colorUsage) {
-    var color = WebInspector.Color.parse(text);
+    var color = Common.Color.parse(text);
     if (!color)
       return text;
 
     var hsla = color.hsla();
     this._patchHSLA(hsla, colorUsage);
     var rgba = [];
-    WebInspector.Color.hsl2rgb(hsla, rgba);
-    var outColor = new WebInspector.Color(rgba, color.format());
+    Common.Color.hsl2rgb(hsla, rgba);
+    var outColor = new Common.Color(rgba, color.format());
     var outText = outColor.asString(null);
     if (!outText)
-      outText = outColor.asString(outColor.hasAlpha() ? WebInspector.Color.Format.RGBA : WebInspector.Color.Format.RGB);
+      outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
     return outText || text;
   }
 
   /**
    * @param {!Array<number>} hsla
-   * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
+   * @param {!UI.ThemeSupport.ColorUsage} colorUsage
    */
   _patchHSLA(hsla, colorUsage) {
     var hue = hsla[0];
     var sat = hsla[1];
     var lit = hsla[2];
     var alpha = hsla[3];
 
     switch (this._themeName) {
       case 'dark':
-        if (colorUsage & WebInspector.ThemeSupport.ColorUsage.Selection)
+        if (colorUsage & UI.ThemeSupport.ColorUsage.Selection)
           hue = (hue + 0.5) % 1;
-        var minCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Background ? 0.14 : 0;
-        var maxCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
+        var minCap = colorUsage & UI.ThemeSupport.ColorUsage.Background ? 0.14 : 0;
+        var maxCap = colorUsage & UI.ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
         lit = 1 - lit;
         if (lit < minCap * 2)
           lit = minCap + lit / 2;
         else if (lit > 2 * maxCap - 1)
           lit = maxCap - 1 / 2 + lit / 2;
 
         break;
     }
     hsla[0] = Number.constrain(hue, 0, 1);
     hsla[1] = Number.constrain(sat, 0, 1);
     hsla[2] = Number.constrain(lit, 0, 1);
     hsla[3] = Number.constrain(alpha, 0, 1);
   }
 };
 
 /**
  * @enum {number}
  */
-WebInspector.ThemeSupport.ColorUsage = {
+UI.ThemeSupport.ColorUsage = {
   Unknown: 0,
   Foreground: 1 << 0,
   Background: 1 << 1,
   Selection: 1 << 2,
 };
 
 /**
  * @param {string} url
  * @param {string=} linkText
  * @param {string=} classes
  * @param {boolean=} isExternal
  * @param {string=} tooltipText
  * @return {!Element}
  */
-WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText) {
+UI.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText) {
   if (!linkText)
     linkText = url;
 
   var a = createElementWithClass('a', classes);
   var href = url;
   if (url.trim().toLowerCase().startsWith('javascript:'))
     href = null;
-  if (isExternal && WebInspector.ParsedURL.isRelativeURL(url))
+  if (isExternal && Common.ParsedURL.isRelativeURL(url))
     href = null;
   if (href !== null) {
     a.href = href;
     a.classList.add(isExternal ? 'webkit-html-external-link' : 'webkit-html-resource-link');
   }
   if (!tooltipText && linkText !== url)
     a.title = url;
   else if (tooltipText)
     a.title = tooltipText;
   a.textContent = linkText.trimMiddle(150);
   if (isExternal)
     a.setAttribute('target', '_blank');
 
   return a;
 };
 
 /**
  * @param {string} article
  * @param {string} title
  * @return {!Element}
  */
-WebInspector.linkifyDocumentationURLAsNode = function(article, title) {
-  return WebInspector.linkifyURLAsNode(
+UI.linkifyDocumentationURLAsNode = function(article, title) {
+  return UI.linkifyURLAsNode(
       'https://developers.google.com/web/tools/chrome-devtools/' + article, title, undefined, true);
 };
 
 /**
  * @param {string} url
  * @return {!Promise<?Image>}
  */
-WebInspector.loadImage = function(url) {
+UI.loadImage = function(url) {
   return new Promise(fulfill => {
     var image = new Image();
     image.addEventListener('load', () => fulfill(image));
     image.addEventListener('error', () => fulfill(null));
     image.src = url;
   });
 };
 
-/** @type {!WebInspector.ThemeSupport} */
-WebInspector.themeSupport;
+/** @type {!UI.ThemeSupport} */
+UI.themeSupport;