Revert of [DevTools] Consolidate overlay-related functionality in Overlay domain

third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js

 /*
  * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
  * 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 822 matching lines @@
         return Common.ParsedURL.completeURL(frameOwnerCandidate.baseURL, url);
     }
     return null;
   }
 
   /**
    * @param {string=} mode
    * @param {!Protocol.Runtime.RemoteObjectId=} objectId
    */
   highlight(mode, objectId) {
-    this._domModel.overlayModel().highlightDOMNode(this.id, mode, undefined, objectId);
+    this._domModel.highlightDOMNode(this.id, mode, undefined, objectId);
   }
 
   highlightForTwoSeconds() {
-    this._domModel.overlayModel().highlightDOMNodeForTwoSeconds(this.id);
+    this._domModel.highlightDOMNodeForTwoSeconds(this.id);
   }
 
   /**
    * @param {string=} objectGroup
    * @param {function(?SDK.RemoteObject)=} callback
    */
   resolveToObject(objectGroup, callback) {
     this._agent.resolveNode(this.id, objectGroup, mycallback.bind(this));
 
     /**
@@ skipping 146 matching lines @@
 
   /**
    * @return {number}
    */
   backendNodeId() {
     return this._backendNodeId;
   }
 
   highlight() {
     if (this._domModel)
-      this._domModel.overlayModel().highlightDOMNode(undefined, undefined, this._backendNodeId);
+      this._domModel.highlightDOMNode(undefined, undefined, this._backendNodeId);
   }
 };
 
 /**
  * @unrestricted
  */
 SDK.DOMNodeShortcut = class {
   /**
    * @param {!SDK.Target} target
    * @param {number} backendNodeId
@@ skipping 36 matching lines @@
     this._agent = target.domAgent();
 
     /** @type {!Object.<number, !SDK.DOMNode>} */
     this._idToDOMNode = {};
     /** @type {?SDK.DOMDocument} */
     this._document = null;
     /** @type {!Object.<number, boolean>} */
     this._attributeLoadNodeIds = {};
     target.registerDOMDispatcher(new SDK.DOMDispatcher(this));
 
+    this._inspectModeEnabled = false;
     this._runtimeModel = /** @type {!SDK.RuntimeModel} */ (target.model(SDK.RuntimeModel));
 
+    this._defaultHighlighter = new SDK.DefaultDOMNodeHighlighter(this._agent);
+    this._highlighter = this._defaultHighlighter;
+
     this._agent.enable();
   }
 
   /**
    * @return {!SDK.RuntimeModel}
    */
   runtimeModel() {
     return this._runtimeModel;
   }
 
   /**
    * @return {!SDK.CSSModel}
    */
   cssModel() {
     return /** @type {!SDK.CSSModel} */ (this.target().model(SDK.CSSModel));
   }
 
   /**
-   * @return {!SDK.OverlayModel}
+   * @param {!SDK.RemoteObject} object
    */
