Bug 1229000 - Adds separator borders in the timeline toolbar; r=miker

--HG--
extra : commitid : CaLLxu62Pjb
extra : rebase_source : 6207756ad3e079aebb574fda454040b27bb5f542
extra : histedit_source : 2fbf8f45b9b5106e2ad7b349a8f3fa0a1273d40a

devtools/client/animationinspector/animation-inspector.xhtml

@@ -22,7 +22,7 @@
     <div id="timeline-toolbar" class="theme-toolbar">
       <button id="rewind-timeline" standalone="true" class="devtools-button"></button>
       <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
-      <span id="timeline-rate"></span>
+      <span id="timeline-rate" standalone="true" class="devtools-button"></span>
       <span id="timeline-current-time" class="label"></span>
     </div>
     <div id="players"></div>

devtools/client/themes/animationinspector.css

@@ -62,11 +62,6 @@ body {
   display: flex;
 }
 
-#global-toolbar .label,
-#timeline-toolbar .label {
-  padding: 1px 4px;
-}
-
 /* The main animations container */
 
 #players {
@@ -96,13 +91,24 @@ body {
 
 /* Element picker, toggle-all buttons, timeline pause button, ... */
 
-#global-toolbar .devtools-button,
-#timeline-toolbar .devtools-button {
-  border-width: 0 0 0 1px;
+#global-toolbar > *,
+#timeline-toolbar > * {
   min-height: var(--toolbar-height);
+  border-width: 0 0 0 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-#timeline-toolbar .devtools-button {
+#global-toolbar .label,
+#timeline-toolbar .label {
+  padding: 0 5px;
+  border-style: solid;
+  border-color: rgba(170, 170, 170, .5);
+}
+
+#timeline-toolbar .devtools-button,
+#timeline-toolbar .label {
   border-width: 0 1px 0 0;
 }