From f3086d4189492ef4d377ef6c6b9253da22f58bdc Mon Sep 17 00:00:00 2001
From: Joseph Yeh <jyeh@mozilla.com>
Date: Fri, 29 Jan 2016 16:31:37 +0800
Subject: [PATCH] Bug 1237934 - Fix outline when focused on an app

---
 src/media/css/app-list.styl    | 62 ++++++++++++++++------------------
 src/media/js/views/homepage.js |  6 ++--
 src/templates/homepage.html    | 36 ++++++++++----------
 3 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/media/css/app-list.styl b/src/media/css/app-list.styl
index e805af5..8d2d8a3 100644
--- a/src/media/css/app-list.styl
+++ b/src/media/css/app-list.styl
@@ -26,6 +26,29 @@ $app-list-background-color = #CBCDCD;
         margin: 2.9rem 2.6rem;
 
         list-style: none;
+
+        &::before {
+            content: ".";
+
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            color: $app-list-background-color;
+        }
+    }
+
+    .smart-button {
+        width: auto;
+        height: auto;
+
+        &.focused {
+            transform: scale(1.4);
+        }
+
+        &.pressed {
+            transform: scale(1.22);
+        }
     }
 }
 
@@ -34,42 +57,25 @@ $app-list-background-color = #CBCDCD;
 
     width: 18.9rem;
     height: 18.9rem;
-    outline: 0;
+    outline: 0 solid $greyscale-white;
+    -moz-outline-radius: 60%;
 
     background-color: $app-list-background-color;
 
     smart-button-animation();
 
-    &:focus {
-        outline: 0;
+    .focused & {
+        outline-width: .8rem;
     }
 
-    &.focused {
-        transform: scale(1.4);
-
-        .icon {
-            outline: .8rem solid $greyscale-white;
-        }
-    }
-
-    &.pressed {
-        transform: scale(1.22);
+    .pressed & {
+        outline-width: 1rem;
 
         transition-duration: .06s;
-
-        .icon {
-            outline: 1rem solid $greyscale-white;
-
-            transition-duration: .06s;
-        }
     }
 
-    &.released {
+    .released & {
         transition-duration: .16s;
-
-        .icon {
-            transition-duration: .16s;
-        }
     }
 
     .icon {
@@ -78,8 +84,6 @@ $app-list-background-color = #CBCDCD;
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        -moz-outline-radius: 60%;
-        outline: 0;
         overflow: hidden;
 
         color: $greyscale-light-grey;
@@ -87,12 +91,6 @@ $app-list-background-color = #CBCDCD;
         background-size: 100% auto;
         background-position: center center;
 
-        smart-button-animation();
-
-        &:focus {
-            outline: 0;
-        }
-
         &::after {
             content: attr(data-name);
             box-sizing: border-box;
diff --git a/src/media/js/views/homepage.js b/src/media/js/views/homepage.js
index 61ffe49..1aaadbc 100644
--- a/src/media/js/views/homepage.js
+++ b/src/media/js/views/homepage.js
@@ -43,7 +43,7 @@ define('views/homepage',
         }
     });
 
-    z.page.on('sn:willfocus', '.app-list-app', function() {
+    z.page.on('sn:willfocus', '.smart-button', function() {
         SpatialNavigation.pause();
 
         var callback = function() {
@@ -75,7 +75,7 @@ define('views/homepage',
         return false;
     });
 
-    z.page.on('focus', '.app-list-app', function() {
+    z.page.on('focus', '.smart-button', function() {
         var focusedApp = appsModel.lookup(this.dataset.id);
         var focusedManifestURL = focusedApp.manifest_url;
 
@@ -170,7 +170,7 @@ define('views/homepage',
         $appPreviewPrice.removeClass('hidden');
     });
 
-    z.page.on('keyup', '.app-list-app', function(e) {
+    z.page.on('keyup', '.smart-button', function(e) {
         if (e.keyCode !== window.KeyEvent.DOM_VK_RETURN || !caps.webApps) {
             return;
         }
diff --git a/src/templates/homepage.html b/src/templates/homepage.html
index ff37b0a..fcbd7e7 100644
--- a/src/templates/homepage.html
+++ b/src/templates/homepage.html
@@ -4,24 +4,26 @@
   {% defer (url=api('apps'), id='app-list', pluck='objects', as='apps', key='id') %}
     <ul class="clearfix">
       {% for app in this %}
-        <li class="app-list-app focusable" data-id="{{ app.id }}">
-          {% if app.icons['128'] %}
-            <div class="icon" data-name="{{ app.name }}"
-                 style="background-image: url('{{ app.icons['128'] }}');"></div>
-          {% elif app.icons['64'] %}
-            <div class="icon" data-name="{{ app.name }}"
-                 style="background-image: url('{{ app.icons['64'] }}');"></div>
-          {% elif app.icons['48'] %}
-            <div class="icon" data-name="{{ app.name }}"
-                 style="background-image: url('{{ app.icons['48'] }}');"></div>
-          {% elif app.icons['32'] %}
-            <div class="icon" data-name="{{ app.name }}"
-                 style="background-image: url('{{ app.icons['32'] }}');"></div>
-          {% endif %}
+        <li class="smart-button focusable" data-id="{{ app.id }}">
+          <div class="app-list-app">
+            {% if app.icons['128'] %}
+              <div class="icon" data-name="{{ app.name }}"
+                   style="background-image: url('{{ app.icons['128'] }}');"></div>
+            {% elif app.icons['64'] %}
+              <div class="icon" data-name="{{ app.name }}"
+                   style="background-image: url('{{ app.icons['64'] }}');"></div>
+            {% elif app.icons['48'] %}
+              <div class="icon" data-name="{{ app.name }}"
+                   style="background-image: url('{{ app.icons['48'] }}');"></div>
+            {% elif app.icons['32'] %}
+              <div class="icon" data-name="{{ app.name }}"
+                   style="background-image: url('{{ app.icons['32'] }}');"></div>
+            {% endif %}
 
-          {% if app.tv_featured %}
-            <span class="star" data-icon="bookmark-on"></span>
-          {% endif %}
+            {% if app.tv_featured %}
+              <span class="star" data-icon="bookmark-on"></span>
+            {% endif %}
+          </div>
         </li>
       {% endfor %}
     </ul>