Bug 1155523 - Implement Pocket toolbarbutton and subview. r=gijs

browser/app/profile/firefox.js

@@ -1894,3 +1894,8 @@ pref("reader.parse-node-limit", 0);
 #ifdef NIGHTLY_BUILD
 pref("dom.serviceWorkers.enabled", true);
 #endif
+
+pref("browser.pocket.enabled", false);
+pref("browser.pocket.removedByUser", false);
+pref("browser.pocket.useLocaleList", true);
+pref("browser.pocket.enabledLocales", "en-US");

browser/base/content/baseMenuOverlay.xul

@@ -114,5 +114,6 @@
     <stringbundleset id="stringbundleset">
         <stringbundle id="bundle_browser" src="chrome://browser/locale/browser.properties"/>
         <stringbundle id="bundle_browser_region" src="chrome://browser-region/locale/region.properties"/>
+        <stringbundle id="bundle_pocket" src="chrome://browser/content/browser-pocket.properties"/>
     </stringbundleset>
 </overlay>

browser/base/content/browser-pocket.properties

@@ -0,0 +1,22 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# This is a temporary file and not meant for localization; later versions
+# of Firefox include these strings in browser.properties
+
+pocket-button.label = Pocket
+pocket-button.tooltiptext = Send this page to Pocket
+pocket-header            = Pocket
+pocket-login-required-tagline = Catch the best content you find online with Pocket.
+pocket-signup-with-fxa   = Sign up with Firefox
+pocket-signup-with-email = Sign up with email
+pocket-account-question  = Already have an account?
+pocket-login-now         = Log in now
+pocket-page-saved-header = Page Saved
+pocket-open-pocket       = Open Pocket
+pocket-remove-page       = Remove Page
+pocket-page-tags-field   = Add Tags
+pocket-page-tags-add     = Save
+pocket-page-suggested-tags-header = Suggested Tags
+pocket-signup-or         = Or

browser/base/jar.mn

@@ -75,6 +75,7 @@ browser.jar:
 *       content/browser/browser.css                   (content/browser.css)
 *       content/browser/browser.js                    (content/browser.js)
 *       content/browser/browser.xul                   (content/browser.xul)
+        content/browser/browser-pocket.properties     (content/browser-pocket.properties)
 *       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
 *       content/browser/chatWindow.xul                (content/chatWindow.xul)
         content/browser/tab-content.js                (content/tab-content.js)

browser/components/customizableui/CustomizableWidgets.jsm

@@ -33,6 +33,10 @@ XPCOMUtils.defineLazyGetter(this, "BrandBundle", function() {
   const kBrandBundle = "chrome://branding/locale/brand.properties";
   return Services.strings.createBundle(kBrandBundle);
 });
+XPCOMUtils.defineLazyGetter(this, "PocketBundle", function() {
+  const kPocketBundle = "chrome://browser/content/browser-pocket.properties";
+  return Services.strings.createBundle(kPocketBundle);
+});
 
 const kNSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const kPrefCustomizationDebug = "browser.uiCustomization.debug";
@@ -1057,6 +1061,133 @@ if (Services.prefs.getBoolPref("privacy.panicButton.enabled")) {
   });
 }
 
