From 6d163ab77ad2819ab3f6dc07618fecf875bae552 Mon Sep 17 00:00:00 2001
From: Yura Zenevich <yzenevich@mozilla.com>
Date: Tue, 17 Feb 2015 13:39:46 -0500
Subject: [PATCH] Bug 1132996 - fixing the markup order based on presentation
 order.

---
 apps/video/index.html                   | 26 +++++++-------
 apps/video/js/video.js                  | 35 +++++++++---------
 apps/video/style/video.css              | 26 ++++++--------
 apps/video/style/video_tablet.css       | 48 +++++++++++++++++--------
 apps/video/test/marionette/lib/video.js |  4 +--
 build/csslint/xfail.list                |  4 +--
 6 files changed, 76 insertions(+), 67 deletions(-)
diff --git a/apps/video/index.html b/apps/video/index.html
index 910b44ae8944..305e38bee2eb 100644
--- a/apps/video/index.html
+++ b/apps/video/index.html
@@ -53,24 +53,25 @@
   <body role="application" class="skin-dark theme-media">
     <div id="app-container">
       <div id="two-column-spearator"></div>
-      <section role="region" id="thumbnail-list-view">
-        <gaia-header id="picker-header" action="back">
+      <section role="region" id="thumbnail-views">
+        <gaia-header id="picker-header" action="back" class="thumbnails-list">
           <h1 id="picker-title" data-l10n-id="pick-title"></h1>
           <h1 id="thumbnail-list-title">Video</h1>
         </gaia-header>
+        <gaia-header id="thumbnails-select-top" action="close"
+                     class="thumbnails-select">
+          <h1 id="thumbnails-number-selected"></h1>
+        </gaia-header>
 
-        <footer id="thumbnails-bottom">
+        <!-- This element gets positioned over different view elements -->
+        <!-- It gets styled differently depending on what it is over -->
+        <ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->
+
+        <footer id="thumbnails-bottom" class="thumbnails-list">
           <a id="thumbnails-video-button" class="button" data-icon="video"></a>
           <a id="thumbnails-select-button" class="button" data-icon="select"></a>
         </footer>
-      </section>
-
-      <section role="region" id="thumbnail-select-view" class="skin-dark">
-        <gaia-header id="thumbnails-select-top" action="close">
-          <h1 id="thumbnails-number-selected"></h1>
-        </gaia-header>
-
-        <footer id="thumbnails-select-bottom">
+        <footer id="thumbnails-select-bottom" class="thumbnails-select">
           <a id="thumbnails-delete-button" class="button" data-icon="delete"></a>
           <a id="thumbnails-share-button" class="button" data-icon="share"></a>
         </footer>
@@ -148,9 +149,6 @@ <h1 id="video-title"></h1>
       </menu>
     </form>
 
-    <!-- This element gets positioned over different view elements -->
-    <!-- It gets styled differently depending on what it is over -->
-    <ul id="thumbnails"></ul> <!-- Thumbnails inserted here -->
     <!-- This element is the template of each thumbnail item -->
     <div id="thumbnail-group-header" class="hidden">
       <!--
