diff --git a/browser/devtools/animationinspector/components.js b/browser/devtools/animationinspector/components.js index 048c65f06e8a..b3a3e024f5f6 100644 --- a/browser/devtools/animationinspector/components.js +++ b/browser/devtools/animationinspector/components.js @@ -82,6 +82,16 @@ PlayerMetaDataHeader.prototype = { } }); + // Animation is running on compositor + this.compositorIcon = createNode({ + parent: metaData, + nodeType: "span", + attributes: { + "class": "compositor-icon", + "title": L10N.getStr("player.runningOnCompositorTooltip") + } + }); + // Animation duration. this.durationLabel = createNode({ parent: metaData, @@ -137,6 +147,7 @@ PlayerMetaDataHeader.prototype = { this.durationLabel = this.durationValue = null; this.delayLabel = this.delayValue = null; this.iterationLabel = this.iterationValue = null; + this.compositorIcon = null; }, render: function(state) { @@ -189,6 +200,16 @@ PlayerMetaDataHeader.prototype = { } } + // Show the Running on compositor icon if needed. + if (state.isRunningOnCompositor !== this.state.isRunningOnCompositor) { + if (state.isRunningOnCompositor) { + this.compositorIcon.style.display = "inline"; + } else { + // Hide the compositor icon + this.compositorIcon.style.display = "none"; + } + } + this.state = state; } }; diff --git a/browser/devtools/animationinspector/test/browser.ini b/browser/devtools/animationinspector/test/browser.ini index 3dc870489274..6f1fd9116066 100644 --- a/browser/devtools/animationinspector/test/browser.ini +++ b/browser/devtools/animationinspector/test/browser.ini @@ -14,6 +14,7 @@ support-files = [browser_animation_play_pause_button.js] [browser_animation_playerFronts_are_refreshed.js] [browser_animation_playerWidgets_appear_on_panel_init.js] +[browser_animation_playerWidgets_compositor_icon.js] [browser_animation_playerWidgets_destroy.js] [browser_animation_playerWidgets_disables_on_finished.js] [browser_animation_playerWidgets_dont_show_time_after_duration.js] diff --git a/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js new file mode 100644 index 000000000000..77de03bc2934 --- /dev/null +++ b/browser/devtools/animationinspector/test/browser_animation_playerWidgets_compositor_icon.js @@ -0,0 +1,24 @@ +/* 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 player widgets show the right player meta-data for the +// isRunningOnCompositor property. + +add_task(function*() { + yield addTab(TEST_URL_ROOT + "doc_simple_animation.html"); + let {inspector, panel} = yield openAnimationInspector(); + + info("Select the simple animated node"); + yield selectNode(".animated", inspector); + + let compositorEl = panel.playerWidgets[0] + .el.querySelector(".compositor-icon"); + + ok(compositorEl, "The compositor-icon element exists"); + ok(isNodeVisible(compositorEl), + "The compositor icon is visible, since the animation is running on " + + "compositor thread"); +}); diff --git a/browser/locales/en-US/chrome/browser/devtools/animationinspector.properties b/browser/locales/en-US/chrome/browser/devtools/animationinspector.properties index 6db75d2cbf2d..67dd125e4ca7 100644 --- a/browser/locales/en-US/chrome/browser/devtools/animationinspector.properties +++ b/browser/locales/en-US/chrome/browser/devtools/animationinspector.properties @@ -53,6 +53,11 @@ player.timeLabel=%Ss # animation runs (1x being the default, 2x being twice as fast). player.playbackRateLabel=%Sx +# LOCALIZATION NOTE (player.runningOnCompositorTooltip): +# This string is displayed as a tooltip for the icon that indicates that the +# animation is running on the compositor thread. +player.runningOnCompositorTooltip=This animation is running on compositor thread + # LOCALIZATION NOTE (timeline.timeGraduationLabel): # This string is displayed at the top of the animation panel, next to each time # graduation, to indicate what duration (in milliseconds) this graduation diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index 05504af97b89..90aea4da2816 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -272,6 +272,7 @@ browser.jar: skin/classic/browser/devtools/pseudo-class.svg (../shared/devtools/images/pseudo-class.svg) skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png) skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) + skin/classic/browser/devtools/animation-fast-track.svg (../shared/devtools/images/animation-fast-track.svg) skin/classic/browser/devtools/performance-icons.svg (../shared/devtools/images/performance-icons.svg) skin/classic/browser/devtools/newtab.png (../shared/devtools/images/newtab.png) skin/classic/browser/devtools/newtab@2x.png (../shared/devtools/images/newtab@2x.png) diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index 96d515a1a5de..3e2996c85d32 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -374,6 +374,7 @@ browser.jar: skin/classic/browser/devtools/pseudo-class.svg (../shared/devtools/images/pseudo-class.svg) skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png) skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) + skin/classic/browser/devtools/animation-fast-track.svg (../shared/devtools/images/animation-fast-track.svg) skin/classic/browser/devtools/performance-icons.svg (../shared/devtools/images/performance-icons.svg) skin/classic/browser/devtools/newtab.png (../shared/devtools/images/newtab.png) skin/classic/browser/devtools/newtab@2x.png (../shared/devtools/images/newtab@2x.png) diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css index 4764458f7dd3..40efab741a0d 100644 --- a/browser/themes/shared/devtools/animationinspector.css +++ b/browser/themes/shared/devtools/animationinspector.css @@ -312,6 +312,17 @@ body { margin: 0 .5em; } +.animation-title .meta-data .compositor-icon { + display: none; + background-image: url("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 { diff --git a/browser/themes/shared/devtools/images/animation-fast-track.svg b/browser/themes/shared/devtools/images/animation-fast-track.svg new file mode 100644 index 000000000000..ee84427cc908 --- /dev/null +++ b/browser/themes/shared/devtools/images/animation-fast-track.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index 613353936dc2..acbdfe36cf5f 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -364,6 +364,7 @@ browser.jar: skin/classic/browser/devtools/pseudo-class.svg (../shared/devtools/images/pseudo-class.svg) skin/classic/browser/devtools/controls.png (../shared/devtools/images/controls.png) skin/classic/browser/devtools/controls@2x.png (../shared/devtools/images/controls@2x.png) + skin/classic/browser/devtools/animation-fast-track.svg (../shared/devtools/images/animation-fast-track.svg) skin/classic/browser/devtools/performance-icons.svg (../shared/devtools/images/performance-icons.svg) skin/classic/browser/devtools/newtab.png (../shared/devtools/images/newtab.png) skin/classic/browser/devtools/newtab@2x.png (../shared/devtools/images/newtab@2x.png)