Bug 1404345 - Users are upset and confused about how to turn off Pocket or other sections. r=ursula

MozReview-Commit-ID: DMfmvv2czC3

--HG--
extra : rebase_source : a1bbddf1fbbd33af67943fc83f069672a0143ac7

browser/extensions/activity-stream/common/Actions.jsm

@@ -64,6 +64,8 @@ for (const type of [
   "SECTION_REGISTER",
   "SECTION_UPDATE",
   "SECTION_UPDATE_CARD",
+  "SETTINGS_CLOSE",
+  "SETTINGS_OPEN",
   "SET_PREF",
   "SHOW_FIREFOX_ACCOUNTS",
   "SNIPPETS_DATA",

browser/extensions/activity-stream/common/Reducers.jsm

@@ -45,7 +45,8 @@ const INITIAL_STATE = {
     visible: false,
     data: {}
   },
-  Sections: []
+  Sections: [],
+  PreferencesPane: {visible: false}
 };
 
 function App(prevState = INITIAL_STATE.App, action) {
@@ -310,11 +311,22 @@ function Snippets(prevState = INITIAL_STATE.Snippets, action) {
   }
 }
 
+function PreferencesPane(prevState = INITIAL_STATE.PreferencesPane, action) {
+  switch (action.type) {
+    case at.SETTINGS_OPEN:
+      return Object.assign({}, prevState, {visible: true});
+    case at.SETTINGS_CLOSE:
+      return Object.assign({}, prevState, {visible: false});
+    default:
+      return prevState;
+  }
+}
+
 this.INITIAL_STATE = INITIAL_STATE;
 this.TOP_SITES_DEFAULT_LENGTH = TOP_SITES_DEFAULT_LENGTH;
 this.TOP_SITES_SHOWMORE_LENGTH = TOP_SITES_SHOWMORE_LENGTH;
 
-this.reducers = {TopSites, App, Snippets, Prefs, Dialog, Sections};
+this.reducers = {TopSites, App, Snippets, Prefs, Dialog, Sections, PreferencesPane};
 this.insertPinned = insertPinned;
 
 this.EXPORTED_SYMBOLS = ["reducers", "INITIAL_STATE", "insertPinned", "TOP_SITES_DEFAULT_LENGTH", "TOP_SITES_SHOWMORE_LENGTH"];

browser/extensions/activity-stream/data/content/activity-stream-initial-state.js

@@ -151,5 +151,8 @@
       "icon": "highlights",
       "initialized": false
     }
-  ]
+  ],
+  "PreferencesPane": {
+    "visible": false
+  }
 };

browser/extensions/activity-stream/data/content/activity-stream.css

