DevTools: clean unused styles in Elements

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

Index: third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css b/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
index 8586c576a3dec8e9ba40b9357668f015e00b69b7..6c0e35b56a83e890e54fb518ab7f878e6012e1e7 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
+++ b/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
@@ -42,11 +42,6 @@
     overflow-x: hidden;
 }
 
-.elements-topbar {
-    border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
-    flex-shrink: 0;
-}
-
 #elements-crumbs {
     flex: 0 0 19px;
     background-color: white;
@@ -64,85 +59,6 @@
     border-top: 1px solid #ccc;
 }
 
-.styles-animations-controls-pane > * {
-    margin: 6px 4px;
-}
-
-.styles-animations-controls-pane {
-    border-bottom: 1px solid rgb(189, 189, 189);
-    height: 60px;
-    overflow: hidden;
-    background-color: #eee;
-}
-
-.animations-controls {
-    width: 100%;
-    max-width: 200px;
-    display: flex;
-    align-items: center;
-}
-
-.animations-controls > .toolbar {
-    display: inline-block;
-}
-
-.animations-controls > input {
-    flex-grow: 1;
-    margin-right: 10px;
-}
-
-.animations-controls > .playback-label {
-    width: 35px;
-}
-
-.metrics-and-styles,
-.metrics-and-computed {

[luoe, 2017/07/12 20:03:22]

These 2 were introduced in the first implementation:
https://codereview.chromium.org/129793013

They are added to UI.SimpleViews that inherit from VBox.

inspectorCommon has the same rules except the !important, but nothing overrides
display/flex-direction.
.vbox {
    display: flex;
    flex-direction: column !important;
    position: relative;
}

I did manual testing of the 3 layouts, and could not find any reason for the
display: flex !important.

-    display: flex !important;
-    flex-direction: column !important;
-    position: relative;
-}
-
-.animation-section-body {
-    display: none;
-}
-
-.animation-section-body.expanded {
-    display: block;
-}
-
-.animation-section-body .section {
-    border-bottom: 1px solid rgb(191, 191, 191);
-}
-
-.animationsHeader {
-    padding-top: 23px;
-}
-
-.global-animations-toolbar {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    background-color: #eee;
-    border-bottom: 1px solid rgb(163, 163, 163);
-    padding-left: 10px;
-}
-
-.view > .toolbar {

[luoe, 2017/07/12 20:03:22]

Introduced here: https://codereview.chromium.org/2175903002

Today, there seems to be no toolbar in the light dom in Elements.

-    border-bottom: 1px solid #eee;
-}
-
-.events-pane .section:not(:first-of-type) {
-    border-top: 1px solid rgb(231, 231, 231);
-}
-
-.events-pane .section {
-    margin: 0;
-}
-
-.events-pane .toolbar {
-    border-bottom: 1px solid #eee;
-}
-
 .properties-widget-section {
     padding: 2px 0px 2px 5px;
     flex: none;