Devtools[LayoutEditor]: Rework layout-editor workflow

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 859 matching lines @@
 
     /**
      * @param {string=} mode
      * @param {!RuntimeAgent.RemoteObjectId=} objectId
      */
     highlight: function(mode, objectId)
     {
         this._domModel.highlightDOMNode(this.id, mode, undefined, objectId);
     },
 
+    /**
+     * @param {!{mode: (string|undefined), showInfo: (boolean|undefined), showLayoutEditor: (boolean|undefined)}=} config
+     * @param {!RuntimeAgent.RemoteObjectId=} objectId
+     */
+    highlightWithConfig: function(config, objectId)
+    {
+        this._domModel.highlightDOMNodeWithConfig(this.id, config, undefined, objectId);
+    },
+
     highlightForTwoSeconds: function()
     {
         this._domModel.highlightDOMNodeForTwoSeconds(this.id);
     },
 
     /**
      * @param {string=} objectGroup
      * @param {function(?WebInspector.RemoteObject)=} callback
      */
     resolveToObject: function(objectGroup, callback)
@@ skipping 813 matching lines @@
      * @param {!DOMAgent.BackendNodeId=} backendNodeId
      * @param {!RuntimeAgent.RemoteObjectId=} objectId
      */
     highlightDOMNode: function(nodeId, mode, backendNodeId, objectId)
     {
         this.highlightDOMNodeWithConfig(nodeId, { mode: mode }, backendNodeId, objectId);
     },
 
     /**
      * @param {!DOMAgent.NodeId=} nodeId
-     * @param {!{mode: (string|undefined), showInfo: (boolean|undefined)}=} config
+     * @param {!{mode: (string|undefined), showInfo: (boolean|undefined), showLayoutEditor: (boolean|undefined)}=} config
      * @param {!DOMAgent.BackendNodeId=} backendNodeId
      * @param {!RuntimeAgent.RemoteObjectId=} objectId
      */
     highlightDOMNodeWithConfig: function(nodeId, config, backendNodeId, objectId)
     {
-        config = config || { mode: "all", showInfo: undefined };
+        config = config || { mode: "all", showInfo: undefined, showLayoutEditor: 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.showLayoutEditor !== undefined)
+            highlightConfig.showLayoutEditor = config.showLayoutEditor;

[pfeldman, 2015/08/25 21:25:29]

There should never be showLayoutEditor option in the config.

[sergeyv, 2015/08/26 02:25:49]

Done.

+
         this._highlighter.highlightDOMNode(this.nodeForId(nodeId || 0), highlightConfig, backendNodeId, objectId);
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      */
     highlightDOMNodeForTwoSeconds: function(nodeId)
     {
         this.highlightDOMNode(nodeId);
         this._hideDOMNodeHighlightTimeout = setTimeout(WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), 2000);
     },
 
     /**
      * @param {!PageAgent.FrameId} frameId
      */
     highlightFrame: function(frameId)
     {
         this._highlighter.highlightFrame(frameId);
     },
 
     /**
      * @param {boolean} enabled
-     * @param {boolean} inspectUAShadowDOM
+     * @param {?string} mode

[pfeldman, 2015/08/25 21:25:29]

This all can be reverted.

[sergeyv, 2015/08/26 02:25:49]

No, now we have LayoutEditor mode, so we need String here

[pfeldman, 2015/08/26 21:04:48]

But we never trigger layout editor through this code path.

      * @param {function(?Protocol.Error)=} callback
      */
-    setInspectModeEnabled: function(enabled, inspectUAShadowDOM, callback)
+    setInspectModeEnabled: function(enabled, mode, callback)
     {
         /**
          * @this {WebInspector.DOMModel}
          */
         function onDocumentAvailable()
         {
             this.dispatchEventToListeners(WebInspector.DOMModel.Events.InspectModeWillBeToggled, enabled);
-            this._highlighter.setInspectModeEnabled(enabled, inspectUAShadowDOM, this._buildHighlightConfig(), callback);
+            this._highlighter.setInspectModeEnabled(enabled, mode, this._buildHighlightConfig(), callback);
         }
         this.requestDocument(onDocumentAvailable.bind(this));
     },
 
     /**
      * @param {boolean} showRulers
      * @param {boolean} showExtensionLines
      */
     setHighlightSettings: function(showRulers, showExtensionLines)
     {
@@ skipping 323 matching lines @@
     /**
      * @param {?WebInspector.DOMNode} node
      * @param {!DOMAgent.HighlightConfig} config
      * @param {!DOMAgent.BackendNodeId=} backendNodeId
      * @param {!RuntimeAgent.RemoteObjectId=} objectId
      */
     highlightDOMNode: function(node, config, backendNodeId, objectId) {},
 
     /**
      * @param {boolean} enabled
-     * @param {boolean} inspectUAShadowDOM
+     * @param {?string} mode
      * @param {!DOMAgent.HighlightConfig} config
      * @param {function(?Protocol.Error)=} callback
      */
-    setInspectModeEnabled: function(enabled, inspectUAShadowDOM, config, callback) {},
+    setInspectModeEnabled: function(enabled, mode, config, callback) {},
 
     /**
      * @param {!PageAgent.FrameId} frameId
      */
     highlightFrame: function(frameId) {}
 }
 
 /**
  * @constructor
  * @implements {WebInspector.DOMNodeHighlighter}
@@ skipping 16 matching lines @@
     {
         if (objectId || node || backendNodeId)
             this._agent.highlightNode(config, (objectId || backendNodeId) ? undefined : node.id, backendNodeId, objectId);
         else
             this._agent.hideHighlight();
     },
 
     /**
      * @override
      * @param {boolean} enabled
-     * @param {boolean} inspectUAShadowDOM
+     * @param {?string} mode
      * @param {!DOMAgent.HighlightConfig} config
      * @param {function(?Protocol.Error)=} callback
      */
-    setInspectModeEnabled: function(enabled, inspectUAShadowDOM, config, callback)
+    setInspectModeEnabled: function(enabled, mode, config, callback)
     {
-        this._agent.setInspectModeEnabled(enabled, inspectUAShadowDOM, config, callback);
+        this._agent.setInspectModeEnabled(enabled, mode || undefined, config, callback);
     },
 
     /**
      * @override
      * @param {!PageAgent.FrameId} frameId
      */
     highlightFrame: function(frameId)
     {
         this._agent.highlightFrame(frameId, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA());
     }
 }
 
 /**
  * @param {!WebInspector.Target} target
  * @return {?WebInspector.DOMModel}
  */
 WebInspector.DOMModel.fromTarget = function(target)
 {
     return /** @type {?WebInspector.DOMModel} */ (target.model(WebInspector.DOMModel));
 }