Revert "Merge pull request mozilla-b2g#20056 from EverythingMe/101623…

…3-ui-styling"

This reverts commit 4099f6d, reversing
changes made to 3553e4f.

apps/collection/js/view_collection.js

@@ -1,7 +1,6 @@
 'use strict';
 /* global BaseCollection */
 /* global Contextmenu */
-/* global Promise */
 
 (function(exports) {
 
@@ -10,8 +9,7 @@
   var grid = document.getElementById('grid');
 
   var elements = {
-    content: document.getElementById('content'),
-    header: document.getElementById('header'),
+    bgimage: document.getElementById('bgimage'),
     close: document.getElementById('close'),
     name: document.getElementById('name')
   };
@@ -38,7 +36,9 @@
 
     var categoryId = collection.categoryId;
     var query = collection.query;
+    var name = collection.name;
 
+    elements.name.textContent = name;
     elements.close.addEventListener('click', function close() {
       activity.postResult('close');
     });
@@ -76,7 +76,7 @@
             src = 'data:' + image.MIMEType + ';base64,' + image.data;
           }
 
-          elements.content.style.backgroundImage = 'url(' + src + ')';
+          elements.bgimage.style.backgroundImage = 'url(' + src + ')';
         } else {
           // TODO show default image?
         }
@@ -86,35 +86,12 @@
 
   navigator.mozSetMessageHandler('activity', function onActivity(activity) {
     if (activity.source.name === 'view-collection') {
-      // set collection name to header
-      elements.name.textContent = activity.source.data.name;
-
-      // set wallpaper behind header
-      getWallpaperImage().then(function(src) {
-        elements.header.style.backgroundImage = 'url(' + src + ')';
-      });
-
       eme.init().then(function ready() {
         HandleView(activity);
       });
     }
   });
 
-  function getWallpaperImage() {
-    return new Promise(function convert(resolve, reject) {
-      var req = navigator.mozSettings.createLock().get('wallpaper.image');
-      req.onsuccess = function image_onsuccess() {
-        var image = req.result['wallpaper.image'];
-        if (image instanceof Blob) {
-          image = URL.createObjectURL(image);
-        }
-
-        resolve(image);
-      };
-      req.onerror = reject;
-    });
-  }
-
   // exporting handler so we can trigger it from testpage.js
   // without mozActivities since we can't debug activities in app manager
   exports.HandleView = HandleView;

apps/collection/locales/collection.en-US.properties

@@ -6,6 +6,7 @@ prompt-create-custom=Create your own Smart Collection
 network-error-message=Connect to the internet to add more Smart Collections
 
 # view-collection
+close=Close
 add-to-top-of-collection=Add to top of collection
 save-to-homescreen=Save to Homescreen
 

apps/collection/style/css/view.css

@@ -1,70 +1,43 @@
-body {
-  background: #000000;
-}
 gaia-grid {
   display: block;
   height: 100%;
   width: 100%;
 }
-#header {
-  height: 5.4rem;
-  line-height: 5.4rem;
-  color: #ffffff;
-  font-size: 2.25rem;
-  overflow: hidden;
-  background-position: center -2.4rem; /* to continue wallpaper position from status bar */
-  position: relative;
-}
-#header:after {
-  position: absolute;
-  content: ' ';
-  z-index: 0;
-  background-color: rgba(0,0,0,0.8);
+
+#bgimage {
+  position: fixed;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
-}
-#name {
-  margin-right: 1rem;
-  padding-left: 3rem;
-  display: block;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  mask: url('../images/app_name_mask.svg#fade_right_mask');
-  text-overflow: '';
-  -moz-box-sizing: border-box;
-}
-#close {
-  position: absolute;
-  background: transparent url('../images/close.png') no-repeat 50% 50%/1.7rem;
-  left: 0;
-  top: 0;
-  width: 3rem;
-  height: 5.4rem;
-  z-index: 1;
-}
-#content {
-  border-top: 0.1rem solid #555;
-  position: fixed;
-  top: 5.4rem;
   left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: scroll;
-  padding-top: 2.4rem;
-  background-color: #000000;
+  z-index: -1;
   background-size: cover;
 }
-#content:after {
+
+#bgimage:after {
   position: fixed;
-  top: 5.4rem;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   content: " ";
   background-color: rgba(0,0,0,0.4);
 }
+
+#header {
+  height: 5rem;
+  background: #ccc;
+  font-size: 2rem;
+}
+#name {
+  font-weight: bold;
+}
+#close {
+  float: right;
+  color: white;
+}
+
+#content {
+  position: relative;
+}

apps/collection/view.html

@@ -43,9 +43,11 @@
 
   </head>
   <body>
+    <div id="bgimage"></div>
+
     <div id="header">
         <span id="name"></span>
-        <span id="close"></span>
+        <span id="close" data-l10n-id="close"></span>
     </div>
 
     <div id="content">

shared/js/everythingme/api.js

@@ -133,9 +133,6 @@
         return Request(this.service, 'suggestions', options);
       },
       bgimage: function bgimage(options) {
-        options.width = eme.device.screen.width;
-        options.height = eme.device.screen.height;
-
         return Request('Search', 'bgimage', options);
       }
     };

shared/js/everythingme/device.js

@@ -81,10 +81,6 @@
     this.deviceId = null;
     this.deviceType = null;
     this.carrierName = null;
-    this.screen = {
-      width: window.screen.width * window.devicePixelRatio,
-      height: window.screen.height * window.devicePixelRatio
-    };
 
     // observe info that may change
     mozSettings.addObserver('language.current', function setLocale(e) {