+if (Services.prefs.getBoolPref("browser.pocket.enabled")) {
+  let isEnabledForLocale = true;
+  if (Services.prefs.getBoolPref("browser.pocket.useLocaleList")) {
+    let chromeRegistry = Cc["@mozilla.org/chrome/chrome-registry;1"]
+                           .getService(Ci.nsIXULChromeRegistry);
+    let browserLocale = chromeRegistry.getSelectedLocale("browser");
+    let enabledLocales = [];
+    try {
+      enabledLocales = Services.prefs.getCharPref("browser.pocket.enabledLocales").split(' ');
+    } catch (ex) {
+      Cu.reportError(ex);
+    }
+    isEnabledForLocale = enabledLocales.indexOf(browserLocale) != -1;
+  }
+
+  if (isEnabledForLocale) {
+    let pocketButton = {
+      id: "pocket-button",
+      type: "view",
+      viewId: "PanelUI-pocketView",
+      label: PocketBundle.GetStringFromName("pocket-button.label"),
+      tooltiptext: PocketBundle.GetStringFromName("pocket-button.tooltiptext"),
+      onCreated(node) {
+        let doc = node.ownerDocument;
+        let elementsNeedingStrings = [
+          "pocket-header",
+          "pocket-login-required-tagline",
+          "pocket-signup-with-fxa",
+          "pocket-signup-with-email",
+          "pocket-account-question",
+          "pocket-login-now",
+          "pocket-page-saved-header",
+          "pocket-open-pocket",
+          "pocket-remove-page",
+          "pocket-page-tags-field",
+          "pocket-page-tags-add",
+          "pocket-page-suggested-tags-header",
+          "pocket-signup-or",
+        ];
+
+        for (let elementId of elementsNeedingStrings) {
+          let el = doc.getElementById(elementId);
+          let string = PocketBundle.GetStringFromName(elementId);
+
+          switch (el.localName) {
+            case "button":
+              el.label = string;
+              break;
+            case "textbox":
+              el.setAttribute("placeholder", string);
+              break;
+            default:
+              el.textContent = string;
+              break;
+          }
+        }
+
+        let addTagsField = doc.getElementById("pocket-page-tags-field");
+        let addTagsButton = doc.getElementById("pocket-page-tags-add");
+        addTagsField.addEventListener("input", this);
+        addTagsButton.addEventListener("command", this);
+      },
+      onViewShowing(event) {
+        let doc = event.target.ownerDocument;
+
+        let loginView = doc.getElementById("pocket-login-required");
+        let pageSavedView = doc.getElementById("pocket-page-saved");
+        let showPageSaved = Math.random() < 0.5;
+        loginView.hidden = !showPageSaved;
+        pageSavedView.hidden = showPageSaved;
+      },
+
+      handleEvent: function(event) {
+        let doc = event.target.ownerDocument;
+        let field = doc.getElementById("pocket-page-tags-field");
+        let button = doc.getElementById("pocket-page-tags-add");
+        switch (event.type) {
+          case "input":
+            button.disabled = !field.value.trim();
+            break;
+          case "command":
+            //XXXjaws Send tag to the Pocket server
+            field.value = "";
+            break;
+        }
+      },
+
+      USER_REMOVED_PREF: "browser.pocket.removedByUser",
+      onWidgetAdded(aWidgetId, aArea, aPosition) {
+        if (aWidgetId != this.id) {
+          return;
+        }
+
+        let placement = CustomizableUI.getPlacementOfWidget(this.id);
+        let widgetInUI = placement && placement.area;
+        Services.prefs.setBoolPref(this.USER_REMOVED_PREF, !widgetInUI);
+      },
+      onWidgetRemoved(aWidgetId, aArea) {
+        if (aWidgetId != this.id) {
+          return;
+        }
+
+        let placement = CustomizableUI.getPlacementOfWidget(this.id);
+        let widgetInUI = placement && placement.area;
+        Services.prefs.setBoolPref(this.USER_REMOVED_PREF, !widgetInUI);
+      },
+      onWidgetReset(aNode, aContainer) {
+        if (aNode.id != this.id) {
+          return;
+        }
+
+        Services.prefs.setBoolPref(this.USER_REMOVED_PREF, !aContainer);
+      },
+      onWidgetUndoMove(aNode, aContainer) {
+        if (aNode.id != this.id) {
+          return;
+        }
+
+        Services.prefs.setBoolPref(this.USER_REMOVED_PREF, !aContainer);
+      }
+    };
+
+    CustomizableWidgets.push(pocketButton);
+    CustomizableUI.addListener(pocketButton);
+  }
+}
+
 #ifdef E10S_TESTING_ONLY
 /**
   * The e10s button's purpose is to lower the barrier of entry

browser/components/customizableui/content/panelUI.inc.xul

@@ -229,6 +229,45 @@
       </vbox>
     </panelview>
 
+    <panelview id="PanelUI-pocketView" flex="1">
+      <vbox class="panel-subview-body">
+        <label id="pocket-header"/>
+        <vbox id="pocket-login-required" hidden="true">
+          <label id="pocket-login-required-tagline" class="pocket-subheader"/>
+          <description id="pocket-fxa-options">
+            <button id="pocket-signup-with-fxa" class="pocket-button"/>
+            <label id="pocket-signup-or"/>
+            <button id="pocket-signup-with-email" class="pocket-button"/>
+          </description>
+          <label id="pocket-account-question"/>
+          <label id="pocket-login-now" class="text-link"/>
+        </vbox>
+        <vbox id="pocket-page-saved" hidden="true">
+          <label id="pocket-page-saved-header" class="pocket-header"/>
+          <hbox id="pocket-page-saved-next-steps" pack="center">
+            <label id="pocket-open-pocket" class="text-link"/>
+            <label id="pocket-remove-page" class="text-link"/>
+          </hbox>
+          <hbox id="pocket-separator">
+            <box class="pocket-separator-colorstop"/>
+            <box class="pocket-separator-colorstop"/>
+            <box class="pocket-separator-colorstop"/>
+            <box class="pocket-separator-colorstop"/>
+          </hbox>
+          <vbox id="pocket-page-tags">
+            <hbox id="pocket-page-tags-form">
+              <textbox id="pocket-page-tags-field"
+                       flex="1"/>
+              <button id="pocket-page-tags-add" disabled="true"/>
+            </hbox>
+            <label id="pocket-page-suggested-tags-header"/>
+            <description id="pocket-page-suggested-tags"/>
+          </vbox>
+        </vbox>
+      </vbox>
+    </panelview>
+
+
   </panelmultiview>
   <!-- These menupopups are located here to prevent flickering,
        see bug 492960 comment 20. -->

browser/components/moz.build

@@ -13,6 +13,7 @@ DIRS += [
     'loop',
     'migration',
     'places',
+    'pocket',
     'preferences',
     'privatebrowsing',
     'readinglist',

browser/components/pocket/jar.mn

@@ -0,0 +1,9 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+browser.jar:
+  content/browser/pocket/img/signup_logo.png     (img/signup_logo.png)
+  content/browser/pocket/img/signup_logo@2x.png  (img/signup_logo@2x.png)
+  content/browser/pocket/img/signup_or.png       (img/signup_or.png)
+  content/browser/pocket/img/signup_or@2x.png    (img/signup_or@2x.png)

browser/components/pocket/moz.build

@@ -0,0 +1,5 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+JAR_MANIFESTS += ['jar.mn']

browser/modules/BrowserUITelemetry.jsm

@@ -49,6 +49,7 @@ XPCOMUtils.defineLazyGetter(this, "DEFAULT_AREA_PLACEMENTS", function() {
       "urlbar-container",
       "search-container",
       "bookmarks-menu-button",
+      "pocket-button",
       "downloads-button",
       "home-button",
       "social-share-button",

browser/modules/ReaderParent.jsm

@@ -13,6 +13,7 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/Task.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI", "resource:///modules/CustomizableUI.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "PlacesUtils","resource://gre/modules/PlacesUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode", "resource://gre/modules/ReaderMode.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "ReadingList", "resource:///modules/readinglist/ReadingList.jsm");
@@ -24,6 +25,7 @@ let ReaderParent = {
 
   MESSAGES: [
     "Reader:AddToList",
+    "Reader:AddToPocket",
     "Reader:ArticleGet",
     "Reader:FaviconRequest",
     "Reader:ListStatusRequest",
@@ -44,7 +46,7 @@ let ReaderParent = {
 
   receiveMessage: function(message) {
     switch (message.name) {
-      case "Reader:AddToList":
+      case "Reader:AddToList": {
         let article = message.data.article;
         ReadingList.getMetadataFromBrowser(message.target).then(function(metadata) {
           if (metadata.previews.length > 0) {
@@ -59,6 +61,25 @@ let ReaderParent = {
           });
         });
         break;
+      }
+
+      case "Reader:AddToPocket": {
+        let doc = message.target.ownerDocument;
+        let pocketWidget = doc.getElementById("pocket-button");
+        let placement = CustomizableUI.getPlacementOfWidget("pocket-button");
+        if (placement) {
+          if (placement.area == CustomizableUI.AREA_PANEL) {
+            doc.defaultView.PanelUI.show().then(function() {
+              // The DOM node might not exist yet if the panel wasn't opened before.
+              pocketWidget = doc.getElementById("pocket-button");
+              pocketWidget.doCommand();
+            });
+          } else {
+            pocketWidget.doCommand();
+          }
+        }
+        break;
+      }
 
       case "Reader:ArticleGet":
         this._getArticle(message.data.url, message.target).then((article) => {

browser/themes/osx/browser.css

@@ -787,6 +787,10 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
     -moz-image-region: rect(18px, 738px, 36px, 720px);
   }
 
+  #pocket-button@toolbarButtonPressed@ {
+    -moz-image-region: rect(18px, 774px, 36px, 756px);
+  }
+
   #new-tab-button@toolbarButtonPressed@ {
     -moz-image-region: rect(18px, 360px, 36px, 342px);
   }
@@ -954,6 +958,10 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
     -moz-image-region: rect(36px, 1476px, 72px, 1440px);
   }
 
+  #pocket-button@toolbarButtonPressed@ {
+    -moz-image-region: rect(36px, 1548px, 72px, 1512px);
+  }
+
   #new-tab-button@toolbarButtonPressed@ {
     -moz-image-region: rect(36px, 720px, 72px, 684px);
   }
@@ -1144,6 +1152,15 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
     -moz-image-region: rect(0px, 1920px, 64px, 1856px);
   }
 
+  #pocket-button[cui-areatype="menu-panel"],
+  toolbarpaletteitem[place="palette"] > #pocket-button {
+    -moz-image-region: rect(0px, 1984px, 64px, 1920px);
+  }
+
+  #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+    -moz-image-region: rect(64px, 1984px, 128px, 1920px);
+  }
+
   #new-tab-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #new-tab-button {
     -moz-image-region: rect(0px, 1088px, 64px, 1024px);

browser/themes/shared/browser.inc

@@ -2,7 +2,7 @@
 
 % Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none.
 %define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
-%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button
+%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button
 
 %ifdef XP_MACOSX
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -1236,6 +1236,133 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   transform: scaleX(-1);
 }
 
+#pocket-login-required,
+#pocket-page-saved {
+  text-align: center;
+}
+
+#pocket-page-saved {
+  /* Needed to undo the padding that .panel-subview-body
+     places on all subviews. */
+  margin: -4px;
+}
+
+#pocket-header {
+  background-image: url(chrome://browser/content/pocket/img/signup_logo.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  margin: 1rem 0;
+  width: 116px;
+  height: 29px;
+  text-indent: -999rem;
+}
+
+.pocket-subheader {
+  color: #7d7e81;
+  margin-bottom: 3rem;
+  padding: 0 2rem;
+}
+
+.pocket-button {
+  -moz-appearance: none;
+  background-color: #d3505a;
+  background-image: linear-gradient(to bottom, #ee5f64, #d3505a);
+  border: 1px solid #d13644;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
+  color: #fff;
+  font-weight: bold;
+  min-width: 10rem;
+  padding: .5rem 3rem;
+  transition: background-position 0.1s linear;
+}
+
+#pocket-signup-or {
+  text-indent: -999rem;
+  margin: 1rem auto;
+  background-image: url(chrome://browser/content/pocket/img/signup_or.png);
+  width: 246px;
+  height: 27px;
+  display: block;
+}
+
+#pocket-signup-with-email {
+  background-color: #f2f2f2;
+  background-image: linear-gradient(to bottom, #fff, #f2f2f2);
+  border-color: #d8d8d8;
+  color: #222;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
+  margin-bottom: 3rem;
+}
+
+.pocket-button:hover {
+  background-position: 0 -15px;
+  color: #fff;
+}
+
+.pocket-button:hover:active {
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
+}
+
+#pocket-signup-with-email:hover,
+#pocket-signup-with-email:hover:active {
+  color: #222;
+}
+
+#pocket-account-question {
+  color: #333;
+  font-size: 0.875rem;
+  margin: 1.75rem auto 0;
+}
+
+#pocket-separator {
+  height: 2px;
+  margin-top: 1rem;
+}
+
+.pocket-separator-colorstop {
+  -moz-box-flex: 1;
+}
+
+.pocket-separator-colorstop:nth-child(1) {
+  background: #7bedb7;
+}
+
+.pocket-separator-colorstop:nth-child(2) {
+  background: #47bcb6;
+}
+
+.pocket-separator-colorstop:nth-child(3) {
+  background: #f34156;
+}
+
+.pocket-separator-colorstop:nth-child(4) {
+  background: #feb73d;
+}
+
+#pocket-page-tags {
+  background-color: #e3e3e3;
+  padding: 1rem 0;
+  text-align: start;
+}
+
+#pocket-page-suggested-tags-header {
+  margin-top: 1rem;
+  color: #666;
+}
+
+@media (min-resolution: 1.25dppx) {
+  #pocket-header {
+    background-image: url(chrome://browser/content/pocket/img/signup_logo@2x.png);
+    background-size: 116px 29px;
+  }
+
+  #pocket-signup-or {
+    background-image: url(chrome://browser/content/pocket/img/signup_or@2x.png);
+    background-size: 246px 27px;
+  }
+}
+
 .subviewradio {
   -moz-binding: url(chrome://global/content/bindings/radio.xml#radio);
   -moz-appearance: none;

browser/themes/shared/menupanel.inc.css

@@ -175,6 +175,15 @@ toolbarpaletteitem[place="palette"] > #webide-button {
   -moz-image-region: rect(0px, 960px, 32px, 928px);
 }
 
+#pocket-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #pocket-button {
+  -moz-image-region: rect(0px, 992px, 32px, 960px);
+}
+
+#pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+  -moz-image-region: rect(32px, 992px, 64px, 960px);
+}
+
 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
   -moz-image-region: rect(0, 832px, 32px, 800px);
 }

