Bug 1134446 - Automatically open the ReadingList sidebar the first time ReaderMode is used, r=unfocused

browser/base/content/browser-readinglist.js

@@ -17,6 +17,7 @@ let ReadingListUI = {
   MESSAGES: [
     "ReadingList:GetVisibility",
     "ReadingList:ToggleVisibility",
+    "ReadingList:ShowIntro",
   ],
 
   /**
@@ -222,6 +223,14 @@ let ReadingListUI = {
         this.toggleSidebar();
         break;
       }
+
+      case "ReadingList:ShowIntro": {
+        if (this.enabled && !Preferences.get("browser.readinglist.introShown", false)) {
+          Preferences.set("browser.readinglist.introShown", true);
+          this.showSidebar();
+        }
+        break;
+      }
     }
   },
 

browser/base/content/test/general/browser_readerMode.js

@@ -7,8 +7,11 @@
  * reader-able content, and that ReadingList button can open and close
  * its Sidebar UI.
  */
-const READER_PREF = "reader.parse-on-load.enabled";
-const READING_LIST_PREF = "browser.readinglist.enabled";
+const TEST_PREFS = [
+  ["reader.parse-on-load.enabled", true],
+  ["browser.readinglist.enabled", true],
+  ["browser.readinglist.introShown", false],
+];
 
 const TEST_PATH = "http://example.com/browser/browser/base/content/test/general/";
 
@@ -16,16 +19,19 @@ let readerButton = document.getElementById("reader-mode-button");
 
 add_task(function* () {
   registerCleanupFunction(function() {
-    Services.prefs.clearUserPref(READER_PREF);
-    Services.prefs.clearUserPref(READING_LIST_PREF);
+    // Reset test prefs.
+    TEST_PREFS.forEach(([name, value]) => {
+      Services.prefs.clearUserPref(name);
+    });
     while (gBrowser.tabs.length > 1) {
       gBrowser.removeCurrentTab();
     }
   });
 
-  // Enable the reader mode and ReadingList buttons.
-  Services.prefs.setBoolPref(READER_PREF, true);
-  Services.prefs.setBoolPref(READING_LIST_PREF, true);
+  // Set required test prefs.
+  TEST_PREFS.forEach(([name, value]) => {
+    Services.prefs.setBoolPref(name, value);
+  });
 
   let tab = gBrowser.selectedTab = gBrowser.addTab();
   is_element_hidden(readerButton, "Reader mode button is not present on a new tab");
@@ -36,6 +42,7 @@ add_task(function* () {
   yield promiseWaitForCondition(() => !readerButton.hidden);
   is_element_visible(readerButton, "Reader mode button is present on a reader-able page");
 
+  // Switch page into reader mode.
   readerButton.click();
   yield promiseTabLoadEvent(tab);
 
@@ -46,33 +53,31 @@ add_task(function* () {
   is(gURLBar.value, readerUrl, "gURLBar value is about:reader URL");
   is(gURLBar.textValue, url.substring("http://".length), "gURLBar is displaying original article URL");
 
-  // Readinglist button should be present, and status should be "closed".
+  // Readinglist button should be present, and status should be "openned", as the
+  // first time in readerMode opens the Sidebar ReadingList as a feature introduction.
   let listButton;
   yield promiseWaitForCondition(() =>
     listButton = gBrowser.contentDocument.getElementById("list-button"));
   is_element_visible(listButton, "List button is present on a reader-able page");
-  yield promiseWaitForCondition(() => !listButton.classList.contains("on"));
-  ok(!listButton.classList.contains("on"),
-    "List button should not indicate SideBar-ReadingList open.");
-  ok(!ReadingListUI.isSidebarOpen,
-    "The ReadingListUI should not indicate SideBar-ReadingList open.");
-
-  // After we click ReadingList button, status should be "open".
-  listButton.click();
   yield promiseWaitForCondition(() => listButton.classList.contains("on"));
   ok(listButton.classList.contains("on"),
-    "List button should now indicate SideBar-ReadingList open.");
+    "List button should indicate SideBar-ReadingList open.");
   ok(ReadingListUI.isSidebarOpen,
-    "The ReadingListUI should now indicate SideBar-ReadingList open.");
+    "The ReadingListUI should indicate SideBar-ReadingList open.");
 
-  // Now close the sidebar.
+  // Now close the Sidebar ReadingList.
   listButton.click();
   yield promiseWaitForCondition(() => !listButton.classList.contains("on"));
-  ok(!ReadingListUI.isSidebarOpen, "The sidebar should be closed.");
+  ok(!listButton.classList.contains("on"),
+    "List button should now indicate SideBar-ReadingList closed.");
+  ok(!ReadingListUI.isSidebarOpen,
+    "The ReadingListUI should now indicate SideBar-ReadingList closed.");
 
+  // Switch page back out of reader mode.
   readerButton.click();
   yield promiseTabLoadEvent(tab);
-  is(gBrowser.selectedBrowser.currentURI.spec, url, "Original page loaded after clicking active reader mode button");
+  is(gBrowser.selectedBrowser.currentURI.spec, url,
+    "Original page loaded after clicking active reader mode button");
 
   // Load a new tab that is NOT reader-able.
   let newTab = gBrowser.selectedTab = gBrowser.addTab();

testing/profiles/prefs_general.js

@@ -304,6 +304,9 @@ user_pref("browser.tabs.remote.autostart.1", false);
 // Don't forceably kill content processes after a timeout
 user_pref("dom.ipc.tabs.shutdownTimeoutSecs", 0);
 
+// Avoid performing Readinglist Intro during tests.
+user_pref("browser.readinglist.introShown", true);
+
 // Don't let PAC generator to set PAC, as mochitest framework has its own PAC
 // rules during testing.
 user_pref("network.proxy.pac_generator", false);

toolkit/components/reader/AboutReader.jsm

@@ -294,6 +294,14 @@ AboutReader.prototype = {
     UITelemetry.addEvent("share.1", "list", null);
   },
 
+  /**
+   * To help introduce ReadingList, we want to automatically
+   * open the Desktop sidebar the first time ReaderMode is used.
+   */
+  _showListIntro: function() {
+    this._mm.sendAsyncMessage("ReadingList:ShowIntro");
+  },
+
   /**
    * Toggle ReadingList Sidebar visibility. SidebarUI will trigger
    * _updateListButtonStyle().
@@ -717,6 +725,7 @@ AboutReader.prototype = {
     this._updateImageMargins();
     this._requestReadingListStatus();
 
+    this._showListIntro();
     this._requestFavicon();
     this._doc.body.classList.add("loaded");
   },