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  = createElementWithClass("span", "source-code");
+    WebInspector.installComponentRootStyles(this.element);
+    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
+
+    var shadowRoot = this.element.createShadowRoot();
     shadowRoot.appendChild(WebInspector.Widget.createStyleElement("components/customPreviewSection.css"));
-    shadowRoot.appendChild(customPreviewSection.element());
-
-    if (expand && object.customPreview().hasBody)
-        customPreviewSection._loadBody();
-    return element;
+    shadowRoot.appendChild(this._customPreviewSection.element());
 }
 
-/**
- * @return {!Element}
- */
-WebInspector.CustomPreviewSection._createComponentRoot = function()
-{
-    var element = createElement("span");
-    WebInspector.installComponentRootStyles(element);
-    element.classList.add("source-code");
-    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("Show as Javascript ^object" ), this._disassemble.bind(this));
+        contextMenu.appendApplicableItems(this._object);
+        contextMenu.show();
+    },
+
+    _disassemble: function()
+    {
+        this.element.shadowRoot.textContent = "";
+        this._customPreviewSection = null;
+        this.element.shadowRoot.appendChild(WebInspector.ObjectPropertiesSection.defaultObjectPresentation(this._object));
+    }
 }
 
 WebInspector.CustomPreviewSection._tagsWhiteList = new Set(["span", "div", "ol", "li","table", "tr", "td"]);
 
 WebInspector.CustomPreviewSection.prototype = {
 
     /**
      * @return {!Element}
      */
     element: function()
@@ skipping 50 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.Widget.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.ObjectPropertiesSection.defaultObjectPresentation(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();
         }
     }
 }