-  overlayModel() {
-    return /** @type {!SDK.OverlayModel} */ (this.target().model(SDK.OverlayModel));
+  static highlightObjectAsDOMNode(object) {
+    var domModel = object.runtimeModel().target().model(SDK.DOMModel);
+    if (domModel)
+      domModel.highlightDOMNode(undefined, undefined, undefined, object.objectId);
+  }
+
+  static hideDOMNodeHighlight() {
+    for (var domModel of SDK.targetManager.models(SDK.DOMModel))
+      domModel.highlightDOMNode(0);
+  }
+
+  static muteHighlight() {
+    SDK.DOMModel.hideDOMNodeHighlight();
+    SDK.DOMModel._highlightDisabled = true;
+  }
+
+  static unmuteHighlight() {
+    SDK.DOMModel._highlightDisabled = false;
   }
 
   static cancelSearch() {
     for (var domModel of SDK.targetManager.models(SDK.DOMModel))
       domModel._cancelSearch();
   }
 
   /**
    * @param {!SDK.DOMNode} node
    */
@@ skipping 407 matching lines @@
     for (var i = 0; i < node._shadowRoots.length; ++i)
       this._unbind(node._shadowRoots[i]);
     var pseudoElements = node.pseudoElements();
     for (var value of pseudoElements.values())
       this._unbind(value);
     if (node._templateContent)
       this._unbind(node._templateContent);
   }
 
   /**
+   * @param {!Protocol.DOM.BackendNodeId} backendNodeId
+   */
+  _inspectNodeRequested(backendNodeId) {
+    var deferredNode = new SDK.DeferredDOMNode(this.target(), backendNodeId);
+    this.dispatchEventToListeners(SDK.DOMModel.Events.NodeInspected, deferredNode);
+  }
+
+  /**
    * @param {string} query
    * @param {boolean} includeUserAgentShadowDOM
    * @param {function(number)} searchCallback
    */
   performSearch(query, includeUserAgentShadowDOM, searchCallback) {
     SDK.DOMModel.cancelSearch();
 
     /**
      * @param {?Protocol.Error} error
      * @param {string} searchId
@@ skipping 110 matching lines @@
   /**
    * @param {!Protocol.DOM.NodeId} nodeId
    * @param {string} selectors
    * @param {function(?Array<!Protocol.DOM.NodeId>)} callback
    */
   querySelectorAll(nodeId, selectors, callback) {
     this._agent.querySelectorAll(nodeId, selectors, this._wrapClientCallback(callback));
   }
 
   /**
+   * @param {!Protocol.DOM.NodeId=} nodeId
+   * @param {string=} mode
+   * @param {!Protocol.DOM.BackendNodeId=} backendNodeId
+   * @param {!Protocol.Runtime.RemoteObjectId=} objectId
+   */
+  highlightDOMNode(nodeId, mode, backendNodeId, objectId) {
+    this.highlightDOMNodeWithConfig(nodeId, {mode: mode}, backendNodeId, objectId);
+  }
+
+  /**
+   * @param {!Protocol.DOM.NodeId=} nodeId
+   * @param {!{mode: (string|undefined), showInfo: (boolean|undefined), selectors: (string|undefined)}=} config
+   * @param {!Protocol.DOM.BackendNodeId=} backendNodeId
+   * @param {!Protocol.Runtime.RemoteObjectId=} objectId
+   */
+  highlightDOMNodeWithConfig(nodeId, config, backendNodeId, objectId) {
+    if (SDK.DOMModel._highlightDisabled)
+      return;
+    config = config || {mode: 'all', showInfo: undefined, selectors: undefined};
+    if (this._hideDOMNodeHighlightTimeout) {
+      clearTimeout(this._hideDOMNodeHighlightTimeout);
+      delete this._hideDOMNodeHighlightTimeout;
+    }
+    var highlightConfig = this._buildHighlightConfig(config.mode);
+    if (typeof config.showInfo !== 'undefined')
+      highlightConfig.showInfo = config.showInfo;
+    if (typeof config.selectors !== 'undefined')
+      highlightConfig.selectorList = config.selectors;
+    this._highlighter.highlightDOMNode(this.nodeForId(nodeId || 0), highlightConfig, backendNodeId, objectId);
+  }
+
+  /**
+   * @param {!Protocol.DOM.NodeId} nodeId
+   */
+  highlightDOMNodeForTwoSeconds(nodeId) {
+    this.highlightDOMNode(nodeId);
+    this._hideDOMNodeHighlightTimeout = setTimeout(SDK.DOMModel.hideDOMNodeHighlight.bind(SDK.DOMModel), 2000);
+  }
+
+  /**
+   * @param {!Protocol.Page.FrameId} frameId
+   */
+  highlightFrame(frameId) {
+    if (SDK.DOMModel._highlightDisabled)
+      return;
+    this._highlighter.highlightFrame(frameId);
+  }
+
+  /**
+   * @param {!Protocol.DOM.InspectMode} mode
+   * @param {function(?Protocol.Error)=} callback
+   */
+  setInspectMode(mode, callback) {
+    /**
+     * @this {SDK.DOMModel}
+     */
+    function onDocumentAvailable() {
+      this._inspectModeEnabled = mode !== Protocol.DOM.InspectMode.None;
+      this.dispatchEventToListeners(SDK.DOMModel.Events.InspectModeWillBeToggled, this);
+      this._highlighter.setInspectMode(mode, this._buildHighlightConfig(), callback);
+    }
+    this.requestDocument(onDocumentAvailable.bind(this));
+  }
+
+  /**
+   * @return {boolean}
+   */
+  inspectModeEnabled() {
+    return this._inspectModeEnabled;
+  }
+
+  /**
+   * @param {string=} mode
+   * @return {!Protocol.DOM.HighlightConfig}
+   */
+  _buildHighlightConfig(mode) {
+    mode = mode || 'all';
+    var showRulers = Common.moduleSetting('showMetricsRulers').get();
+    var highlightConfig = {showInfo: mode === 'all', showRulers: showRulers, showExtensionLines: showRulers};
+    if (mode === 'all' || mode === 'content')
+      highlightConfig.contentColor = Common.Color.PageHighlight.Content.toProtocolRGBA();
+
+    if (mode === 'all' || mode === 'padding')
+      highlightConfig.paddingColor = Common.Color.PageHighlight.Padding.toProtocolRGBA();
+
+    if (mode === 'all' || mode === 'border')
+      highlightConfig.borderColor = Common.Color.PageHighlight.Border.toProtocolRGBA();
+
+    if (mode === 'all' || mode === 'margin')
+      highlightConfig.marginColor = Common.Color.PageHighlight.Margin.toProtocolRGBA();
+
+    if (mode === 'all') {
+      highlightConfig.eventTargetColor = Common.Color.PageHighlight.EventTarget.toProtocolRGBA();
+      highlightConfig.shapeColor = Common.Color.PageHighlight.Shape.toProtocolRGBA();
+      highlightConfig.shapeMarginColor = Common.Color.PageHighlight.ShapeMargin.toProtocolRGBA();
+      highlightConfig.displayAsMaterial = true;
+    }
+    return highlightConfig;
+  }
+
+  /**
    * @param {!SDK.DOMNode} node
    * @param {function(?Protocol.Error, ...)=} callback
    * @return {function(...)}
    * @template T
    */
   _markRevision(node, callback) {
     /**
      * @param {?Protocol.Error} error
      * @this {SDK.DOMModel}
      */
@@ skipping 19 matching lines @@
   }
 
   /**
    * @param {function(?Protocol.Error)=} callback
    */
   redo(callback) {
     this._agent.redo(callback);
   }
 
   /**
+   * @param {?SDK.DOMNodeHighlighter} highlighter
+   */
+  setHighlighter(highlighter) {
+    this._highlighter = highlighter || this._defaultHighlighter;
+  }
+
+  /**
    * @param {number} x
    * @param {number} y
    * @param {boolean} includeUserAgentShadowDOM
    * @param {function(?SDK.DOMNode)} callback
    */
   nodeForLocation(x, y, includeUserAgentShadowDOM, callback) {
     this._agent.getNodeForLocation(x, y, includeUserAgentShadowDOM, mycallback.bind(this));
 
     /**
      * @param {?Protocol.Error} error
@@ skipping 54 matching lines @@
     return new Promise(promiseBody.bind(this));
 
     /**
      * @param {function()} fulfill
      * @this {SDK.DOMModel}
      */
     function promiseBody(fulfill) {
       this._agent.enable(fulfill);
     }
   }
+
+  /**
+   * @param {!Protocol.DOM.NodeId} nodeId
+   */
+  nodeHighlightRequested(nodeId) {
+    var node = this.nodeForId(nodeId);
+    if (!node)
+      return;
+
+    this.dispatchEventToListeners(SDK.DOMModel.Events.NodeHighlightedInOverlay, node);
+  }
 };
 
 SDK.SDKModel.register(SDK.DOMModel, SDK.Target.Capability.DOM, true);
 
 /** @enum {symbol} */
 SDK.DOMModel.Events = {
   AttrModified: Symbol('AttrModified'),
   AttrRemoved: Symbol('AttrRemoved'),
   CharacterDataModified: Symbol('CharacterDataModified'),
   DOMMutated: Symbol('DOMMutated'),
   NodeInserted: Symbol('NodeInserted'),
+  NodeInspected: Symbol('NodeInspected'),
+  NodeHighlightedInOverlay: Symbol('NodeHighlightedInOverlay'),
   NodeRemoved: Symbol('NodeRemoved'),
   DocumentUpdated: Symbol('DocumentUpdated'),
   ChildNodeCountUpdated: Symbol('ChildNodeCountUpdated'),
   DistributedNodesChanged: Symbol('DistributedNodesChanged'),
+  InspectModeWillBeToggled: Symbol('InspectModeWillBeToggled'),
   MarkersChanged: Symbol('MarkersChanged')
 };
 
 
 /**
  * @implements {Protocol.DOMDispatcher}
  * @unrestricted
  */
 SDK.DOMDispatcher = class {
   /**
    * @param {!SDK.DOMModel} domModel
    */
   constructor(domModel) {
     this._domModel = domModel;
   }
 
   /**
    * @override
    */
   documentUpdated() {
     this._domModel._documentUpdated();
   }
 
   /**
    * @override
    * @param {!Protocol.DOM.NodeId} nodeId
+   */
+  inspectNodeRequested(nodeId) {
+    this._domModel._inspectNodeRequested(nodeId);
+  }
+
+  /**
+   * @override
+   * @param {!Protocol.DOM.NodeId} nodeId
    * @param {string} name
    * @param {string} value
    */
   attributeModified(nodeId, name, value) {
     this._domModel._attributeModified(nodeId, name, value);
   }
 
   /**
    * @override
    * @param {!Protocol.DOM.NodeId} nodeId
@@ skipping 94 matching lines @@
   }
 
   /**
    * @override
    * @param {!Protocol.DOM.NodeId} insertionPointId
    * @param {!Array.<!Protocol.DOM.BackendNode>} distributedNodes
    */
   distributedNodesUpdated(insertionPointId, distributedNodes) {
     this._domModel._distributedNodesUpdated(insertionPointId, distributedNodes);
   }
+
+  /**
+   * @override
+   * @param {!Protocol.DOM.NodeId} nodeId
+   */
+  nodeHighlightRequested(nodeId) {
+    this._domModel.nodeHighlightRequested(nodeId);
+  }
 };
