Merge pull request #61 from jostw/josyeh/Marketplace/master/Bug1260093

Bug 1260093 - [TV][2.5] Legal documents should be independent from the UI strings
mozilla-b2g · Mar 28, 2016 · 7472877 · 7472877
2 parents f8b5278 + 7ebb8be
commit 7472877
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 66 deletions.
diff --git a/config.js b/config.js
@@ -43,7 +43,7 @@ var localConfig = extend(true, {
         },
         'dev': {
             domain: 'https://marketplace-dev.allizom.org',
-            media_url: 'https://marketplace-dev.mozflare.net/media/',
+            media_url: 'https://marketplace-dev.allizom.org/media/',
             name: 'Dev',
             origin: 'app://marketplace-dev.allizom.org'
         },

diff --git a/gulpfile.js b/gulpfile.js
@@ -28,6 +28,7 @@ var packageFilesWhitelist = [
     'src/app-icons/*.png',
     'src/media/css/include.css',
     'src/media/fonts/FiraSans/*',
+    'src/media/docs/privacy/*',
     'src/tutorial/*',
     'src/tutorial/css/*',
     'src/tutorial/img/*',

diff --git a/src/dev.html b/src/dev.html
@@ -17,6 +17,7 @@
       <link rel="stylesheet" href="/media/css/app-preview.styl.css">
       <link rel="stylesheet" href="/media/css/app-list.styl.css">
       <link rel="stylesheet" href="/media/css/smart-button.styl.css">
+      <link rel="stylesheet" href="/media/css/spinner.styl.css">
       <link rel="stylesheet" href="/media/css/footer.styl.css">
       <link rel="stylesheet" href="/media/css/tutorial.styl.css">
       <link rel="stylesheet" href="/media/css/offline.styl.css">

diff --git a/src/media/css/app-preview.styl b/src/media/css/app-preview.styl
@@ -124,7 +124,7 @@ $app-preview-background-color = #72C9B0;
     }
 
     .description {
-        height: 19rem;
+        height: 3.1rem * 6;
         overflow: hidden;
 
         font-size: 2.6rem;

diff --git a/src/media/css/privacy.styl b/src/media/css/privacy.styl
@@ -32,7 +32,10 @@ $privacy-scrollbar-color = #CACCCE;
 }
 
 .privacy-content {
+    position: relative;
+
     max-height: $privacy-content-height;
+    min-height: 20rem;
     margin: 0 -3rem 11rem 0;
     padding-right: 3rem;
     outline: none;
@@ -42,7 +45,7 @@ $privacy-scrollbar-color = #CACCCE;
         cubic-bezier-transition();
     }
 
-    .title {
+    h3 {
         margin: 0 0 7rem;
 
         font-family: $light-italic-font-family;
@@ -51,12 +54,12 @@ $privacy-scrollbar-color = #CACCCE;
         text-align: center;
     }
 
-    .statement {
+    ul {
         font-size: 2.6rem;
         line-height: 3.6rem;
     }
 
-    .item {
+    li {
         margin-bottom: 3.6rem;
 
         list-style: none;

diff --git a/src/media/css/spinner.styl b/src/media/css/spinner.styl
@@ -0,0 +1,29 @@
+/**
+ * Spinner styles.
+ */
+
+@import 'lib';
+
+@keyframes spinner {
+    0%{
+        background-position: 0 0;
+    }
+
+    100%{
+        background-position: -6600px 0;
+    }
+}
+
+.spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width: 200px;
+    height: 200px;
+    margin: -100px 0 0 -100px;
+
+    background-image: url('../img/spinner_sprite.png');
+
+    animation: spinner 1.133s steps(33) infinite;
+}
diff --git a/src/media/css/tutorial.styl b/src/media/css/tutorial.styl
@@ -4,16 +4,6 @@
 
 @import 'lib';
 
-@keyframes spinner {
-    0%{
-        background-position: 0 0;
-    }
-
-    100%{
-        background-position: -6600px 0;
-    }
-}
-
 .slide-container {
     position: fixed;
     top: 0;
@@ -52,20 +42,6 @@
     }
 }
 
-.slide-spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    width: 200px;
-    height: 200px;
-    margin: -100px 0 0 -100px;
-
-    background-image: url('../img/spinner_sprite.png');
-
-    animation: spinner 1.133s steps(33) infinite;
-}
-
 .slide-section-top,
 .slide-section-bottom {
     position: absolute;

diff --git a/src/media/docs/privacy/en-US.html b/src/media/docs/privacy/en-US.html
@@ -0,0 +1,8 @@
+<h3>Privacy Notice Summary</h3>
+
+<ul>
+  <li>This notice is a summary of our privacy practices. To learn more about the information we collect from users and how we handle that information please read our <a href="https://www.mozilla.org/en-US/privacy/websites/" target="_blank">Mozilla Website Privacy Notice</a> and <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/" target="_blank">Terms of Use</a>.</li>
+  <li>Unless indicated otherwise, the Web Apps on the Web Apps Discovery Portal are not made by us and you should check their privacy policies before using them.</li>
+  <li>The Web Apps Discovery Portal uses cookies and other web technologies to help us understand how users use the service through aggregate analytics.</li>
+  <li>For more information on how to report claims of copyright or trademark infringement, please see: https://www.mozilla.org/about/legal/report-infringement/.</li>
+</ul>
diff --git a/src/media/js/image_helper.js b/src/media/js/image_helper.js
@@ -1,36 +1,31 @@
 define('image_helper', ['core/defer'], function(defer) {
     function findLargestIcon(icons) {
-        var iconSizes = Object.keys(icons);
-        var maxIconSize = iconSizes.reduce(function(prev, current) {
-            return parseInt(prev, 10) < parseInt(current, 10) ? current : prev;
-        });
-
-        return icons[maxIconSize];
+        return icons[Math.max.apply(null, Object.keys(icons))];
     }
 
     function getIconURL(icon) {
         // The path of icon is different from server.
+        var path = '/img/' + icon;
 
         // On marketplace server:
         // `media/marketplace-tv-front-end/img/{icon}.png`
-        var path = ['media', 'marketplace-tv-front-end', 'img', icon];
+        if (location.origin.match(/marketplace/)) {
+            path = 'media/marketplace-tv-front-end' + path;
+        }
 
         // On github page:
-        // `marketplace-tv-front-end/media/img/{icon}.png`
-        if (!location.origin.match(/marketplace/)) {
-            var tempPath = path[0];
-
-            path[0] = path[1];
-            path[1] = tempPath;
+        // `/marketplace-tv-front-end/media/img/{icon}.png`
+        if (location.origin.match(/github/)) {
+            path = '/marketplace-tv-front-end/media' + path;
         }
 
         // On local server:
         // `/media/img/{icon}.png`
         if (location.origin.match(/localhost/)) {
-            path[0] = '';
+            path = '/media' + path;
         }
 
-        return path.join('/');
+        return path;
     }
 
     function getBackgroundImageURL($element) {

diff --git a/src/media/js/views/homepage.js b/src/media/js/views/homepage.js
@@ -70,13 +70,11 @@ define('views/homepage',
     });
 
     z.page.on('mouseover', '.app-button', function() {
-        scrollToApp.call(this, function() {
-            this.focus();
-        });
+        scrollToApp.call(this, this.focus);
     });
 
     z.page.on('sn:willfocus', '.app-button', function(e) {
-        if (e.originalEvent.detail.previousElement) {
+        if (e.originalEvent.detail.hasOwnProperty('previousElement')) {
             SpatialNavigation.pause();
 
             scrollToApp.call(this, function() {

diff --git a/src/media/js/views/privacy.js b/src/media/js/views/privacy.js
@@ -1,9 +1,10 @@
 define('views/privacy',
-    ['core/l10n', 'core/z',
+    ['core/l10n', 'core/z', 'templates',
      'key_helper', 'smart_button', 'spatial_navigation', 'scrollable'],
-    function(l10n, z,
+    function(l10n, z, nunjucks,
              keyHelper, smartButton, SpatialNavigation, Scrollable) {
     var gettext = l10n.gettext;
+    var globals = nunjucks.require('globals');
 
     var $privacyButton;
     var $privacyContent;
@@ -211,7 +212,24 @@ define('views/privacy',
     });
 
     return function(builder) {
-        builder.start('privacy.html');
+        var media;
+
+        if (location.origin.match(/marketplace/)) {
+            media = document.body.getAttribute('data-media') +
+                    document.body.getAttribute('data-repo');
+        }
+
+        if (location.origin.match(/localhost/)) {
+            media = '/media';
+        }
+
+        if (location.origin.match(/github/)) {
+            media = '/marketplace-tv-front-end/media';
+        }
+
+        builder.start('privacy.html', {
+            docs: media + '/docs/privacy/' + globals.language + '.html'
+        });
 
         builder.z('type', 'leaf');
         builder.z('title', gettext('Privacy Notice'));

diff --git a/src/media/js/views/tutorial.js b/src/media/js/views/tutorial.js
@@ -5,18 +5,18 @@ define('views/tutorial',
              keyHelper, imageHelper, smartButton, SpatialNavigation) {
     var gettext = l10n.gettext;
 
-    var $slideSpinner;
+    var $spinner;
 
     // Ensure background image is loaded.
     function loadBackgroundImage($slide, callback) {
         var imagePromise = imageHelper.loadImage(
             imageHelper.getBackgroundImageURL($slide.find('.slide-image'))
         );
 
-        $slideSpinner.removeClass('hidden');
+        $spinner.removeClass('hidden');
 
         imagePromise.done(function() {
-            $slideSpinner.addClass('hidden');
+            $spinner.addClass('hidden');
             $slide.removeClass('invisible');
 
             callback();
@@ -31,7 +31,7 @@ define('views/tutorial',
 
     z.page.on('loaded reloaded_chrome', function() {
         if (z.page.find('.slide-container').length) {
-            $slideSpinner = z.page.find('.slide-spinner');
+            $spinner = z.page.find('.spinner');
 
             loadBackgroundImage(z.page.find('.invisible'), function() {
                 SpatialNavigation.startFocus();

diff --git a/src/templates/privacy.html b/src/templates/privacy.html
@@ -2,16 +2,9 @@
   <div class="privacy-window">
     <div class="privacy-content">
       <div class="scrollable">
-        <h1 class="title">{{ _('Privacy Notice Summary') }}</h1>
-
-        <ul class="statement">
-          <li class="item">{{ _('This notice is a summary of our privacy practices. To learn more about the information we collect from users and how we handle that information please read our <a href="{privacy_url}" target="_blank">Mozilla Website Privacy Notice</a> and <a href="{terms_url}" target="_blank">Terms of Use</a>.')
-                              |format(privacy_url='https://www.mozilla.org/en-US/privacy/websites/',
-                                      terms_url='https://www.mozilla.org/en-US/about/legal/terms/mozilla/') }}</li>
-          <li class="item">{{ _('Unless indicated otherwise, the Web Apps on the Web Apps Discovery Portal are not made by us and you should check their privacy policies before using them.') }}</li>
-          <li class="item">{{ _('The Web Apps Discovery Portal uses cookies and other web technologies to help us understand how users use the service through aggregate analytics.') }}</li>
-          <li class="item">{{ _('For more information on how to report claims of copyright or trademark infringement, please see: https://www.mozilla.org/about/legal/report-infringement/.') }}</li>
-        </ul>
+        {% fetch (url=docs) %}
+          <span class="spinner"></span>
+        {% endfetch %}
       </div>
 
       <div class="scrollbar hidden">

diff --git a/src/templates/tutorial.html b/src/templates/tutorial.html
@@ -43,5 +43,5 @@
     </div>
   {% endfor %}
 
-  <span class="slide-spinner hidden"></span>
+  <span class="spinner hidden"></span>
 </div>