diff --git a/apps/video/js/video.js b/apps/video/js/video.js
index 7762f76afad1..4cc10191fdbc 100644
--- a/apps/video/js/video.js
+++ b/apps/video/js/video.js
@@ -12,23 +12,22 @@ const LAYOUT_MODE = {
 
 var dom = {};
 
-var ids = ['thumbnail-list-view', 'thumbnails-bottom', 'thumbnail-list-title',
-           'thumbnails', 'thumbnails-video-button', 'thumbnails-select-button',
-           'thumbnail-select-view',
-           'thumbnails-delete-button', 'thumbnails-share-button',
-           'thumbnails-select-top', 'thumbnails-number-selected',
-           'player-view', 'fullscreen-button', 'spinner-overlay',
-           'thumbnails-single-delete-button', 'thumbnails-single-share-button',
-           'thumbnails-single-info-button', 'info-view', 'info-close-button',
-           'player', 'overlay', 'overlay-title', 'overlay-text',
-           'overlay-menu', 'overlay-action-button', 'player-header',
-           'video-container', 'videoControls', 'videoBar', 'videoControlBar',
-           'close', 'play', 'playHead', 'timeSlider', 'elapsedTime',
-           'video-title', 'duration-text', 'elapsed-text', 'bufferedTime',
-           'slider-wrapper', 'throbber', 'picker-close', 'picker-title',
-           'picker-header', 'picker-done', 'options', 'options-view',
-           'options-cancel-button', 'seek-backward', 'seek-forward',
-           'in-use-overlay', 'in-use-overlay-title', 'in-use-overlay-text'];
+var ids = ['thumbnail-list-title', 'thumbnails', 'thumbnails-video-button',
+           'thumbnails-select-button', 'thumbnails-delete-button',
+           'thumbnails-share-button', 'thumbnails-select-top',
+           'thumbnails-number-selected', 'player-view', 'fullscreen-button',
+           'spinner-overlay', 'thumbnails-single-delete-button',
+           'thumbnails-single-share-button', 'thumbnails-single-info-button',
+           'info-view', 'info-close-button', 'player', 'overlay',
+           'overlay-title', 'overlay-text', 'overlay-menu',
+           'overlay-action-button', 'player-header', 'video-container',
+           'videoControls', 'videoBar', 'videoControlBar', 'close', 'play',
+           'playHead', 'timeSlider', 'elapsedTime', 'video-title',
+           'duration-text', 'elapsed-text', 'bufferedTime', 'slider-wrapper',
+           'throbber', 'picker-close', 'picker-title', 'picker-header',
+           'picker-done', 'options', 'options-view', 'options-cancel-button',
+           'seek-backward', 'seek-forward', 'in-use-overlay',
+           'in-use-overlay-title', 'in-use-overlay-text'];
 
 ids.forEach(function createElementRef(name) {
   dom[toCamelCase(name)] = document.getElementById(name);
@@ -50,7 +49,7 @@ var endedTimer;
 var controlShowing = false;
 var controlFadeTimeout = null;
 
-// In thumbnailSelectView, we allow the user to select thumbnails.
+// In thumbnails select view, we allow the user to select thumbnails.
 // These variables hold the names of the selected files, and map those
 // names to the corresponding File objects
 var selectedFileNames = [];
diff --git a/apps/video/style/video.css b/apps/video/style/video.css
index 2b6fe272260f..930f9baccb75 100644
--- a/apps/video/style/video.css
+++ b/apps/video/style/video.css
@@ -104,7 +104,7 @@ span.line-break {
 }
 
 /* All of the main views fill the screen */
-#thumbnail-list-view, #thumbnail-select-view, #player-view {
+#thumbnail-views, #player-view {
   position: absolute;
   top: 0;
   left: 0;
@@ -188,13 +188,13 @@ span.line-break {
 /*
  * give the very last thumbnail a large bottom margin so that it doesn't
  * get stuck hidden behind the overlaid toolbar.
- * for normal thumbnail-list-view case, it is 4rem at bottom.
+ * for normal thumbnails-list case, it is 4rem at bottom.
  */
 #thumbnails>li:last-child{
   margin-bottom: 4rem;
 }
 /*
- * for normal thumbnail-select-view case, it is 5rem at top and 4rem at bottom.
+ * for normal thumbnails-select case, it is 5rem at top and 4rem at bottom.
  */
 #thumbnails.select>li:last-child{
   margin-bottom: 9rem;
@@ -738,21 +738,15 @@ body.pick-activity #thumbnails-bottom {
   display: none !important; /* 1 */
 }
 
-/* selection mode */
-.layout-selection #thumbnail-list-view,
-.layout-selection #player-view {
-  display: none;
-}
-
-/* list mode */
-.layout-list #thumbnail-select-view,
-.layout-list #player-view {
-  display: none;
+/* not selection mode */
+body:not(.layout-selection) .thumbnails-select,
+/* not list mode */
+body:not(.layout-list) .thumbnails-list,
+/* not fullscreen-player mode */
+body:not(.layout-fullscreen-player) #player-view {
+  display: none !important; /* 1 */
 }
 
-/* fullscreen-player mode */
-.layout-fullscreen-player #thumbnail-select-view,
-.layout-fullscreen-player #thumbnail-list-view,
 .layout-fullscreen-player #thumbnails {
   display: none;
 }
diff --git a/apps/video/style/video_tablet.css b/apps/video/style/video_tablet.css
index ac10e69bdfa7..f1614ee12a38 100644
--- a/apps/video/style/video_tablet.css
+++ b/apps/video/style/video_tablet.css
@@ -19,7 +19,7 @@ body {
  *    change when we get `:host` and `:content` selectors
  *    in shadow-dom.
  */
-body:not(.pick-activity) #thumbnail-list-view gaia-header,
+body:not(.pick-activity) gaia-header.thumbnails-list,
 #thumbnail-list-title {
   display: inherit !important; /* 1 */
 }
@@ -211,8 +211,8 @@ footer {
   margin-bottom: 1rem;
 }
 
