Devtools: Extensible toolbar in SSP

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 381 matching lines @@
 .styles-section .style-properties .inherited {
     opacity: 0.5;
 }
 
 .styles-section .style-properties .has-ignorable-error {
     color: gray;
 }
 
 .styles-element-state-pane {
     overflow: hidden;
-    margin-top: -56px;
     padding-top: 18px;
     height: 56px;
-    -webkit-transition: margin-top 0.1s ease-in-out;
     padding-left: 2px;
+    border-bottom: 1px solid rgb(189, 189, 189);
 }
 
-.styles-element-state-pane.expanded {
+@keyframes styles-element-state-pane-slidein {
+    from {
+        margin-top: -56px;
+    }
+    to {
+        margin-top: 0px;
+    }
+}
+
+@keyframes styles-element-state-pane-slideout {
+    from {
+        margin-top: 0px;
+    }
+    to {
+        margin-top: -56px;
+    }
+}
+
+.styles-sidebar-toolbar-pane {
+    position: relative;
+    animation-duration: 0.1s;
+    animation-direction: normal;
+}
+
+.styles-sidebar-toolbar-pane-container {
+    position: relative;
+    max-height: 56px;
+    overflow: hidden;
+}
+
+.styles-element-state-pane.visible {
     border-bottom: 1px solid rgb(189, 189, 189);
     margin-top: 0;
 }
 
 .styles-element-state-pane > table {
     width: 100%;
     border-spacing: 0;
 }
 
 .styles-element-state-pane label {
     display: flex;
     margin: 1px;
 }
 
-.styles-animations-controls-pane {
-    overflow: hidden;
-    -webkit-transition: height 0.1s ease-out;
-    height: 0;
-}
-
 .styles-animations-controls-pane > * {
     margin: 6px 4px;
 }
 
-.styles-animations-controls-pane.expanded {
+.styles-animations-controls-pane {
     border-bottom: 1px solid rgb(189, 189, 189);
     height: 56px;
+    overflow: hidden;
 }
 
 .animations-controls {
     width: 100%;
     max-width: 200px;
     display: flex;
     align-items: center;
 }
 
 .animations-controls > .toolbar {
@@ skipping 272 matching lines @@
 .style-properties li.editing-sub-part {
     padding: 3px 6px 8px 18px;
     margin: -1px -6px -8px -6px;
     text-overflow: clip;
 }
 
 .styles-pane-toolbar {
     float: right;
     margin-top: -3px;
 }