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

Source/devtools/front_end/components/CustomPreviewSection.js

Index: Source/devtools/front_end/components/CustomPreviewSection.js
diff --git a/Source/devtools/front_end/components/CustomPreviewSection.js b/Source/devtools/front_end/components/CustomPreviewSection.js
index 1d9d6b1e7e16b8472716242cb431e1743d8f74ee..718830da0a9d57d41a7879370f03e55caef8ef1d 100644
--- a/Source/devtools/front_end/components/CustomPreviewSection.js
+++ b/Source/devtools/front_end/components/CustomPreviewSection.js
@@ -37,20 +37,45 @@ WebInspector.CustomPreviewSection = function(object)
 /**
  * @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));
+    }
 }
 
 /**
@@ -64,6 +89,21 @@ WebInspector.CustomPreviewSection._createComponentRoot = function()
     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 = {
@@ -132,18 +172,8 @@ WebInspector.CustomPreviewSection.prototype = {
         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;
     },