Bug 1205681 - 1 - Add a timeline rewind button to the toolbar; r=zer0
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 09 Oct 2015 14:08:07 +0200
changeset 267425 6d016e7c8780e713e7361e4ee9961d8c9b449ba5
parent 267424 c41533f5754b95e96555deec7a2b3cd1fc47315b
child 267426 84e437888ab4663b1d392fe1713994d9ccd8887b
push id15647
push userpbrosset@mozilla.com
push dateTue, 13 Oct 2015 12:05:40 +0000
treeherderfx-team@d42f330611b5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszer0
bugs1205681
milestone44.0a1
Bug 1205681 - 1 - Add a timeline rewind button to the toolbar; r=zer0
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/themes/animationinspector.css
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -15,16 +15,17 @@
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="theme-sidebar devtools-monospace" role="application" empty="true">
     <div id="global-toolbar" class="theme-toolbar">
       <span class="label">&allAnimations;</span>
       <button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
     </div>
     <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>
     </div>
     <div id="players"></div>
     <div id="error-message">
       <p>&invalidElement;</p>
       <p>&selectElement;</p>
       <button id="element-picker" standalone="true" class="devtools-button"></button>
     </div>
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -46,16 +46,17 @@ body {
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   height: var(--toolbar-height);
 }
 
 #timeline-toolbar {
   display: none;
+  justify-content: flex-start;
 }
 
 [timeline] #global-toolbar {
   display: none;
 }
 
 [timeline] #timeline-toolbar {
   display: flex;
@@ -95,16 +96,20 @@ body {
 /* Element picker, toggle-all buttons, timeline pause button, ... */
 
 #global-toolbar .devtools-button,
 #timeline-toolbar .devtools-button {
   border-width: 0 0 0 1px;
   min-height: var(--toolbar-height);
 }
 
+#timeline-toolbar .devtools-button {
+  border-width: 0 1px 0 0;
+}
+
 .devtools-button {
   position: relative;
 }
 
 .devtools-button::before {
   content: "";
   display: block;
   width: 16px;
@@ -118,16 +123,20 @@ body {
 #element-picker::before {
   background-image: url("chrome://devtools/skin/themes/images/command-pick.png");
 }
 
 .pause-button::before {
   background-image: url("images/debugger-pause.png");
 }
 
+#rewind-timeline::before {
+  background-image: url("images/rewind.png");
+}
+
 #element-picker[checked]::before {
   background-position: -48px 0;
   filter: none; /* Icon is blue when checked, don't invert for light theme */
 }
 
 .pause-button.paused::before {
   background-image: url("images/debugger-play.png");
 }
@@ -140,16 +149,20 @@ body {
 
   .pause-button::before {
     background-image: url("images/debugger-pause@2x.png");
   }
 
   .pause-button.paused::before {
     background-image: url("images/debugger-play@2x.png");
   }
+
+  #rewind-timeline::before {
+    background-image: url("images/rewind@2x.png");
+  }
 }
 
 /* Animation timeline component */
 
 .animation-timeline {
   height: 100%;
   overflow: hidden;
   position: relative;
@@ -395,116 +408,8 @@ body {
     background-image: url("images/animation-fast-track.svg");
     background-repeat: no-repeat;
     padding-left: 12px;
     /* Make sure the icon is positioned above the timeline range input so that
        its tooltip appears on hover */
     z-index: 1;
     position: relative;
 }
-
-/* Timeline wiget */
-
-.timeline {
-  height: var(--timeline-animation-height);
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.timeline .playback-controls {
-  display: flex;
-  flex-direction: row;
-}
-
-/* Playback control buttons */
-
-.timeline .playback-controls button {
-  flex-grow: 1;
-  border-width: 0 1px 0 0;
-}
-
-.timeline .toggle::before {
-  background-image: url(images/debugger-pause.png);
-}
-
-.paused .timeline .toggle::before,
-.finished .timeline .toggle::before {
-  background-image: url(images/debugger-play.png);
-}
-
-.timeline .ff::before {
-  background-image: url(images/fast-forward.png);
-}
-
-.timeline .rw::before {
-  background-image: url(images/rewind.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .timeline .toggle::before {
-    background-image: url(images/debugger-pause@2x.png);
-  }
-
-  .paused .timeline .toggle::before,
-  .finished .timeline .toggle::before {
-    background-image: url(images/debugger-play@2x.png);
-  }
-
-  .timeline .ff::before {
-    background-image: url(images/fast-forward@2x.png);
-  }
-
-  .timeline .rw::before {
-    background-image: url(images/rewind@2x.png);
-  }
-}
-
-.timeline .rate {
-  -moz-appearance: none;
-  text-align: center;
-  color: var(--theme-body-color);
-  border-right: 1px solid var(--theme-splitter-color);
-}
-
-/* Slider (input type range) container */
-
-.timeline .sliders-container {
-  flex-grow: 1;
-  height: 100%;
-  position: relative;
-  border-width: 1px 0;
-}
-
-.timeline .sliders-container .current-time {
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.timeline .sliders-container .current-time::-moz-range-thumb {
-  height: 100%;
-  width: 4px;
-  border-radius: 0;
-  border: none;
-  background: var(--theme-highlight-blue);
-}
-
-.timeline .sliders-container .current-time::-moz-range-track {
-  width: 100%;
-  height: 50px;
-  background: transparent;
-}
-
-/* Current time label */
-
-.timeline .time-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  border-left: 1px solid var(--theme-splitter-color);
-  background: var(--theme-toolbar-background);
-}
\ No newline at end of file