bug 903284 and bug 895686 - Add updated icons for contextual app bar. Change "unpin" to "hide" for bookmarks and history. r=sfoster

browser/metro/base/content/browser.xul

@@ -276,7 +276,7 @@ Desktop browser's sync prefs.
             </hbox>
 
             <hbox id="toolbar-context-autocomplete" pack="end">
-              <toolbarbutton id="close-button" class="appbar-secondary"
+              <toolbarbutton id="close-button" class="appbar-primary"
                              oncommand="Appbar.onAutocompleteCloseButton()"/>
             </hbox>
           </stack>
@@ -362,19 +362,22 @@ Desktop browser's sync prefs.
     <!-- Context button bar -->
     <appbar id="contextappbar">
       <toolbar id="contextualactions-tray" labelled="true" flex="1">
-        <toolbarbutton id="pin-selected-button" class="appbar-secondary"
+        <toolbarbutton id="pin-selected-button" class="appbar-primary"
                        label-uses-set-name="true" hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('pin')"/>
-        <toolbarbutton id="unpin-selected-button" class="appbar-secondary"
+        <toolbarbutton id="unpin-selected-button" class="appbar-primary"
                        label-uses-set-name="true" hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('unpin')"/>
-        <toolbarbutton id="delete-selected-button" class="appbar-secondary"
+        <toolbarbutton id="hide-selected-button" class="appbar-primary"
+                       label-uses-set-name="true" hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('unpin')"/>
+        <toolbarbutton id="delete-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('delete')"/>
-        <toolbarbutton id="restore-selected-button" class="appbar-secondary"
+        <toolbarbutton id="restore-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('restore')"/>
-        <toolbarbutton id="clear-selected-button" class="appbar-secondary"
+        <toolbarbutton id="clear-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('clear')"/>
       </toolbar>

browser/metro/base/content/startui/BookmarksView.js

@@ -170,7 +170,7 @@ BookmarksView.prototype = Util.extend(Object.create(View.prototype), {
 
   _setContextActions: function bv__setContextActions(aItem) {
     let itemId = this._getBookmarkIdForItem(aItem);
-    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "unpin" : "pin"));
+    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "hide" : "pin"));
     if (aItem.refresh) aItem.refresh();
   },
 

browser/metro/base/content/startui/HistoryView.js

@@ -107,7 +107,7 @@ HistoryView.prototype = Util.extend(Object.create(View.prototype), {
 
   _setContextActions: function bv__setContextActions(aItem) {
     let uri = aItem.getAttribute("value");
-    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "unpin" : "pin"));
+    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "hide" : "pin"));
     if ("refresh" in aItem) aItem.refresh();
   },
 

browser/metro/base/tests/mochitest/browser_bookmarks.js

