Merge pull request #34339 from jostw/josyeh/SmartHome/v2.6/Bug1273773

Bug 1273773 - [TV][Home] Add Folder button should use icon. r=lchang

tv_apps/smart-home/index.html

@@ -97,12 +97,7 @@
       <nav id="nav-regular">
         <section id="header-buttons" class="left-top-panel">
           <smart-button data-icon="search" id="search-button" class="search-button"></smart-button>
-          <smart-button type="text-and-icon" id="settings-button" class="settings-button">
-            <span data-l10n-id="settings">settings</span>
-          </smart-button>
-          <smart-button type="text-and-icon" id="add-folder-button" class="add-folder-button">
-            <span data-l10n-id="add-folder">add folder</span>
-          </smart-button>
+          <smart-button id="add-folder-button" class="add-folder-button"></smart-button>
         </section>
         <section id="information-bar" class="information-bar">
           <div id="clock-info" class="clock-info"><span id="time" class="time"></span></div>

tv_apps/smart-home/js/edit.js

@@ -17,7 +17,6 @@
     doneButton: document.getElementById('done-button'),
     searchButton: document.getElementById('search-button'),
     addNewFolderButton: document.getElementById('add-new-folder-button'),
-    settingsButton: document.getElementById('settings-button'),
 
     regularNavElements: undefined,
     editNavElements: undefined,
@@ -34,7 +33,7 @@
       this.folderScrollable = folderScrollable;
       this._home = home;
 
-      this.regularNavElements = [this.searchButton, this.settingsButton];
+      this.regularNavElements = [this.searchButton];
       this.editNavElements = [this.doneButton, this.addNewFolderButton];
 
       this.cardManager.on('card-swapped', this.onCardSwapped.bind(this));

tv_apps/smart-home/js/home.js

@@ -17,11 +17,10 @@
   Home.prototype = {
 
     navigableIds:
-        ['search-button', 'search-input', 'settings-button',
-            'filter-tab-group', 'add-folder-button'],
+        ['search-button', 'search-input', 'filter-tab-group',
+            'add-folder-button'],
 
-    topElementIds: ['search-button', 'search-input',
-            'settings-button', 'add-folder-button'],
+    topElementIds: ['search-button', 'search-input', 'add-folder-button'],
 
     bottomElementIds: ['filter-tab-group', 'filter-all-button',
         'filter-tv-button', 'filter-device-button', 'filter-app-button',
@@ -44,7 +43,6 @@
     cardListElem: document.getElementById('card-list'),
     folderListElem: document.getElementById('folder-list'),
     cardManager: undefined,
-    settingsButton: document.getElementById('settings-button'),
     addFolderButton: document.getElementById('add-folder-button'),
     searchButton: document.getElementById('search-button'),
     timeElem: document.getElementById('time'),
@@ -501,9 +499,7 @@
 
       var focusElem = this.focusElem;
 
-      if (focusElem === this.settingsButton) {
-        this.openSettings();
-      } else if (focusElem === this.addFolderButton) {
+      if (focusElem === this.addFolderButton) {
         this.showAddFolderDialog();
       } else if (focusElem &&
           this.filterElementIds.indexOf(focusElem.id) > -1) {
@@ -865,4 +861,3 @@
   exports.Home = Home;
   exports.FOLDER_CAPACITY = FOLDER_CAPACITY;
 }(window));
-

tv_apps/smart-home/style/home.css

@@ -287,6 +287,30 @@ smart-button.hidden {
   transition: all 0.4s;
 }
 
+#add-folder-button:after {
+  content: '';
+
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  background: url('images/icon_add_folder_n.png') center no-repeat;
+  transition: filter 0.4s;
+}
+
+#add-folder-button.focused:after {
+  filter: invert(100%);
+}
+
+#add-folder-button.pressed {
+  transition-duration: 0.06s;
+}
+
+#add-folder-button.pressed:after {
+  filter: unset;
+  transition-duration: 0.06s;
+}
+
 #add-folder-button.hidden {
   display: inline-block;
   opacity: 0;

tv_apps/smart-home/test/unit/home_test.js

@@ -55,7 +55,7 @@ suite('home', function() {
   var realL10n = document.l10n;
   var realMozActivity = window.MozActivity;
   var mainSection, filterTabGroup;
-  var searchButton, settingsButton;
+  var searchButton;
   var subject;
   var fakeTimer;
 
@@ -72,10 +72,6 @@ suite('home', function() {
     searchButton.id = 'search-button';
     mainSection.appendChild(searchButton);
 
-    settingsButton = document.createElement('button');
-    settingsButton.id = 'settings-button';
-    mainSection.appendChild(settingsButton);
-
     var timeElem = document.createElement('div');
     timeElem.id = 'time';
     mainSection.appendChild(timeElem);
@@ -113,7 +109,6 @@ suite('home', function() {
     subject.cardListElem = document.createElement('div');
     subject.spatialNavigator.m_focusedElement = document.createElement('div');
     subject.isNavigable = true;
-    subject.settingsButton = settingsButton;
     subject.searchButton = searchButton;
 
     fakeTimer = this.sinon.useFakeTimers();
@@ -241,14 +236,6 @@ suite('home', function() {
   });
 
   suite('onEnter >', function() {
-    test('should open settings on settings button', function() {
-      subject.handleFocus(settingsButton);
-
-      assert.equal(MozActivity.calls.length, 0);
-      subject.onEnter();
-      assert.equal(MozActivity.calls[0].name, 'configure');
-    });
-
     test('should launch application on card ', function() {
       var testCard = document.createElement('div');
       testCard.dataset.cardId = '123';
@@ -308,12 +295,6 @@ suite('home', function() {
       subject.handleFocus(filterTabGroup);
       assert.isTrue(stub.calledOnce);
     });
-
-    test('should call checkFocusedGroup for non-menu elements', function() {
-      var stub = this.sinon.stub(subject, 'checkFocusedGroup');
-      subject.handleFocus(settingsButton);
-      assert.isTrue(stub.withArgs(settingsButton).calledOnce);
-    });
   });
 
   suite('checkFocusedGroup >', function() {