browser/themes/shared/toolbarbuttons.inc.css

@@ -222,6 +222,18 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
   -moz-image-region: rect(0, 738px, 18px, 720px);
 }
 
+#pocket-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 774px, 18px, 756px);
+}
+
+#pocket-button[cui-areatype="toolbar"][open] {
+%ifdef XP_MACOSX
+  -moz-image-region: rect(36px, 774px, 54px, 756px);
+%else
+  -moz-image-region: rect(18px, 774px, 36px, 756px);
+%endif
+}
+
 %if defined(XP_WIN) || defined(XP_MACOSX)
 @media (min-resolution: 1.1dppx) {
   :-moz-any(@primaryToolbarButtons@),
@@ -405,5 +417,18 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
   #webide-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 1476px, 36px, 1440px);
   }
+
+  #pocket-button[cui-areatype="toolbar"] {
+    -moz-image-region: rect(0, 1548px, 36px, 1512px);
+  }
+
+  #pocket-button[cui-areatype="toolbar"][open] {
+%ifdef XP_MACOSX
+    -moz-image-region: rect(72px, 1548px, 108px, 1512px);
+%else
+    -moz-image-region: rect(36px, 1548px, 72px, 1512px);
+%endif
+  }
+
 }
 %endif

toolkit/components/reader/AboutReader.jsm

