Merge pull request #31810 from justindarc/bug1203270

Bug 1203270 - [Music][NGA] Optimize view lifecycle

dev_apps/music-nga/css/app.css

@@ -32,6 +32,7 @@ a {
   bottom: 4.6rem;
   left: 0;
   width: 100%;
+  height: auto;
   transition: bottom 0s linear 0.2s;
 }
 
@@ -52,14 +53,14 @@ body[data-search="true"] #view-stack {
   transition: none;
 }
 
-body[data-active-view-id="player"] #tab-bar {
+body[data-active-view-url="/views/player/index.html"] #tab-bar {
   transform: translate(0, 4.6rem);
   visibility: hidden;
   transition-delay: 0s, 0.2s;
 }
 
-body:not([data-active-view-id]) #view-stack,
-body[data-active-view-id="player"] #view-stack {
+body:not([data-active-view-url]) #view-stack,
+body[data-active-view-url="/views/player/index.html"] #view-stack {
   bottom: 0;
   transition-delay: 0s;
 }

dev_apps/music-nga/elements/music-rating.js

@@ -10,6 +10,7 @@ var template =
     flex-flow: row nowrap;
     width: 100%;
     height: 100%;
+    -moz-user-select: none;
   }
   #container > button {
     background-color: transparent;

dev_apps/music-nga/elements/music-tab-bar.js

@@ -31,11 +31,18 @@ proto.createdCallback = function() {
 
   this.addEventListener('click', (evt) => {
     var tab = evt.target.closest('button');
-    if (!tab) {
+    if (!tab || tab === this.selectedElement) {
       return;
     }
 
     this.selectedElement = tab;
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        selectedElement: this.selectedElement,
+        selectedIndex: this.selectedIndex
+      }
+    }));
   });
 
   this.selectedIndex = 0;
@@ -75,13 +82,6 @@ Object.defineProperty(proto, 'selectedIndex', {
 
       tab.classList.remove('selected');
     });
-
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: {
-        selectedElement: this.selectedElement,
-        selectedIndex: this._selectedIndex
-      }
-    }));
   }
 });