DevTools: make ElementsTreeOutline shadow dom-based.

Source/devtools/front_end/elementsPanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * 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
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 12 matching lines @@
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 #elements-content {
     flex: 1 1;
     overflow: auto;
-    padding-left: 0;
+    padding: 2px 0 0 0;
     transform: translateZ(0);
 }
 
 #elements-crumbs {
     flex: 0 0 19px;
     background-color: white;
     border-top: 1px solid #ccc;
     overflow: hidden;
     height: 19px;
     width: 100%;
 }
 
-#elements-content > ol {
-    display: inline-block;
-    min-height: 100%;
-    transform: translateZ(0);
-}
-
-.elements-tree-outline.pick-node-mode {
-    cursor: pointer;
-}
-
-#elements-content .editing {
-    margin-left: 8px;
-}
-
-#elements-content .elements-gutter-decoration {
-    position: absolute;
-    left: 1px;
-    margin-top: 2px;
-    height: 8px;
-    width: 8px;
-    border-radius: 4px;
-    border: 1px solid orange;
-    background-color: orange;
-}
-
-#elements-content .elements-gutter-decoration.elements-has-decorated-children {
-    opacity: 0.5;
-}
-
-#elements-content .CodeMirror {
-    /* Consistent with the .editing class in inspectorStyle.css */
-    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
-    outline: 1px solid rgb(66%, 66%, 66%) !important;
-    background-color: white;
-}
-
-#elements-content .CodeMirror pre {
-    padding: 0;
-}
-
-#elements-content .CodeMirror-lines {
-    padding: 0;
-}
-
-.elements-tree-editor {
-    -webkit-user-select: text;
-    -webkit-user-modify: read-write-plaintext-only;
-}
-
 .metrics {
     padding: 8px;
     font-size: 10px;
     text-align: center;
     white-space: nowrap;
 }
 
 .metrics .label {
     position: absolute;
     font-size: 10px;
@@ skipping 383 matching lines @@
 }
 
 .body .styles-section .properties .inherited {
     display: none;
 }
 
 .styles-section.styles-show-inherited .properties .inherited {
     display: block;
 }
 
-.add-attribute {
-    margin-left: 1px;
-    margin-right: 1px;
-    white-space: nowrap;
-}
-
 .section .event-bars {
     display: none;
 }
 
 .section.expanded .event-bars {
     display: block;
 }
 
 .event-bar {
     position: relative;
@@ skipping 239 matching lines @@
 .crumbs .crumb.selected, .crumbs .crumb.selected:hover {
     background-color: rgb(56, 121, 217);
     color: white;
     text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;
 }
 
 .crumbs .crumb:hover {
     background-color: rgb(216, 216, 216);
 }
 
-.elements-tree-element-pick-node-1 {
-    border-radius: 3px;
-    padding: 1px 0 1px 0;
-    -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1;
-}
-
-.elements-tree-element-pick-node-2 {
-    border-radius: 3px;
-    padding: 1px 0 1px 0;
-    -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1;
-}
-
-@-webkit-keyframes elements-tree-element-pick-node-animation-1 {
-    from { background-color: rgb(255, 210, 126); }
-    to { background-color: inherit; }
-}
-
-@-webkit-keyframes elements-tree-element-pick-node-animation-2 {
-    from { background-color: rgb(255, 210, 126); }
-    to { background-color: inherit; }
-}
-
 .sidebar-separator {
     background-color: rgb(230, 230, 230);
     padding: 0 5px;
     border-top: 1px solid rgb(189, 189, 189);
     border-bottom: 1px solid rgb(189, 189, 189);
     color: rgb(50, 50, 50);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     line-height: 16px;
 }