@@ -418,8 +418,12 @@ main {
 
 .edit-topsites-wrapper .edit-topsites-button {
   position: absolute;
-  offset-inline-end: 0;
+  offset-inline-end: 21px;
-  top: -2px; }
+  top: -2px;
+  opacity: 0;
+  transition: opacity 0.2s cubic-bezier(0.07, 0.95, 0, 1); }
+  .edit-topsites-wrapper .edit-topsites-button:focus, .edit-topsites-wrapper .edit-topsites-button:active {
+    opacity: 1; }
   .edit-topsites-wrapper .edit-topsites-button button {
     background: none;
     border: 0;
@@ -457,6 +461,9 @@ main {
   .edit-topsites-wrapper .show-less span {
     padding-inline-start: 3px; }
 
+section.top-sites:hover .edit-topsites-button {
+  opacity: 1; }
+
 .topsite-form .form-wrapper {
   margin: auto;
   max-width: 350px;
@@ -517,13 +524,13 @@ main {
     opacity: 1;
     transform: translateY(0); } }
 
-.sections-list .section-top-bar {
+.section-top-bar {
   position: relative; }
-  .sections-list .section-top-bar .section-info-option {
+  .section-top-bar .section-info-option {
     offset-inline-end: 0;
     position: absolute;
     top: 0; }
-  .sections-list .section-top-bar .info-option-icon {
+  .section-top-bar .info-option-icon {
     background-image: url("assets/glyph-info-option-12.svg");
     background-size: 12px 12px;
     background-repeat: no-repeat;
@@ -533,19 +540,30 @@ main {
     height: 16px;
     width: 16px;
     display: inline-block;
-    margin-bottom: -2px; }
+    margin-bottom: -2px;
-  .sections-list .section-top-bar .info-option-icon[aria-expanded="true"] {
+    opacity: 0;
+    transition: opacity 0.2s cubic-bezier(0.07, 0.95, 0, 1); }
+    .section-top-bar .info-option-icon:focus, .section-top-bar .info-option-icon:active {
+      opacity: 1; }
+  .section-top-bar .info-option-icon[aria-expanded="true"] {
     fill: rgba(12, 12, 13, 0.8); }
-  .sections-list .section-top-bar .section-info-option .info-option {
+  .section-top-bar .section-info-option .info-option {
     visibility: hidden;
     opacity: 0;
-    transition: visibility 0.2s, opacity 0.2s ease-out;
+    transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.07, 0.95, 0, 1); }
-    transition-delay: 0.5s; }
+    .section-top-bar .section-info-option .info-option::before {
-  .sections-list .section-top-bar .info-option-icon[aria-expanded="true"] + .info-option {
+      content: "";
+      display: block;
+      height: 32px;
+      left: 50%;
+      position: absolute;
+      right: 0;
+      top: -32px; }
+  .section-top-bar .info-option-icon[aria-expanded="true"] + .info-option {
     visibility: visible;
     opacity: 1;
-    transition: visibility 0.2s, opacity 0.2s ease-out; }
+    transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.07, 0.95, 0, 1); }
-  .sections-list .section-top-bar .info-option {
+  .section-top-bar .info-option {
     z-index: 9999;
     position: absolute;
     background: #FFF;
@@ -553,23 +571,45 @@ main {
     border-radius: 3px;
     font-size: 13px;
     line-height: 120%;
-    margin-inline-end: -13px;
+    margin-inline-end: -9px;
     offset-inline-end: 0;
     top: 20px;
     width: 320px;
     padding: 24px;
     box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
     -moz-user-select: none; }
-  .sections-list .section-top-bar .info-option-header {
+  .section-top-bar .info-option-header {
     font-size: 15px;
     font-weight: 600; }
-  .sections-list .section-top-bar .info-option-body {
+  .section-top-bar .info-option-body {
     margin: 0;
     margin-top: 12px; }
-  .sections-list .section-top-bar .info-option-link {
+  .section-top-bar .info-option-link {
-    display: block;
+    color: #0060DF;
-    margin-top: 12px;
+    margin-left: 7px; }
-    color: #0060DF; }
+  .section-top-bar .info-option-manage {
+    margin-top: 24px; }
+    .section-top-bar .info-option-manage button {
+      background: none;
+      border: none;
+      color: #0060DF;
+      cursor: pointer;
+      margin: 0;
+      padding: 0; }
+      .section-top-bar .info-option-manage button::after {
+        background-image: url("assets/topic-show-more-12.svg");
+        background-repeat: no-repeat;
+        content: '';
+        -moz-context-properties: fill;
+        display: inline-block;
+        fill: #0060DF;
+        height: 16px;
+        margin-inline-start: 5px;
+        margin-top: 1px;
+        vertical-align: middle;
+        width: 12px; }
+      .section-top-bar .info-option-manage button:dir(rtl)::after {
+        transform: scaleX(-1); }
 
 .sections-list .section-list {
   margin: 0;
@@ -622,6 +662,9 @@ main {
       color: #737373;
       text-align: center; }
 
+section.section:hover .info-option-icon {
+  opacity: 1; }
+
 .topic {
   font-size: 12px;
   color: #737373;

browser/extensions/activity-stream/data/locales.json

@@ -2808,6 +2808,7 @@
     "default_label_loading": "בטעינה…",
     "header_top_sites": "אתרים מובילים",
     "header_stories": "סיפורים מובילים",
+    "header_highlights": "מומלצים",
     "header_visit_again": "ביקור חוזר",
     "header_bookmarks": "סימניות אחרונות",
     "header_recommended_by": "מומלץ על ידי {provider}",
@@ -2839,6 +2840,8 @@
     "search_web_placeholder": "חיפוש ברשת",
     "search_settings": "שינוי הגדרות חיפוש",
     "section_info_option": "מידע",
+    "section_info_send_feedback": "שליחת משוב",
+    "section_info_privacy_notice": "הצהרת פרטיות",
     "welcome_title": "ברוכים הבאים לדף הלשונית החדשה",
     "welcome_body": "Firefox ישתמש באזור זה כדי להציג את הסימניות הרלוונטיות ביותר, מאמרים, סרטוני וידאו ודפים שביקרת בהם לאחרונה, כך שניתן יהיה לגשת אליהם שוב בקלות.",
     "welcome_label": "תחומי העניין שלך מזוהים",
@@ -2848,7 +2851,7 @@
     "time_label_day": "{number} ימים",
     "settings_pane_button_label": "התאמה אישית של דף הלשונית החדשה שלך",
     "settings_pane_header": "העדפות לשונית חדשה",
-    "settings_pane_body": "ניתן לבחור מה יופיע בפניך בעת פתיחת לשונית חדשה.",
+    "settings_pane_body2": "בחירה של מה שיופיע בעמוד הזה.",
     "settings_pane_search_header": "חיפוש",
     "settings_pane_search_body": "חיפוש באינטרנט ישירות מהלשונית החדשה שלך.",
     "settings_pane_topsites_header": "אתרים מובילים",
@@ -2858,8 +2861,12 @@
     "settings_pane_bookmarks_body": "הסימניות החדשות שיצרת במיקום נוח ואחיד.",
     "settings_pane_visit_again_header": "ביקור חוזר",
     "settings_pane_visit_again_body": "Firefox תציג לך חלקים מהיסטוריית הגלישה שלך שאולי יעניין אותך להיזכר בהם או לחזור אליהם.",
-    "settings_pane_pocketstories_header": "סיפורים מובילים",
+    "settings_pane_highlights_header": "מומלצים",
-    "settings_pane_pocketstories_body": "Pocket, חלק ממשפחת Mozilla, יסייע לך להתחבר לתוכן באיכות גבוהה שיתכן שלא היה מגיע אליך בדרך אחרת.",
+    "settings_pane_highlights_body2": "מציאת הדרך חזרה לדברים שמעניינים אותך בהתאם לפריטים בהם ביקרת לאחרונה או הוספת לסימניות.",
+    "settings_pane_highlights_options_bookmarks": "סימניות",
+    "settings_pane_highlights_options_visited": "אתרים בהם ביקרת",
+    "settings_pane_snippets_header": "פתקיות",
+    "settings_pane_snippets_body": "ניתן לקרוא עדכונים קטנים ומתוקים מ־Mozilla לגבי Firefox, תרבות האינטרנט ומם אקראי מדי פעם בפעם.",
     "settings_pane_done_button": "סיום",
     "edit_topsites_button_text": "עריכה",
     "edit_topsites_button_label": "התאמת אגף האתרים המובילים שלך",
@@ -2882,9 +2889,10 @@
     "pocket_read_more": "נושאים פופולריים:",
     "pocket_read_even_more": "צפייה בחדשות נוספות",
     "pocket_feedback_header": "המיטב מרחבי האינטרנט, נאסף על ידי 25 מיליון אנשים.",
-    "pocket_feedback_body": "Pocket, חלק ממשפחת Mozilla, יסייע לך להתחבר לתוכן באיכות גבוהה שיתכן שלא היה מגיע אליך בדרך אחרת.",
+    "pocket_description": "ניתן להחשף לתוכן באיכות גבוהה שיתכן שלא היית רואה, בעזרת Pocket, שכיום מהווה חלק מ־Mozilla.",
-    "pocket_send_feedback": "שליחת משוב",
+    "highlights_empty_state": "ניתן להתחיל בגלישה ואנו נציג בפניך מספר כתבות, סרטונים ועמודים שונים מעולים בהם ביקרת לאחרונה או שהוספת לסימניות.",
-    "manual_migration_explanation": "נסו את Firefox עם האתרים המועדפים עליך והסימניות שלך מדפדפן אחר.",
+    "topstories_empty_state": "התעדכנת בכל הסיפורים. כדאי לנסות שוב מאוחר יותר כדי לקבל עוד סיפורים מובילים מאת {provider}. לא רוצה לחכות? ניתן לבחור נושא נפוץ כדי למצוא עוד סיפורים נפלאים מרחבי הרשת.",
+    "manual_migration_explanation2": "ניתן להתנסות ב־Firefox עם הסימניות, ההיסטוריה והססמאות מדפדפן אחר.",
     "manual_migration_cancel_button": "לא תודה",
     "manual_migration_import_button": "ייבוא כעת"
   },
@@ -5391,11 +5399,17 @@
     "newtab_page_title": "Filă nouă",
     "default_label_loading": "Se încarcă…",
     "header_top_sites": "Site-uri de top",
+    "header_stories": "Articole de top",
+    "header_highlights": "Evidențieri",
+    "header_visit_again": "Vizitează din nou",
+    "header_bookmarks": "Marcaje recente",
     "header_recommended_by": "Recomandat de {provider}",
+    "header_bookmarks_placeholder": "Nu ai niciun marcaj încă.",
     "header_stories_from": "de la",
     "type_label_visited": "Vizitate",
     "type_label_bookmarked": "Însemnat",
     "type_label_synced": "Sincronizat de pe alt dispozitiv",
+    "type_label_recommended": "În tendințe",
     "type_label_open": "Deschise",
     "type_label_topic": "Subiect",
     "type_label_now": "Acum",
@@ -5407,6 +5421,9 @@
     "menu_action_open_private_window": "Deschide într-o fereastră privată nouă",
     "menu_action_dismiss": "Înlătură",
     "menu_action_delete": "Șterge din istoric",
+    "menu_action_pin": "Fixează",
+    "menu_action_unpin": "Anulează fixarea",
+    "confirm_history_delete_p1": "Sigur dorești să ştergi fiecare instanţă a acestei pagini din istoric?",
     "confirm_history_delete_notice_p2": "Această acțiune este ireversibilă.",
     "menu_action_save_to_pocket": "Salvează în Pocket",
     "search_for_something_with": "Caută {search_term} cu: ",
@@ -5415,6 +5432,8 @@
     "search_web_placeholder": "Caută pe web",
     "search_settings": "Schimbă setările de căutare",
     "section_info_option": "Informații",
+    "section_info_send_feedback": "Trimite feedback",
+    "section_info_privacy_notice": "Politica de confidențialitate",
     "welcome_title": "Bun venit în noua filă",
     "welcome_body": "Firefox va folosi acest spațiu pentru a arăta cele mai relevante semne de carte, articole, videouri și pagini vizitate recent pentru a reveni la acestea ușor.",
     "welcome_label": "Se identifică evidențierile tale",
@@ -5424,11 +5443,17 @@
     "time_label_day": "{number}d",
     "settings_pane_button_label": "Particularizează pagina de filă nouă",
     "settings_pane_header": "Preferințe pentru filă nouă",
+    "settings_pane_body2": "Alege ceea ce vezi pe această pagină.",
     "settings_pane_search_header": "Caută",
     "settings_pane_search_body": "Caută pe web din noua filă.",
     "settings_pane_topsites_header": "Site-uri de top",
     "settings_pane_topsites_body": "Accesează site-urile pe care le vizitezi mai des.",
     "settings_pane_topsites_options_showmore": "Arată două rânduri",
+    "settings_pane_bookmarks_header": "Marcaje recente",
+    "settings_pane_visit_again_header": "Vizitează din nou",
+    "settings_pane_highlights_header": "Evidențieri",
+    "settings_pane_highlights_options_bookmarks": "Marcaje",
+    "settings_pane_highlights_options_visited": "Site-uri vizitate",
     "settings_pane_done_button": "Gata",
     "edit_topsites_button_text": "Editează",
     "edit_topsites_button_label": "Particularizează secțiunea site-urilor de top",
@@ -5436,6 +5461,7 @@
     "edit_topsites_showless_button": "Arată mai puțin",
     "edit_topsites_done_button": "Gata",
     "edit_topsites_pin_button": "Fixează acest site",
+    "edit_topsites_unpin_button": "Anulează fixarea acestui site",
     "edit_topsites_edit_button": "Editează acest site",
     "edit_topsites_dismiss_button": "Înlătură acest site",
     "edit_topsites_add_button": "Adaugă",
@@ -5448,6 +5474,7 @@
     "topsites_form_cancel_button": "Renunță",
     "topsites_form_url_validation": "URL valid necesar",
     "pocket_read_more": "Subiecte populare:",
+    "pocket_read_even_more": "Vezi mai multe articole",
     "manual_migration_cancel_button": "Nu, mulțumesc"
   },
   "ru": {

browser/extensions/activity-stream/install.rdf.in

@@ -8,7 +8,7 @@
     <em:type>2</em:type>
     <em:bootstrap>true</em:bootstrap>
     <em:unpack>false</em:unpack>
-    <em:version>2017.09.28.0954-66ebf91c</em:version>
+    <em:version>2017.09.29.0895-52552f5e</em:version>
     <em:name>Activity Stream</em:name>
     <em:description>A rich visual history feed and a reimagined home page make it easier than ever to find exactly what you're looking for in Firefox.</em:description>
     <em:multiprocessCompatible>true</em:multiprocessCompatible>

browser/extensions/activity-stream/lib/SectionsManager.jsm

@@ -52,6 +52,10 @@ const BUILT_IN_SECTIONS = {
     title: {id: "header_highlights"},
     maxRows: 3,
     availableContextMenuOptions: ["CheckBookmark", "SaveToPocket", "Separator", "OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl", "DeleteUrl"],
+    infoOption: {
+      header: {id: "settings_pane_highlights_header"},
+      body: {id: "settings_pane_highlights_body2"}
+    },
     emptyState: {
       message: {id: "highlights_empty_state"},
       icon: "highlights"

browser/extensions/activity-stream/test/unit/common/Reducers.test.js

@@ -1,5 +1,5 @@
 const {reducers, INITIAL_STATE, insertPinned} = require("common/Reducers.jsm");
-const {TopSites, App, Snippets, Prefs, Dialog, Sections} = reducers;
+const {TopSites, App, Snippets, Prefs, Dialog, Sections, PreferencesPane} = reducers;
 
 const {actionTypes: at} = require("common/Actions.jsm");
 
@@ -524,4 +524,19 @@ describe("Reducers", () => {
       assert.equal(state, INITIAL_STATE.Snippets);
     });
   });
+  describe("PreferencesPane", () => {
+    it("should return INITIAL_STATE by default", () => {
+      assert.equal(INITIAL_STATE.PreferencesPane, PreferencesPane(undefined, {type: "non_existent"}));
+    });
+    it("should toggle visible to true on SETTINGS_OPEN", () => {
+      const action = {type: at.SETTINGS_OPEN};
+      const nextState = PreferencesPane(INITIAL_STATE.PreferencesPane, action);
+      assert.isTrue(nextState.visible);
+    });
+    it("should toggle visible to false on SETTINGS_CLOSE", () => {
+      const action = {type: at.SETTINGS_CLOSE};
+      const nextState = PreferencesPane(INITIAL_STATE.PreferencesPane, action);
+      assert.isFalse(nextState.visible);
+    });
+  });
 });