@@ -32,13 +32,13 @@ function tearDown() {
 }
 
 gTests.push({
-  desc: "Test bookmarks StartUI unpin",
+  desc: "Test bookmarks StartUI hide",
   setUp: setup,
   tearDown: tearDown,
-  run: function testBookmarksStartUnpin() {
-    let unpinButton = document.getElementById("unpin-selected-button");
+  run: function testBookmarksStartHide() {
+    let hideButton = document.getElementById("hide-selected-button");
 
-    // --------- unpin item 2
+    // --------- hide item 2
 
     let item = gStartView._getItemForBookmarkId(2);
 
@@ -46,19 +46,19 @@ gTests.push({
     sendContextMenuClickToElement(window, item, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    unpinButton.click();
+    hideButton.click();
     yield promise;
 
     item = gStartView._getItemForBookmarkId(2);
 
     ok(!item, "Item not in grid");
-    ok(!gStartView._pinHelper.isPinned(2), "Item unpinned");
+    ok(!gStartView._pinHelper.isPinned(2), "Item hidden");
     ok(gStartView._set.itemCount === gStartView._limit, "Grid repopulated");
 
-    // --------- unpin multiple items
+    // --------- hide multiple items
 
     let item1 = gStartView._getItemForBookmarkId(0);
     let item2 = gStartView._getItemForBookmarkId(5);
@@ -70,10 +70,10 @@ gTests.push({
     sendContextMenuClickToElement(window, item3, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
+    EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
     yield promise;
 
     item1 = gStartView._getItemForBookmarkId(0);
@@ -81,7 +81,7 @@ gTests.push({
     item3 = gStartView._getItemForBookmarkId(12);
 
     ok(!item1 && !item2 && !item3, "Items are not in grid");
-    ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items unpinned");
+    ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items hidden");
     ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
   }
 });

browser/metro/base/tests/mochitest/browser_history.js

@@ -43,13 +43,13 @@ function uriFromIndex(aIndex) {
 }
 
 gTests.push({
-  desc: "Test history StartUI unpin",
+  desc: "Test history StartUI hide",
   setUp: setup,
   tearDown: tearDown,
-  run: function testHistoryStartUnpin() {
-    let unpinButton = document.getElementById("unpin-selected-button");
+  run: function testHistoryStartHide() {
+    let hideButton = document.getElementById("hide-selected-button");
 
-    // --------- unpin item 2
+    // --------- hide item 2
 
     let item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
 
@@ -57,19 +57,19 @@ gTests.push({
     sendContextMenuClickToElement(window, item, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    unpinButton.click();
+    hideButton.click();
     yield promise;
 
     item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
 
     ok(!item, "Item not in grid");
-    ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item unpinned");
+    ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item hidden");
     is(gStartView._set.itemCount, gStartView._limit, "Grid repopulated");
 
-    // --------- unpin multiple items
+    // --------- hide multiple items
 
     let item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
     let item2 = gStartView._set.getItemsByUrl(uriFromIndex(5))[0];
@@ -82,10 +82,10 @@ gTests.push({
     sendContextMenuClickToElement(window, item3, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
+    EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
     yield promise;
 
     item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
@@ -93,7 +93,7 @@ gTests.push({
     item3 = gStartView._set.getItemsByUrl(uriFromIndex(12))[0];
 
     ok(!item1 && !item2 && !item3, "Items are not in grid");
-    ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items unpinned");
+    ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items hidden");
     ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
   }
 });

browser/metro/locales/en-US/chrome/browser.properties

@@ -22,8 +22,8 @@ contextAppbar2.pin.recentHistory=Pin to Recent History
 contextAppbar2.pin.downloads=Pin to Downloads
 
 contextAppbar2.unpin.topSites=Unpin from Top Sites
-contextAppbar2.unpin.bookmarks=Unpin from Bookmarks
-contextAppbar2.unpin.recentHistory=Unpin from Recent History
+contextAppbar2.hide.bookmarks=Hide Bookmark
+contextAppbar2.hide.recentHistory=Hide
 contextAppbar2.unpin.downloads=Unpin from Downloads
 
 # LOCALIZATION NOTE (contextAppbar2.delete): Deletes selected pages.

browser/metro/theme/browser.css

@@ -950,50 +950,79 @@ documenttab[selected] .documenttab-selection {
 }
 
 #pin-selected-button {
-  -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
-}
-#pin-selected-button:hover {
-  -moz-image-region: rect(40px, 240px, 80px, 200px) !important;
-}
-#pin-selected-button:active {
-  -moz-image-region: rect(80px, 240px, 120px, 200px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
 }
+
 #unpin-selected-button {
-  -moz-image-region: rect(0px, 280px, 40px, 240px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
 }
-#unpin-selected-button:hover {
-  -moz-image-region: rect(40px, 280px, 80px, 240px) !important;
-}
-#unpin-selected-button:active {
-  -moz-image-region: rect(80px, 280px, 120px, 240px) !important;
+
+#hide-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
 }
+
 #delete-selected-button {
-  -moz-image-region: rect(0px, 480px, 40px, 440px) !important;
-}
-#delete-selected-button:hover {
-  -moz-image-region: rect(40px, 480px, 80px, 440px) !important;
-}
-#delete-selected-button:active {
-  -moz-image-region: rect(80px, 480px, 120px, 440px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
 }
+
 #clear-selected-button {
-  -moz-image-region: rect(0px, 520px, 40px, 480px) !important;
-}
-#clear-selected-button:hover {
-  -moz-image-region: rect(40px, 520px, 80px, 480px) !important;
-}
-#clear-selected-button:active {
-  -moz-image-region: rect(80px, 520px, 120px, 480px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
 }
 
 #restore-selected-button {
-  -moz-image-region: rect(0px, 560px, 40px, 520px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
 }
-#restore-selected-button:hover {
-  -moz-image-region: rect(40px, 560px, 80px, 520px) !important;
+
+@media (min-resolution: @min_res_140pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
+  }
 }
-#restore-selected-button:active {
-  -moz-image-region: rect(80px, 560px, 120px, 520px) !important;
+
+@media (min-resolution: @min_res_180pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
+  }
 }
 
 /* Download notifications ======================================================= */

browser/metro/theme/jar.mn

@@ -27,6 +27,24 @@ chrome.jar:
   skin/images/navbar-back.png               (images/navbar-back.png)
   skin/images/navbar-back@1.4x.png          (images/navbar-back@1.4x.png)
   skin/images/navbar-back@1.8x.png          (images/navbar-back@1.8x.png)
+  skin/images/navbar-contextual-clear.png (images/navbar-contextual-clear.png)
+  skin/images/navbar-contextual-clear@1.4x.png (images/navbar-contextual-clear@1.4x.png)
+  skin/images/navbar-contextual-clear@1.8x.png (images/navbar-contextual-clear@1.8x.png)
+  skin/images/navbar-contextual-delete.png (images/navbar-contextual-delete.png)
+  skin/images/navbar-contextual-delete@1.4x.png (images/navbar-contextual-delete@1.4x.png)
+  skin/images/navbar-contextual-delete@1.8x.png (images/navbar-contextual-delete@1.8x.png)
+  skin/images/navbar-contextual-hide.png (images/navbar-contextual-hide.png)
+  skin/images/navbar-contextual-hide@1.4x.png (images/navbar-contextual-hide@1.4x.png)
+  skin/images/navbar-contextual-hide@1.8x.png (images/navbar-contextual-hide@1.8x.png)
+  skin/images/navbar-contextual-pin.png (images/navbar-contextual-pin.png)
+  skin/images/navbar-contextual-pin@1.4x.png (images/navbar-contextual-pin@1.4x.png)
+  skin/images/navbar-contextual-pin@1.8x.png (images/navbar-contextual-pin@1.8x.png)
+  skin/images/navbar-contextual-restore.png (images/navbar-contextual-restore.png)
+  skin/images/navbar-contextual-restore@1.4x.png (images/navbar-contextual-restore@1.4x.png)
+  skin/images/navbar-contextual-restore@1.8x.png (images/navbar-contextual-restore@1.8x.png)
+  skin/images/navbar-contextual-unpin.png (images/navbar-contextual-unpin.png)
+  skin/images/navbar-contextual-unpin@1.4x.png (images/navbar-contextual-unpin@1.4x.png)
+  skin/images/navbar-contextual-unpin@1.8x.png (images/navbar-contextual-unpin@1.8x.png)
   skin/images/navbar-download.png           (images/navbar-download.png)
   skin/images/navbar-download@1.4x.png      (images/navbar-download@1.4x.png)
   skin/images/navbar-download@1.8x.png      (images/navbar-download@1.8x.png)