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

Source/devtools/front_end/elements/elementsTreeOutline.css

 /*
  * Copyright (c) 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.
  */
 
 .elements-disclosure {
     width: 100%;
     display: inline-block;
     line-height: normal;
@@ skipping 200 matching lines @@
 
 .elements-gutter-decoration {
     position: absolute;
     left: 2px;
     margin-top: 2px;
     height: 9px;
     width: 9px;
     border-radius: 5px;
     border: 1px solid orange;
     background-color: orange;
+    cursor: pointer;
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {
     opacity: 0.5;
 }
 
 .add-attribute {
     margin-left: 1px;
     margin-right: 1px;
     white-space: nowrap;
@@ skipping 82 matching lines @@
 ol:focus li.selected .webkit-html-close-tag-name,
 ol:focus li.selected .webkit-html-attribute-value,
 ol:focus li.selected .webkit-html-external-link,
 ol:focus li.selected .webkit-html-resource-link {
     color: white;
 }
 
 ol:focus li.selected .webkit-html-attribute-name {
     color: #ccc;
 }
+
+.elements-disclosure li.selected .selection > .node-actions-container {
+    visibility: visible;
+}
+
+.node-actions-container {
+    position: absolute;
+    z-index: 10000;
+    left: 0px;
+    height: 13px;
+    background-color: hsla(0,100%,100%,0.3);
+}
+
+.node-actions-toolbar {
+    position: absolute;
+    top: -30px;
+    left: 2px;
+    background: white;
+    border-radius: 3px;
+    border: 1px solid #DADADA;
+    visibility: hidden;
+}
+
+.node-actions-toggle {
+    -webkit-mask-position: -201px -26px;
+    width: 16.25px;
+    height: 20px;
+    transform: scale(0.8) rotate(90deg);
+    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
+    -webkit-mask-size: 352px 168px;
+    background-color: #FFFFFF;
+    z-index: 1;
+    margin-top: -3px;
+    cursor: pointer;
+}
+
+.gutter-container.has-decorations .node-actions-toggle {
+    opacity: 0;
+}
+
+.node-actions-container.expanded > .node-actions-toolbar {
+    visibility: visible;
+}
+
+.node-actions-toolbar-below {
+    margin-top: 2px;
+}