@@ -12,6 +12,7 @@ Cu.import("resource://gre/modules/ReaderMode.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI", "resource:///modules/CustomizableUI.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "Rect", "resource://gre/modules/Geometry.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "Task", "resource://gre/modules/Task.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "UITelemetry", "resource://gre/modules/UITelemetry.jsm");
@@ -79,6 +80,13 @@ let AboutReader = function(mm, win, articlePromise) {
     // Pref doesn't exist.
   }
 
+  let pocketPlacement = CustomizableUI.getPlacementOfWidget("pocket-button");
+  if (pocketPlacement && pocketPlacement.area) {
+    this._setupButton("pocket-button", this._onPocketToggle.bind(this, "button"));
+  } else {
+    this._doc.getElementById("pocket-button").hidden = true;
+  }
+
   let colorSchemeValues = JSON.parse(Services.prefs.getCharPref("reader.color_scheme.values"));
   let colorSchemeOptions = colorSchemeValues.map((value) => {
     return { name: gStrings.GetStringFromName("aboutReader.colorScheme." + value),
@@ -303,6 +311,14 @@ AboutReader.prototype = {
     }
   },
 
+  _onPocketToggle: function Reader_onPocketToggle(aMethod) {
+    if (!this._article)
+      return;
+
+    this._mm.sendAsyncMessage("Reader:AddToPocket", { article: this._article });
+    UITelemetry.addEvent("pocket.1", aMethod, null, "reader");
+  },
+
   _onShare: function Reader_onShare() {
     if (!this._article)
       return;
@@ -842,11 +858,14 @@ AboutReader.prototype = {
   },
 
   _setupButton: function(id, callback, titleEntity, textEntity) {
-    this._setButtonTip(id, titleEntity);
+    if (titleEntity) {
+      this._setButtonTip(id, titleEntity);
+    }
 
     let button = this._doc.getElementById(id);
-    if (textEntity)
+    if (textEntity) {
       button.textContent = gStrings.GetStringFromName(textEntity);
+    }
     button.removeAttribute("hidden");
     button.addEventListener("click", function(aEvent) {
       if (!aEvent.isTrusted)

toolkit/components/reader/content/aboutReader.html

@@ -67,6 +67,7 @@
     </ul>
     <li><button id="toggle-button" class="button toggle-button" hidden="true"/></li>
     <li><button id="list-button" class="button list-button" hidden="true"/></li>
+    <li><button id="pocket-button" class="button" hidden="true"/></li>
   </ul>
 
 </body>