Devtools: [CustomFormatter] Add context menu to disassemble custom previews

Source/devtools/front_end/components/CustomPreviewSection.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @param {!WebInspector.RemoteObject} object
  */
 WebInspector.CustomPreviewSection = function(object)
 {
@@ skipping 19 matching lines @@
         this._header.classList.add("custom-expandable-section-header");
         this._header.addEventListener("click", this._onClick.bind(this), false);
     }
 
     this._sectionElement.appendChild(this._header);
 }
 
 /**
  * @constructor
  * @param {!WebInspector.RemoteObject} object
- * @param {boolean=} expand
- * @return {!Element}
  */
-WebInspector.CustomPreviewSection.createInShadow = function(object, expand)
+WebInspector.CustomPreviewComponent = function(object)
 {
-    var customPreviewSection = new WebInspector.CustomPreviewSection(object);
-    var element = WebInspector.CustomPreviewSection._createComponentRoot();
-    var shadowRoot = element.createShadowRoot();
+    this._object = object;
+    this._customPreviewSection = new WebInspector.CustomPreviewSection(object);
+
+    this.element = WebInspector.CustomPreviewSection._createComponentRoot();
+    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
+
+    var shadowRoot = this.element.createShadowRoot();
     shadowRoot.appendChild(WebInspector.View.createStyleElement("components/customPreviewSection.css"));
-    shadowRoot.appendChild(customPreviewSection.element());
+    shadowRoot.appendChild(this._customPreviewSection.element());
+}
 
-    if (expand && object.customPreview().hasBody)
-        customPreviewSection._loadBody();
-    return element;
+WebInspector.CustomPreviewComponent.prototype = {
+    expandIfPossible: function()
+    {
+        if (this._object.customPreview().hasBody && this._customPreviewSection)
+            this._customPreviewSection._loadBody();
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _contextMenuEventFired: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        if (this._customPreviewSection)
+            contextMenu.appendItem(WebInspector.UIString.capitalize("Disassemble in ^native JS ^object" ), this._disassemble.bind(this));

[pfeldman, 2015/04/28 16:20:40]

Show as JavaScript Object

+        contextMenu.appendApplicableItems(this._object);
+        contextMenu.show();
+    },
+
+    _disassemble: function()
+    {
+        this.element.shadowRoot.textContent = "";
+        this._customPreviewSection = null;
+        this.element.shadowRoot.appendChild(WebInspector.CustomPreviewSection._createStandardPreview(this._object));
+    }
 }
 
 /**
  * @return {!Element}
  */
 WebInspector.CustomPreviewSection._createComponentRoot = function()
 {
     var element = createElement("span");
     WebInspector.installComponentRootStyles(element);
     element.classList.add("source-code");
     return element;
 }
 
+WebInspector.CustomPreviewSection._createStandardPreview = function(object)
+{
+    var header = createElement("span");
+    var componentRoot = WebInspector.CustomPreviewSection._createComponentRoot();
+    header.appendChild(componentRoot);
+    var shadowRoot = componentRoot.createShadowRoot();
+    shadowRoot.appendChild(WebInspector.View.createStyleElement("components/objectValue.css"));
+    shadowRoot.appendChild(WebInspector.ObjectPropertiesSection.createValueElement(object, false));

[pfeldman, 2015/04/28 16:20:40]

should createValueElement add objectValue on its own? Also, this looks like a
standard ObjectPropertiesSection application. Why is it so involved?

+    if (!object.hasChildren)
+        return header;
+
+    var objectPropertiesSection = new WebInspector.ObjectPropertiesSection(object, header);
+    return objectPropertiesSection.element;
+}
+
 WebInspector.CustomPreviewSection._tagsWhiteList = new Set(["span", "div", "ol", "li","table", "tr", "td"]);
 
 WebInspector.CustomPreviewSection.prototype = {
 
     /**
      * @return {!Element}
      */
     element: function()
     {
         return this._sectionElement;
@@ skipping 48 matching lines @@
      * @return {!Node}
      */
     _layoutObjectTag: function(objectTag)
     {
         objectTag.shift();
         var attributes = objectTag.shift();
         var remoteObject = this._object.target().runtimeModel.createRemoteObject(/** @type {!RuntimeAgent.RemoteObject} */ (attributes));
         if (remoteObject.customPreview())
             return (new WebInspector.CustomPreviewSection(remoteObject)).element();
 
-        var header = createElement("span");
-        var componentRoot = WebInspector.CustomPreviewSection._createComponentRoot();
-        header.appendChild(componentRoot);
-        var shadowRoot = componentRoot.createShadowRoot();
-        shadowRoot.appendChild(WebInspector.View.createStyleElement("components/objectValue.css"));
-        shadowRoot.appendChild(WebInspector.ObjectPropertiesSection.createValueElement(remoteObject, false));
-        if (!remoteObject.hasChildren)
-            return header;
-
-        var objectPropertiesSection = new WebInspector.ObjectPropertiesSection(remoteObject, header);
-        var sectionElement = objectPropertiesSection.element;
-        sectionElement.classList.add("custom-expandable-section-standard-section");
+        var sectionElement = WebInspector.CustomPreviewSection._createStandardPreview(remoteObject);
+        sectionElement.classList.toggle("custom-expandable-section-standard-section", remoteObject.hasChildren);
         return sectionElement;
     },
 
     /**
      * @param {!Node} parentElement
      * @param {!Array.<*>} jsonMLTags
      */
     _appendJsonMLTags: function(parentElement, jsonMLTags)
     {
         for (var i = 0; i < jsonMLTags.length; ++i)
@@ skipping 83 matching lines @@
         {
             if (!bodyJsonML)
                 return;
 
             this._cachedContent = this._renderJSONMLTag(bodyJsonML);
             this._sectionElement.appendChild(this._cachedContent);
             this._toggleExpand();
         }
     }
 }