Bug 1216745 - [Flame][Music] When the Music app is loading new files …

…the UI covers up the "Back" button on the player preventing users from changing away from the "now playing" page. r=jdarcangelo, a=mahe

apps/music/elements/music-scan-progress.js

@@ -88,9 +88,14 @@ proto.createdCallback = function() {
     subheading: $id('subheading')
   };
 
-  this.els.value.textContent      = this.getAttribute('value');
-  this.els.heading.textContent    = this.getAttribute('heading');
-  this.els.subheading.textContent = this.getAttribute('subheading');
+  if (!this.hasAttribute('value') && !this.hasAttribute('heading') &&
+      !this.hasAttribute('subheading')) {
+    this.els.container.hidden = true;
+  }
+
+  this.value      = this.getAttribute('value');
+  this.heading    = this.getAttribute('heading');
+  this.subheading = this.getAttribute('subheading');
 
   this.onDOMRetranslated = () => {
     document.l10n.translateFragment(shadowRoot);
@@ -131,16 +136,16 @@ proto.attributeChangedCallback = function(attr, oldVal, newVal) {
   });
 };
 
-proto.show = function(properties = {}) {
+proto.update = function(properties = {}) {
   this.value      = properties.value      || this.value;
   this.heading    = properties.heading    || this.heading;
   this.subheading = properties.subheading || this.subheading;
 
-  this.hidden = false;
+  this.els.container.hidden = false;
 };
 
-proto.hide = function() {
-  this.hidden = true;
+proto.clear = function() {
+  this.els.container.hidden = true;
 };
 
 ['value', 'heading', 'subheading'].forEach((prop) => {

apps/music/index.html

@@ -107,7 +107,7 @@ <h1 id="header-title" data-l10n-id="music"></h1>
 
   <music-scan-progress id="scan-progress"
       heading-l10n-id="unknownArtist"
-      subheading-l10n-id="unknownTitle" hidden>
+      subheading-l10n-id="unknownTitle">
   </music-scan-progress>
 
   <audio id="audio"></audio>

apps/music/js/app.js

@@ -100,14 +100,14 @@ client.on('databaseReady', () => {
 // If you add a Promise to either of these handlers, be careful!
 
 client.on('scanProgress', (detail) => {
-  scanProgress.show({
+  scanProgress.update({
     value:      detail.count,
     heading:    detail.artist,
     subheading: detail.title
   });
 });
 
-client.on('scanStopped', () => scanProgress.hide());
+client.on('scanStopped', () => scanProgress.clear());
 
 client.connect();
 
@@ -258,6 +258,7 @@ function setHeaderTitle(title) {
 
 function setBackButtonHidden(hidden) {
   header.els.actionButton.style.visibility = hidden ? 'hidden' : 'visible';
+  scanProgress.hidden = !hidden;
 }
 
 function getTabByViewURL(url) {

apps/music/open.html

@@ -50,7 +50,7 @@ <h1 id="header-title" data-l10n-id="music"></h1>
 
   <music-scan-progress id="scan-progress"
       heading-l10n-id="unknownArtist"
-      subheading-l10n-id="unknownTitle" hidden>
+      subheading-l10n-id="unknownTitle">
   </music-scan-progress>
 
   <audio id="audio"></audio>

apps/music/pick.html

@@ -78,7 +78,7 @@ <h1 id="header-title" data-l10n-id="picker-title"></h1>
 
   <music-scan-progress id="scan-progress"
       heading-l10n-id="unknownArtist"
-      subheading-l10n-id="unknownTitle" hidden>
+      subheading-l10n-id="unknownTitle">
   </music-scan-progress>
 
   <audio id="audio"></audio>