Bug 1462790 - Update Save to Pocket icons to use outline icon treatme…

…nt. r=jaws

Update the Save to Pocket svg icons in the urlbar, page action panel, and reader view. There's another Save to Pocket icon in activity stream that the bug doesn't mention but that should probably be updated too. I'll make a different revision for it.

Differential Revision: https://phabricator.services.mozilla.com/D2676

browser/extensions/pocket/bootstrap.js

@@ -344,10 +344,13 @@ var PocketReader = {
     if (this.hidden) {
       Services.mm.broadcastAsyncMessage("Reader:RemoveButton", { id: "pocket-button" });
     } else {
-      Services.mm.broadcastAsyncMessage("Reader:AddButton",
-                               { id: "pocket-button",
-                                 title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
-                                 image: "chrome://pocket/content/panels/img/pocket.svg#pocket-mark" });
+      Services.mm.broadcastAsyncMessage("Reader:AddButton", {
+        id: "pocket-button",
+        title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
+        image: "chrome://pocket/content/panels/img/pocket-outline.svg",
+        width: 20,
+        height: 20,
+      });
     }
   },
   receiveMessage(message) {
@@ -357,9 +360,13 @@ var PocketReader = {
         if (this.hidden)
           break;
         message.target.messageManager.
-          sendAsyncMessage("Reader:AddButton", { id: "pocket-button",
-                                                 title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
-                                                 image: "chrome://pocket/content/panels/img/pocket.svg#pocket-mark"});
+          sendAsyncMessage("Reader:AddButton", {
+            id: "pocket-button",
+            title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
+            image: "chrome://pocket/content/panels/img/pocket-outline.svg",
+            width: 20,
+            height: 20,
+          });
         break;
       }
       case "Reader:Clicked-pocket-button": {

browser/extensions/pocket/skin/shared/pocket.css

@@ -7,9 +7,14 @@
   fill: #fbfbfb;
 }
 
+#pocket-button,
+#pageAction-panel-pocket {
+  list-style-image: url("chrome://pocket-shared/skin/pocket-outline.svg");
+}
+
 #appMenu-library-pocket-button,
-#pageAction-panel-pocket,
-#pocket-button {
+#pocket-button-box[open="true"] > #pocket-button,
+#pocket-button-box[pocketed="true"] > #pocket-button {
   list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
 }
 

toolkit/components/reader/AboutReader.jsm

@@ -212,6 +212,8 @@ AboutReader.prototype = {
             btn.title = message.data.title;
           if (message.data.text)
             btn.textContent = message.data.text;
+          if (message.data.width && message.data.height)
+            btn.style.backgroundSize = `${message.data.width}px ${message.data.height}px`;
           let tb = this._toolbarElement;
           tb.appendChild(btn);
           this._setupButton(message.data.id, button => {

toolkit/themes/shared/aboutReader.css

@@ -273,6 +273,8 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
   border-left: 0;
   border-right: 1px solid #b5b5b5;
   border-bottom: 1px solid #c1c1c1;
+  -moz-context-properties: fill;
+  fill: #808080;
 }
 
 .button[hidden] {
@@ -501,8 +503,6 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
 
 .close-button {
   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
-  -moz-context-properties: fill;
-  fill: #808080;
   height: 68px;
   background-position: center 8px;
 }