DevTools: clean unused styles in Elements

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 24 matching lines @@
 
 #elements-content:not(.elements-wrap) > div {
     display: inline-block;
     min-width: 100%;
 }
 
 #elements-content.elements-wrap {
     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;
     border-top: 1px solid #ccc;
     overflow: hidden;
     height: 19px;
     width: 100%;
 }
 
 .style-panes-wrapper {
     overflow: auto;
 }
 
 .style-panes-wrapper > div:not(:first-child) {
     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;
 }
 
 .elements-tree-header {
     height: 24px;
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
 .elements-tree-header-frame {
     margin-left: 6px;
     margin-right: 6px;
     flex: none;
 }