Devtools UI: Add node-specific actions into a ghost toolbar in DOM

Source/devtools/front_end/elements/ElementsTreeElement.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 22 matching lines @@
  * @extends {TreeElement}
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} elementCloseTag
  */
 WebInspector.ElementsTreeElement = function(node, elementCloseTag)
 {
     // The title will be updated in onattach.
     TreeElement.call(this);
     this._node = node;
 
-    this._decorationsElement = createElementWithClass("div", "hidden");
-    this.listItemElement.appendChild(this._decorationsElement);
+    this._gutterContainer = this.listItemElement.createChild("div", "gutter-container");
+    this._decorationsElement = this._gutterContainer.createChild("div", "hidden");
+    this._decorationsElement.addEventListener("mousedown", this._decorationsClicked.bind(this));
 
     this._elementCloseTag = elementCloseTag;
 
     if (this._node.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
         this._canAddAttributes = true;
     this._searchQuery = null;
     this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
     if (this._node.nodeType() === Node.ELEMENT_NODE && this._node.parentNode && this._node.parentNode.nodeType() === Node.DOCUMENT_NODE && !this._node.parentNode.parentNode)
         this.setCollapsible(false);
 }
@@ skipping 102 matching lines @@
 
     /**
      * @return {boolean}
      */
     isEditing: function()
     {
         return !!this._editing;
     },
 
     /**
+     * @return {!Element}
+     */
+    gutterElement: function()
+    {
+        return this._gutterContainer;
+    },
+
+    _decorationsClicked: function()
+    {
+        this.treeOutline.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.DecorationsClicked, this._node);
+    },
+
+    /**
      * @param {string} searchQuery
      */
     highlightSearchResults: function(searchQuery)
     {
         if (this._searchQuery !== searchQuery)
             this._hideSearchHighlight();
 
         this._searchQuery = searchQuery;
         this._searchHighlightsVisible = true;
         this.updateTitle(null, true);
@@ skipping 81 matching lines @@
     {
         var listItemElement = this.listItemElement;
         if (!listItemElement)
             return;
 
         if (!this.selectionElement) {
             this.selectionElement = createElement("div");
             this.selectionElement.className = "selection fill";
             listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
         }
+        this.selectionElement.style.height = listItemElement.offsetHeight + "px";

[pfeldman, 2015/09/17 00:06:18]

Is this related to the dgozman's change rollout?

[samli, 2015/09/17 18:08:04]

Yeah, doesn't show up in my diff locally.

     },
 
     /**
      * @override
      */
     onbind: function()
     {
         if (!this._elementCloseTag)
             this._node[this.treeOutline.treeElementSymbol()] = this;
     },
@@ skipping 485 matching lines @@
         tagNameElement.addEventListener('keyup', keyupListener, false);
 
         var config = new WebInspector.InplaceEditor.Config(editingComitted.bind(this), editingCancelled.bind(this), tagName);
         this._editing = WebInspector.InplaceEditor.startEditing(tagNameElement, config);
         this.listItemElement.getComponentSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
         return true;
     },
 
     /**
      * @param {function(string, string)} commitCallback
+     * @param {function()} disposeCallback
      * @param {?Protocol.Error} error
      * @param {string} initialValue
      */
-    _startEditingAsHTML: function(commitCallback, error, initialValue)
+    _startEditingAsHTML: function(commitCallback, disposeCallback, error, initialValue)
     {
         if (error)
             return;
         if (this._editing)
             return;
 
         function consume(event)
         {
             if (event.eventPhase === Event.AT_TARGET)
                 event.consume(true);
@@ skipping 28 matching lines @@
         {
             commitCallback(initialValue, newValue);
             dispose.call(this);
         }
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
         function dispose()
         {
+            disposeCallback();
             delete this._editing;
             this.treeOutline.setMultilineEditing(null);
 
             // Remove editor.
             this.listItemElement.removeChild(this._htmlEditElement);
             delete this._htmlEditElement;
             // Unhide children item.
             if (this._childrenListNode)
                 this._childrenListNode.style.removeProperty("display");
             // Unhide header items.
@@ skipping 223 matching lines @@
                 if (!depth)
                     this.childrenListElement.classList.add("shadow-root-deep");
                 else
                     this.childrenListElement.classList.add("shadow-root-depth-" + depth);
             }
             var highlightElement = createElement("span");
             highlightElement.className = "highlight";
             highlightElement.appendChild(nodeInfo);
             this.title = highlightElement;
             this.updateDecorations();
-            this.listItemElement.insertBefore(this._decorationsElement, this.listItemElement.firstChild);
+            this.listItemElement.insertBefore(this._gutterContainer, this.listItemElement.firstChild);
             delete this._highlightResult;
         }
 
         delete this.selectionElement;
         if (this.selected)
             this.updateSelection();
         this._preventFollowingLinksOnDoubleClick();
         this._highlightSearchResults();
     },
 
@@ skipping 32 matching lines @@
          * @param {!WebInspector.DOMPresentationUtils.MarkerDecorator} decorator
          */
         function collectDecoration(n, decorator)
         {
             var decoration = decorator.decorate(n);
             if (!decoration)
                 return;
             (n === node ? decorations : descendantDecorations).push(decoration);
         }
 
-        Promise.all(promises).then(setTitle.bind(this));
+        Promise.all(promises).then(setTitle.bind(this)).then(this._updateGutter.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
         function setTitle()
         {
             this._decorationsElement.removeChildren();
             this._decorationsElement.classList.add("hidden");
             if (!decorations.length && !descendantDecorations.length)
                 return;
@@ skipping 40 matching lines @@
                     child.style.backgroundColor = color;
                     child.style.borderColor = color;
                     if (offset)
                         child.style.marginLeft = offset + "px";
                     offset += 3;
                 }
             }
         }
     },
 
+    _updateGutter: function()
+    {
+        this._gutterContainer.classList.toggle("has-decorations", this._decorationsElement.hasChildNodes());

[pfeldman, 2015/09/17 00:06:18]

Do this within setTitle and rename it?

[samli, 2015/09/17 18:08:04]

Done.

+    },
+
     /**
      * @param {!Node} parentElement
      * @param {string} name
      * @param {string} value
      * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
      * @param {boolean=} forceValue
      * @param {!WebInspector.DOMNode=} node
      */
     _buildAttributeDOM: function(parentElement, name, value, updateRecord, forceValue, node)
     {
@@ skipping 332 matching lines @@
         /**
          * @param {string} initialValue
          * @param {string} value
          */
         function commitChange(initialValue, value)
         {
             if (initialValue !== value)
                 node.setOuterHTML(value, selectNode);
         }
 
+        function disposeCallback()
+        {
+            if (callback)
+                callback(false);
+        }
+
         var node = this._node;
-        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
+        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange, disposeCallback));
     },
 
     _copyCSSPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.cssPath(this._node, true));
     },
 
     _copyXPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.xPath(this._node, true));
@@ skipping 38 matching lines @@
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
 
         this._node.resolveToObject("", scrollIntoViewCallback);
     },
 
     __proto__: TreeElement.prototype
 }