Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-03-01 05:48:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1155661 - 2 - Add a new timeline toolbar shown only when the timeline is displayed and non empty; r=zer0

Browse Source 
--HG--
extra : commitid : ER8xYFm5q1X
extra : rebase_source : c71d9c9ae9d945c4fe6681ad141aa334b347b870
This commit is contained in:
Patrick Brosset 2015-09-11 13:05:01 +02:00
parent ff259011c1
commit f4ca82633d
4 changed files with 65 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
browser/devtools/animationinspector/animation-inspector.xhtml
View File

@ -14,10 +14,13 @@
<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">

22
browser/devtools/animationinspector/animation-panel.js
View File

@ -128,14 +128,16 @@ var AnimationsPanel = {
}
},
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() {
@ -181,7 +183,7 @@ var AnimationsPanel = {
let done = gInspector.updating("animationspanel");
// Empty the whole panel first.
this.hideErrorMessage();
this.togglePlayers(true);
yield this.destroyPlayerWidgets();
// Re-render the timeline component.
@ -194,7 +196,7 @@ var AnimationsPanel = {
// 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;

26
browser/devtools/animationinspector/test/browser_animation_toolbar_exists.js
View File

@ -6,6 +6,8 @@
// 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");
@ -14,7 +16,8 @@ add_task(function*() {
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");
@ -23,4 +26,25 @@ add_task(function*() {
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");
});

26
browser/themes/shared/devtools/animationinspector.css
View File

@ -35,9 +35,12 @@ body {
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;
@ -46,6 +49,18 @@ body {
height: var(--toolbar-height);
}
#timeline-toolbar {
display: none;
}
[timeline] #global-toolbar {
display: none;
}
[timeline] #timeline-toolbar {
display: flex;
}
#global-toolbar .label {
padding: 1px 4px;
}
@ -62,6 +77,10 @@ body {
overflow: auto;
}
[empty] #players {
display: none;
}
/* The error message, shown when an invalid/unanimated element is selected */
#error-message {
@ -74,6 +93,9 @@ body {
display: none;
}
[empty] #error-message {
display: block;
}
/* Element picker and toggle-all buttons */