DevTools: traverse widget hierarchy to reveal views.

third_party/WebKit/Source/devtools/front_end/elements/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 199 matching lines @@
     width: 11px;
     height: 10px;
     margin: 0 7px 0 0;
     top: 1px;
     left: -36px; /* outdent to compensate for the top-level property indent */
     -webkit-user-select: none;
     cursor: default;
     z-index: 1;
 }
 
-.styles-section .sidebar-pane-closing-brace {
+.sidebar-pane-closing-brace {
     clear: both;
 }
 
 .styles-section-title {
     background-origin: padding;
     background-clip: padding;
     word-wrap: break-word;
     white-space: normal;
 }
 
@@ skipping 320 matching lines @@
 
 .image-preview-container img {
     margin: 2px auto;
     max-width: 100px;
     max-height: 100px;
     background-image: url(Images/checker.png);
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }
 
-.sidebar-pane.composite {
-    position: absolute;
-}
-
 .metrics {
     border-bottom: 1px solid #ccc;
 }
 
 .-theme-with-dark-background .metrics {
     color: #222;
 }
 
 .-theme-with-dark-background .metrics > div:hover {
     color: #ccc;
 }
 
 .metrics-and-styles .metrics {
     border-top: 1px solid #ccc;
     border-bottom: none;
 }
 
-.sidebar-pane.composite .metrics {
+.metrics {
     min-height: 190px;
     display: flex;
     flex-direction: column;
     -webkit-align-items: center;
     -webkit-justify-content: center;
 }
 
-.sidebar-pane .metrics-and-styles,
-.sidebar-pane .metrics-and-computed {
+.metrics-and-styles,
+.metrics-and-computed {
     display: flex !important;
     flex-direction: column !important;
     position: relative;
 }
 
-.sidebar-pane .style-panes-wrapper {
-    transform: translateZ(0);
-    flex: 1;
-    overflow-y: auto;
-    position: relative;
-}
-
 .styles-sidebar-pane-toolbar-container {
     flex-shrink: 0;
     overflow: hidden;
 }
 
 .styles-sidebar-pane-toolbar {
     border-bottom: 1px solid #eee;
     flex-shrink: 0;
 }
 
 .styles-sidebar-pane-filter-box {
     flex: auto;
     display: flex;
 }
 
 .styles-sidebar-pane-filter-box > input {
     outline: none !important;
     border: none;
     width: 100%;
     background: transparent;
     margin-left: 4px;
 }
 
 .sidebar-pane.composite .metrics-and-styles .metrics {
     border-bottom: none;
 }
 
-.sidebar-pane > .split-widget {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 .styles-section.styles-panel-hovered:not(.read-only) .style-properties .webkit-css-property:hover,
 .styles-section.styles-panel-hovered:not(.read-only) .style-properties .value:hover,
 .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover,
 .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{
     text-decoration: underline;
     cursor: default;
 }
 
 .styles-clipboard-only {
     display: inline-block;
@@ skipping 127 matching lines @@
     position: absolute;
     right: 0;
     bottom: 0;
     visibility: hidden;
     background-color: rgba(255, 255, 255, 0.9);
 }
 
 .styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar {
     visibility: visible;
 }