-.layout-selection #thumbnail-select-view,
-.layout-list #thumbnail-list-view {
+.layout-selection .thumbnails-select,
+.layout-list .thumbnails-list {
   display: block;
 }
 
@@ -238,7 +238,10 @@ body.pick-activity .single-info-button {
 @media (orientation: landscape) {
 
   /* panels of selection mode */
-  .layout-selection #thumbnail-list-view,
+  .layout-selection .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
   .layout-selection #switch-fullscreen,
   .layout-selection #player-view > *,
   .layout-selection .single-delete-button,
@@ -258,7 +261,10 @@ body.pick-activity .single-info-button {
     display: block;
   }
 
-  .layout-list #thumbnail-select-view,
+  .layout-list .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
   .layout-list #switch-fullscreen,
   .layout-list #videoControls #videoActionBar,
   .layout-list #videoControls #close,
@@ -273,16 +279,19 @@ body.pick-activity .single-info-button {
     display: block;
   }
 
-  .layout-fullscreen-player #thumbnail-select-view,
-  .layout-fullscreen-player #thumbnail-list-view,
+  .layout-fullscreen-player .thumbnails-list,
+  .layout-fullscreen-player .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
   .layout-fullscreen-player #thumbnails,
   .layout-fullscreen-player #videoControls #videoActionBar {
     display: none;
   }
 
   /* left pane size */
-  #thumbnail-select-view,
-  #thumbnail-list-view,
+  .thumbnails-select,
+  .thumbnails-list,
   #thumbnails {
     left: 0;
     width: 40rem;
@@ -461,8 +470,8 @@ body.pick-activity .single-info-button {
   }
 
   /* left pane size */
-  body.pick-activity #thumbnail-select-view,
-  body.pick-activity #thumbnail-list-view,
+  body.pick-activity .thumbnails-select,
+  body.pick-activity .thumbnails-list,
   body.pick-activity #thumbnails {
     left: 0;
     width: 100%;
@@ -547,20 +556,29 @@ body.pick-activity .single-info-button {
   }
 
   /* selection mode */
-  .layout-selection #thumbnail-list-view,
+  .layout-selection .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
   .layout-selection #player-view {
     display: none;
   }
 
   /* list mode */
-  .layout-list #thumbnail-select-view,
+  .layout-list .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
   .layout-list #player-view {
     display: none;
   }
 
   /* player mode / fullscreen-player mode */
-  .layout-fullscreen-player #thumbnail-select-view,
-  .layout-fullscreen-player #thumbnail-list-view,
+  .layout-fullscreen-player .thumbnails-select,
+  .layout-fullscreen-player .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
   .layout-fullscreen-player #thumbnails,
   .layout-fullscreen-player #videoControls #videoActionBar {
     display: none;
diff --git a/apps/video/test/marionette/lib/video.js b/apps/video/test/marionette/lib/video.js
index 785e7c00b804..0659de213b8b 100644
--- a/apps/video/test/marionette/lib/video.js
+++ b/apps/video/test/marionette/lib/video.js
@@ -30,7 +30,7 @@ Video.Selector = Object.freeze({
   videoControls: '#videoControls',
   overlay: '#overlay',
   thumbnailsSelectButton: '#thumbnails-select-button',
-  thumbnailSelectView: '#thumbnail-select-view',
+  thumbnailSelectTop: '#thumbnail-select-top',
   thumbnailsShareButton: '#thumbnails-share-button',
   thumbnailsVideoButton: '#thumbnails-video-button',
   thumbnailsDeleteButton: '#thumbnails-delete-button',
@@ -159,7 +159,7 @@ Video.prototype = {
   enterSelectionMode: function() {
     this.client.helper.waitForElement(Video.Selector.thumbnailsSelectButton)
       .click();
-    this.client.helper.waitForElement(Video.Selector.thumbnailSelectView);
+    this.client.helper.waitForElement(Video.Selector.thumbnailSelectTop);
   },
 
   /**
diff --git a/build/csslint/xfail.list b/build/csslint/xfail.list
index a1aa9f03803f..560484a746be 100644
--- a/build/csslint/xfail.list
+++ b/build/csslint/xfail.list
@@ -61,8 +61,8 @@ apps/system/style/system/system.css 0 2
 apps/system/style/window.css 0 3
 apps/system/style/zindex.css 0 4
 apps/video/style/info.css 0 2
-apps/video/style/video.css 0 8
-apps/video/style/video_tablet.css 0 4
+apps/video/style/video.css 0 9
+apps/video/style/video_tablet.css 0 11
 apps/wappush/style/wappush.css 0 1
 apps/search/style/search.css 0 2
 shared/elements/gaia_grid/style.css 0 5