+
+/**
+ * @interface
+ */
+SDK.DOMNodeHighlighter = function() {};
+
+SDK.DOMNodeHighlighter.prototype = {
+  /**
+   * @param {?SDK.DOMNode} node
+   * @param {!Protocol.DOM.HighlightConfig} config
+   * @param {!Protocol.DOM.BackendNodeId=} backendNodeId
+   * @param {!Protocol.Runtime.RemoteObjectId=} objectId
+   */
+  highlightDOMNode(node, config, backendNodeId, objectId) {},
+
+  /**
+   * @param {!Protocol.DOM.InspectMode} mode
+   * @param {!Protocol.DOM.HighlightConfig} config
+   * @param {function(?Protocol.Error)=} callback
+   */
+  setInspectMode(mode, config, callback) {},
+
+  /**
+   * @param {!Protocol.Page.FrameId} frameId
+   */
+  highlightFrame(frameId) {}
+};
+
+/**
+ * @implements {SDK.DOMNodeHighlighter}
+ * @unrestricted
+ */
+SDK.DefaultDOMNodeHighlighter = class {
+  /**
+   * @param {!Protocol.DOMAgent} agent
+   */
+  constructor(agent) {
+    this._agent = agent;
+  }
+
+  /**
+   * @override
+   * @param {?SDK.DOMNode} node
+   * @param {!Protocol.DOM.HighlightConfig} config
+   * @param {!Protocol.DOM.BackendNodeId=} backendNodeId
+   * @param {!Protocol.Runtime.RemoteObjectId=} objectId
+   */
+  highlightDOMNode(node, config, backendNodeId, objectId) {
+    if (objectId || node || backendNodeId)
+      this._agent.highlightNode(config, (objectId || backendNodeId) ? undefined : node.id, backendNodeId, objectId);
+    else
+      this._agent.hideHighlight();
+  }
+
+  /**
+   * @override
+   * @param {!Protocol.DOM.InspectMode} mode
+   * @param {!Protocol.DOM.HighlightConfig} config
+   * @param {function(?Protocol.Error)=} callback
+   */
+  setInspectMode(mode, config, callback) {
+    this._agent.setInspectMode(mode, config, callback);
+  }
+
+  /**
+   * @override
+   * @param {!Protocol.Page.FrameId} frameId
+   */
+  highlightFrame(frameId) {
+    this._agent.highlightFrame(
+        frameId, Common.Color.PageHighlight.Content.toProtocolRGBA(),
+        Common.Color.PageHighlight.ContentOutline.toProtocolRGBA());
+  }
+};