Bug 1068987 - Hide main gallery views when dialogs are visible.

apps/gallery/js/frames.js

@@ -140,7 +140,8 @@ function deleteSingleItem() {
     messageId: msg,
     cancelId: 'cancel',
     confirmId: 'delete',
-    danger: true
+    danger: true,
+    bodyClass: 'showing-dialog'
   }, function() { // onSuccess
     // disable delete, edit and share button to prevent
     // operations while delete item

apps/gallery/js/gallery.js

@@ -950,7 +950,8 @@ function deleteSelectedItems() {
     messageArgs: {n: selected.length},
     cancelId: 'cancel',
     confirmId: 'delete',
-    danger: true
+    danger: true,
+    bodyClass: 'showing-dialog'
   }, function() { // onSuccess
     // deleteFile is O(n), so this loop is O(n*n). If used with really large
     // selections, it might have noticably bad performance.  If so, we

apps/gallery/js/info.js

@@ -3,6 +3,7 @@ $('info-close-button').onclick = function hideFileInformation() {
   // Enable NFC sharing when user closes info and returns to fullscreen view
   NFC.share(getCurrentFile);
   $('info-view').classList.add('hidden');
+  document.body.classList.remove('showing-dialog');
 };
 
 function showFileInformation(fileinfo) {
@@ -19,6 +20,7 @@ function showFileInformation(fileinfo) {
   // We need to disable NFC sharing when showing file info view
   NFC.unshare();
   $('info-view').classList.remove('hidden');
+  document.body.classList.add('showing-dialog');
 
   function populateMediaInfo(fileinfo) {
     var data = {

apps/gallery/js/overlay.js

@@ -35,6 +35,7 @@ var Overlay = {
   hide: function hide() {
     Overlay.current = null;
     $('overlay').classList.add('hidden');
+    document.body.classList.remove('showing-dialog');
   },
 
   show: function show(id) {
@@ -44,6 +45,7 @@ var Overlay = {
       $('overlay-camera-button').classList.add('hidden');
       $('overlay-cancel-button').classList.add('hidden');
       $('overlay-menu').classList.add('hidden');
+      document.body.classList.add('showing-dialog');
       var title, text;
       switch (id) {
         case null:

apps/gallery/style/gallery.css

@@ -41,6 +41,11 @@ section {
   display: none;
 }
 
+/* hide sections from screen reader when modal dialogs are showing */
+body.showing-dialog > section {
+  visibility: hidden;
+}
+
 /* All of the main views fill the screen */
 #fullscreen-view, #edit-view, #crop-view, #thumbnail-views {
   position: absolute;

apps/gallery/style/gallery_tablet.css

@@ -339,7 +339,7 @@ body.fullscreenView #fullscreen-back-button-large {
  */
 #overlay,
 #confirm-dialog {
-  background: rgba(51, 51, 51, 0.6);
+  background: rgb(51, 51, 51);
 }
 
 #overlay section,

shared/js/dialogs.js

@@ -46,10 +46,20 @@ var Dialogs = {
         confirmButton.classList.remove('danger');
       }
 
+      // If the caller specified a bodyClass, add that to the classList of the
+      // body element. This can be used for accessibility, e.g., to hide the
+      // main document while a dialog is shown
+      if (options.bodyClass) {
+        document.body.classList.add(options.bodyClass);
+      }
+
       // show the confirm dialog
       dialog.classList.remove('hidden');
 
       function close(ev) {
+        if (options.bodyClass) {
+          document.body.classList.remove(options.bodyClass);
+        }
         dialog.classList.add('hidden');
         cancelButton.removeEventListener('click', onCancelClick);
         confirmButton.removeEventListener('click', onConfirmClick);

tests/python/gaia-ui-tests/gaiatest/apps/gallery/app.py

@@ -16,23 +16,32 @@ class Gallery(Base):
     name = 'Gallery'
 
     _gallery_items_locator = (By.CSS_SELECTOR, 'div.thumbnail')
+    _overlay_locator = (By.ID, 'overlay')
     _empty_gallery_title_locator = (By.ID, 'overlay-title')
     _empty_gallery_text_locator = (By.ID, 'overlay-text')
     _progress_bar_locator = (By.ID, 'progress')
     _thumbnail_list_view_locator = (By.CSS_SELECTOR, '#thumbnail-views > footer.thumbnails-list')
     _switch_to_camera_button_locator = (By.ID, 'thumbnails-camera-button')
     _switch_to_multiple_selection_view_locator = (By.ID, 'thumbnails-select-button')
 
-    def launch(self):
+    def launch(self, empty=False):
         Base.launch(self)
         self.wait_for_element_not_displayed(*self._progress_bar_locator)
-        self.wait_for_thumbnail_view_to_load()
+        if empty:
+            self.wait_for_overlay_to_show()
+        else:
+            self.wait_for_thumbnail_view_to_load()
 
     def wait_for_thumbnail_view_to_load(self):
         Wait(self.marionette).until(expected.element_displayed(
             Wait(self.marionette).until(expected.element_present(
                 *self._thumbnail_list_view_locator))))
 
+    def wait_for_overlay_to_show(self):
+        Wait(self.marionette).until(expected.element_displayed(
+            Wait(self.marionette).until(expected.element_present(
+                *self._overlay_locator))))
+
     def wait_for_files_to_load(self, files_number):
         Wait(self.marionette).until(lambda m: m.execute_script(
             'return window.wrappedJSObject.files.length;') == files_number)

tests/python/gaia-ui-tests/gaiatest/tests/functional/gallery/test_gallery_delete_multiple_images.py

@@ -34,7 +34,6 @@ def test_gallery_delete_image(self):
 
         # Tap the delete button and confirm by default
         gallery_multi_view.tap_delete_button()
-        gallery.wait_for_thumbnail_view_to_load()
+        gallery.wait_for_overlay_to_show()
 
-        # Verify empty gallery title.
-        Wait(self.marionette).until(lambda m: gallery.empty_gallery_title == 'No photos or videos')
+        self.assertEqual(gallery.empty_gallery_title, 'No photos or videos')

tests/python/gaia-ui-tests/gaiatest/tests/functional/gallery/test_gallery_empty.py

@@ -16,7 +16,7 @@ def test_empty_gallery(self):
         # Requires there to be no photos on SDCard which is the default
 
         gallery = Gallery(self.marionette)
-        gallery.launch()
+        gallery.launch(True)
 
         self.wait_for_condition(lambda m: gallery.empty_gallery_text == 'Use the Camera app to get started.')
 

tests/python/gaia-ui-tests/gaiatest/tests/functional/gallery/test_gallery_handle_invalid_file.py

@@ -23,7 +23,7 @@ def test_gallery_handle_load_corrupt_file(self, filename):
         self.push_resource(filename)
 
         gallery = Gallery(self.marionette)
-        gallery.launch()
+        gallery.launch(filename != "image_formats/x07.jpg")
 
         self.assertTrue(len(self.data_layer.picture_files) == 1)