Bug 1155661 - 2 - Add a new timeline toolbar shown only when the timeline is displayed and non empty; r=zer0
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 11 Sep 2015 13:05:01 +0200
changeset 295847 6c3532823c25db03dbae91614c71341622f898cc
parent 295846 204ecb6628ce7f841068485906e522e707ed2518
child 295848 b8d10d58218eb962d2e545ad3d6f296ee4f21ed1
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerszer0
bugs1155661
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1155661 - 2 - Add a new timeline toolbar shown only when the timeline is displayed and non empty; r=zer0
browser/devtools/animationinspector/animation-inspector.xhtml
browser/devtools/animationinspector/animation-panel.js
browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
browser/themes/shared/devtools/animationinspector.css
--- a/browser/devtools/animationinspector/animation-inspector.xhtml
+++ b/browser/devtools/animationinspector/animation-inspector.xhtml
@@ -9,21 +9,24 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&title;</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/animationinspector.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
   </head>
-  <body class="theme-sidebar devtools-monospace" role="application">
+  <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"></button>
     </div>
+    <div id="timeline-toolbar" class="theme-toolbar">
+
+    </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>
     <script type="application/javascript;version=1.8" src="animation-controller.js"></script>
     <script type="application/javascript;version=1.8" src="animation-panel.js"></script>
--- a/browser/devtools/animationinspector/animation-panel.js
+++ b/browser/devtools/animationinspector/animation-panel.js
@@ -123,24 +123,26 @@ var AnimationsPanel = {
     gToolbox.target.off("navigate", this.onTabNavigated);
 
     if (this.animationsTimelineComponent) {
       this.animationsTimelineComponent.off("current-time-changed",
         this.onTimelineTimeChanged);
     }
   },
 
-  displayErrorMessage: function() {
-    this.errorMessageEl.style.display = "block";
-    this.playersEl.style.display = "none";
-  },
-
-  hideErrorMessage: function() {
-    this.errorMessageEl.style.display = "none";
-    this.playersEl.style.display = "block";
+  togglePlayers: function(isVisible) {
+    if (isVisible) {
+      document.body.removeAttribute("empty");
+      if (AnimationsController.traits.isNewUI) {
+        document.body.setAttribute("timeline", "true");
+      }
+    } else {
+      document.body.setAttribute("empty", "true");
+      document.body.removeAttribute("timeline");
+    }
   },
 
   onPickerStarted: function() {
     this.pickerButtonEl.setAttribute("checked", "true");
   },
 
   onPickerStopped: function() {
     this.pickerButtonEl.removeAttribute("checked");
@@ -176,30 +178,30 @@ var AnimationsPanel = {
     AnimationsController.setCurrentTimeAll(time, true)
                         .catch(error => console.error(error));
   },
 
   refreshAnimations: Task.async(function*() {
     let done = gInspector.updating("animationspanel");
 
     // Empty the whole panel first.
-    this.hideErrorMessage();
+    this.togglePlayers(true);
     yield this.destroyPlayerWidgets();
 
     // Re-render the timeline component.
     if (this.animationsTimelineComponent) {
       this.animationsTimelineComponent.render(
         AnimationsController.animationPlayers,
         AnimationsController.documentCurrentTime);
     }
 
     // If there are no players to show, show the error message instead and
     // return.
     if (!AnimationsController.animationPlayers.length) {
-      this.displayErrorMessage();
+      this.togglePlayers(false);
       this.emit(this.UI_UPDATED_EVENT);
       done();
       return;
     }
 
     // Otherwise, create player widgets (only when isNewUI is false, the
     // timeline has already been re-rendered).
     if (!AnimationsController.traits.isNewUI) {
--- a/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
+++ b/browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
@@ -1,26 +1,50 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the animation panel has a top toolbar that contains the play/pause
 // button and that is displayed at all times.
+// Also test that with the new UI, that toolbar gets replaced by the timeline
+// toolbar when there are animations to be displayed.
 
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
   let {inspector, window} = yield openAnimationInspector();
   let doc = window.document;
 
   let toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel contains the toolbar element");
-  ok(toolbar.querySelector("#toggle-all"), "The toolbar contains the toggle button");
+  ok(toolbar.querySelector("#toggle-all"),
+     "The toolbar contains the toggle button");
   ok(isNodeVisible(toolbar), "The toolbar is visible");
 
   info("Select an animated node");
   yield selectNode(".animated", inspector);
 
   toolbar = doc.querySelector("#global-toolbar");
   ok(toolbar, "The panel still contains the toolbar element");
   ok(isNodeVisible(toolbar), "The toolbar is still visible");
+
+  ({inspector, window} = yield closeAnimationInspectorAndRestartWithNewUI());
+  doc = window.document;
+  toolbar = doc.querySelector("#global-toolbar");
+
+  ok(toolbar, "The panel contains the toolbar element with the new UI");
+  ok(!isNodeVisible(toolbar),
+     "The toolbar is hidden while there are animations");
+
+  let timelineToolbar = doc.querySelector("#timeline-toolbar");
+  ok(timelineToolbar, "The panel contains a timeline toolbar element");
+  ok(isNodeVisible(timelineToolbar),
+     "The timeline toolbar is visible when there are animations");
+
+  info("Select a node that has no animations");
+  yield selectNode(".still", inspector);
+
+  ok(isNodeVisible(toolbar),
+     "The toolbar is shown when there are no animations");
+  ok(!isNodeVisible(timelineToolbar),
+     "The timeline toolbar is hidden when there are no animations");
 });
--- a/browser/themes/shared/devtools/animationinspector.css
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -30,55 +30,77 @@ body {
   padding: 0;
   display : flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   color: var(--theme-content-color3);
 }
 
-/* The top toolbar, containing the toggle-all button */
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+   containing playback control buttons, shown only when there are animations
+   displayed in the timeline */
 
-#global-toolbar {
+#global-toolbar,
+#timeline-toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   height: var(--toolbar-height);
 }
 
+#timeline-toolbar {
+  display: none;
+}
+
+[timeline] #global-toolbar {
+  display: none;
+}
+
+[timeline] #timeline-toolbar {
+  display: flex;
+}
+
 #global-toolbar .label {
   padding: 1px 4px;
 }
 
 #toggle-all {
   border-width: 0 0 0 1px;
   min-height: var(--toolbar-height);
 }
 
 /* The main animations container */
 
 #players {
   height: calc(100% - var(--toolbar-height));
   overflow: auto;
 }
 
+[empty] #players {
+  display: none;
+}
+
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
   padding-top: 10%;
   text-align: center;
   flex: 1;
   overflow: auto;
 
   /* The error message is hidden by default */
   display: none;
 }
 
+[empty] #error-message {
+  display: block;
+}
 
 /* Element picker and toggle-all buttons */
 
 #element-picker,
 #toggle-all {
   position: relative;
 }