Bug 1401418 - Add initialized fade, focus tweaks and bug fixes to Activity Stream. r=dmose

MozReview-Commit-ID: KOC1M8QVfoa

--HG--
extra : rebase_source : 1de8ecb55560710d9da070dd5de88d49fdd356f9

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

@@ -56,7 +56,6 @@ for (const type of [
   "SAVE_SESSION_PERF_DATA",
   "SAVE_TO_POCKET",
   "SCREENSHOT_UPDATED",
-  "SEARCH_BOX_FOCUSED",
   "SECTION_DEREGISTER",
   "SECTION_DISABLE",
   "SECTION_ENABLE",

browser/extensions/activity-stream/data/content/activity-stream.bundle.js

@@ -94,7 +94,7 @@ const globalImportContext = typeof Window === "undefined" ? BACKGROUND_PROCESS :
 //   UNINIT: "UNINIT"
 // }
 const actionTypes = {};
-for (const type of ["BLOCK_URL", "BOOKMARK_URL", "DELETE_BOOKMARK_BY_ID", "DELETE_HISTORY_URL", "DELETE_HISTORY_URL_CONFIRM", "DIALOG_CANCEL", "DIALOG_OPEN", "INIT", "LOCALE_UPDATED", "MIGRATION_CANCEL", "MIGRATION_COMPLETED", "MIGRATION_START", "NEW_TAB_INIT", "NEW_TAB_INITIAL_STATE", "NEW_TAB_LOAD", "NEW_TAB_REHYDRATED", "NEW_TAB_STATE_REQUEST", "NEW_TAB_UNLOAD", "OPEN_LINK", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "PLACES_BOOKMARK_ADDED", "PLACES_BOOKMARK_CHANGED", "PLACES_BOOKMARK_REMOVED", "PLACES_HISTORY_CLEARED", "PLACES_LINK_BLOCKED", "PLACES_LINK_DELETED", "PREFS_INITIAL_VALUES", "PREF_CHANGED", "SAVE_SESSION_PERF_DATA", "SAVE_TO_POCKET", "SCREENSHOT_UPDATED", "SEARCH_BOX_FOCUSED", "SECTION_DEREGISTER", "SECTION_DISABLE", "SECTION_ENABLE", "SECTION_REGISTER", "SECTION_UPDATE", "SECTION_UPDATE_CARD", "SET_PREF", "SHOW_FIREFOX_ACCOUNTS", "SNIPPETS_DATA", "SNIPPETS_RESET", "SYSTEM_TICK", "TELEMETRY_IMPRESSION_STATS", "TELEMETRY_PERFORMANCE_EVENT", "TELEMETRY_UNDESIRED_EVENT", "TELEMETRY_USER_EVENT", "TOP_SITES_ADD", "TOP_SITES_PIN", "TOP_SITES_UNPIN", "TOP_SITES_UPDATED", "UNINIT"]) {
+for (const type of ["BLOCK_URL", "BOOKMARK_URL", "DELETE_BOOKMARK_BY_ID", "DELETE_HISTORY_URL", "DELETE_HISTORY_URL_CONFIRM", "DIALOG_CANCEL", "DIALOG_OPEN", "INIT", "LOCALE_UPDATED", "MIGRATION_CANCEL", "MIGRATION_COMPLETED", "MIGRATION_START", "NEW_TAB_INIT", "NEW_TAB_INITIAL_STATE", "NEW_TAB_LOAD", "NEW_TAB_REHYDRATED", "NEW_TAB_STATE_REQUEST", "NEW_TAB_UNLOAD", "OPEN_LINK", "OPEN_NEW_WINDOW", "OPEN_PRIVATE_WINDOW", "PLACES_BOOKMARK_ADDED", "PLACES_BOOKMARK_CHANGED", "PLACES_BOOKMARK_REMOVED", "PLACES_HISTORY_CLEARED", "PLACES_LINK_BLOCKED", "PLACES_LINK_DELETED", "PREFS_INITIAL_VALUES", "PREF_CHANGED", "SAVE_SESSION_PERF_DATA", "SAVE_TO_POCKET", "SCREENSHOT_UPDATED", "SECTION_DEREGISTER", "SECTION_DISABLE", "SECTION_ENABLE", "SECTION_REGISTER", "SECTION_UPDATE", "SECTION_UPDATE_CARD", "SET_PREF", "SHOW_FIREFOX_ACCOUNTS", "SNIPPETS_DATA", "SNIPPETS_RESET", "SYSTEM_TICK", "TELEMETRY_IMPRESSION_STATS", "TELEMETRY_PERFORMANCE_EVENT", "TELEMETRY_UNDESIRED_EVENT", "TELEMETRY_USER_EVENT", "TOP_SITES_ADD", "TOP_SITES_PIN", "TOP_SITES_UNPIN", "TOP_SITES_UPDATED", "UNINIT"]) {
   actionTypes[type] = type;
 }
 
@@ -1195,9 +1195,13 @@ class Base extends React.PureComponent {
           "main",
           null,
           prefs.showSearch && React.createElement(Search, null),
+          React.createElement(
+            "div",
+            { className: `body-wrapper${initialized ? " on" : ""}` },
             !prefs.migrationExpired && React.createElement(ManualMigration, null),
             prefs.showTopSites && React.createElement(TopSites, null),
-          React.createElement(Sections, null),
+            React.createElement(Sections, null)
+          ),
           React.createElement(ConfirmDialog, null)
         ),
         initialized && React.createElement(PreferencesPane, null)
@@ -1945,7 +1949,7 @@ module.exports.CheckPinTopSite = (site, index) => site.isPinned ? module.exports
 const React = __webpack_require__(1);
 const { connect } = __webpack_require__(3);
 const { FormattedMessage, injectIntl } = __webpack_require__(2);
-const { actionCreators: ac, actionTypes: at } = __webpack_require__(0);
+const { actionCreators: ac } = __webpack_require__(0);
 const { IS_NEWTAB } = __webpack_require__(20);
 
 class Search extends React.PureComponent {
@@ -1992,9 +1996,6 @@ class Search extends React.PureComponent {
       // Focus the search box if we are on about:home
       if (!IS_NEWTAB) {
         input.focus();
-        // Tell the addon side that search box is focused in case the browser
-        // needs to be focused too.
-        this.props.dispatch(ac.SendToMain({ type: at.SEARCH_BOX_FOCUSED }));
       }
     } else {
       window.gContentSearchController = null;

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

@@ -200,6 +200,12 @@ main {
     fill: #737373;
     vertical-align: middle; }
 
+.body-wrapper {
+  opacity: 0;
+  transition: opacity 0.1s ease-in-out; }
+  .body-wrapper.on {
+    opacity: 1; }
+
 .top-sites-list {
   list-style: none;
   margin: 0;
@@ -450,6 +456,9 @@ main {
   .topsite-form .form-wrapper .field {
     margin-inline-start: 205px;
     position: relative; }
+  .topsite-form .form-wrapper .url input:not(:placeholder-shown):dir(rtl) {
+    direction: ltr;
+    text-align: right; }
   .topsite-form .form-wrapper .section-title {
     margin-bottom: 5px;
     margin-inline-start: 205px; }

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

@@ -44,7 +44,6 @@
     "time_label_day": "nino{number}",
     "settings_pane_button_label": "Yub potbuk me dirica matidi mamegi manyen",
     "settings_pane_header": "Ter me dirica matidi manyen",
-    "settings_pane_body": "Yer ngo ma i neno ka i yabo dirica matidi manyen.",
     "settings_pane_search_header": "Yeny",
     "settings_pane_search_body": "Yeny Kakube ki i dirica ni matidi manyen.",
     "settings_pane_topsites_header": "Kakube ma gi loyo",
@@ -54,8 +53,6 @@
     "settings_pane_bookmarks_body": "Alamabukke ni ma kicweyo manyen i kabedo acel macek.",
     "settings_pane_visit_again_header": "Lim Kidoco",
     "settings_pane_visit_again_body": "Firefox bi nyuti but gin mukato me yeny mamegi ma itwero mito me poo ikome onyo dok cen iyie.",
-    "settings_pane_pocketstories_header": "Lok madito",
-    "settings_pane_pocketstories_body": "Pocket, but jo me Mozilla, bi konyi me kube i jami mabeco loyo ma twero bedo ni pe i nongo.",
     "settings_pane_done_button": "Otum",
     "edit_topsites_button_text": "Yubi",
     "edit_topsites_button_label": "Yub bute pi kakubi ni ma giloyo",
@@ -78,10 +75,8 @@
     "pocket_read_more": "Lok macuk gi lamal:",
     "pocket_read_even_more": "Nen Lok mapol",
     "pocket_feedback_header": "Kakube maber loyo, dano makato milion 25 aye oyubo.",
-    "pocket_feedback_body": "Pocket, but jo me Mozilla, bi konyi me kube i jami mabeco loyo ma twero bedo ni pe i nongo.",
-    "pocket_send_feedback": "Cwal adwogi",
+    "highlights_empty_state": "Cak yeny, ka wa binyuto coc akwana mabeco, video, ki potbuk mukene ma ilimo cokcokki onyo ma kiketo alamabuk kany.",
     "topstories_empty_state": "Ityeko weng. Rot doki lacen pi lok madito mapol ki bot {provider}. Pe itwero kuro? Yer lok macuke lamal me nongo lok mabeco mapol ki i but kakube.",
-    "manual_migration_explanation": "Tem Firefox ki kakube ki alamabuk ni ma imaro loyo ki i layeny mukene.",
     "manual_migration_cancel_button": "Pe Apwoyo",
     "manual_migration_import_button": "Kel kombedi"
   },
@@ -3221,7 +3216,7 @@
     "header_visit_again": "Visita de novo",
     "header_bookmarks": "Paginas marcate recentemente",
     "header_recommended_by": "Recommendate per {provider}",
-    "header_bookmarks_placeholder": "Vos ha ancora nulle paginas marcate.",
+    "header_bookmarks_placeholder": "Tu ha ancora nulle paginas marcate.",
     "header_stories_from": "de",
     "type_label_visited": "Visitate",
     "type_label_bookmarked": "Marcate",
@@ -3240,7 +3235,7 @@
     "menu_action_delete": "Deler del chronologia",
     "menu_action_pin": "Clavar",
     "menu_action_unpin": "Disclavar",
-    "confirm_history_delete_p1": "Desira vos vermente deler cata instantia de iste pagina de vostre chronologia?",
+    "confirm_history_delete_p1": "Desira tu vermente deler cata instantia de iste pagina de tu chronologia?",
     "confirm_history_delete_notice_p2": "Iste action es irreversibile.",
     "menu_action_save_to_pocket": "Salvar in Pocket",
     "search_for_something_with": "Cercar {search_term} con:",
@@ -3252,33 +3247,33 @@
     "section_info_send_feedback": "Inviar feedback",
     "section_info_privacy_notice": "Advertentia de privacitate",
     "welcome_title": "Benvenite al nove scheda",
-    "welcome_body": "Firefox usara iste spatio pro monstrar vostre paginas marcate le plus relevante, articulos, videos e paginas que vos ha visitate recentemente, de sorta que vos pote revider los facilemente.",
-    "welcome_label": "Identificante vostre evidentias",
+    "welcome_body": "Firefox usara iste spatio pro monstrar tu paginas marcate le plus relevante, articulos, videos e paginas que tu ha visitate recentemente, de sorta que tu pote revider los facilemente.",
+    "welcome_label": "Identificante tu evidentias",
     "time_label_less_than_minute": "<1 min",
     "time_label_minute": "{number} min",
     "time_label_hour": "{number} h",
     "time_label_day": "{number} d",
-    "settings_pane_button_label": "Personalisar vostre pagina de nove scheda",
+    "settings_pane_button_label": "Personalisar tu pagina de nove scheda",
     "settings_pane_header": "Preferentias de nove scheda",
-    "settings_pane_body2": "Selige lo que vos vole vider in iste pagina.",
+    "settings_pane_body2": "Selige lo que tu vole vider in iste pagina.",
     "settings_pane_search_header": "Cercar",
-    "settings_pane_search_body": "Cercar in le Web ab vostre nove scheda.",
+    "settings_pane_search_body": "Cercar in le Web ab tu nove scheda.",
     "settings_pane_topsites_header": "Sitos popular",
-    "settings_pane_topsites_body": "Acceder al sitos web que vos plus visita.",
+    "settings_pane_topsites_body": "Acceder al sitos web que tu plus visita.",
     "settings_pane_topsites_options_showmore": "Monstrar duo lineas",
     "settings_pane_bookmarks_header": "Paginas marcate recentemente",
-    "settings_pane_bookmarks_body": "Vostre paginas marcate recentemente a un sol loco.",
+    "settings_pane_bookmarks_body": "Tu paginas marcate recentemente a un sol loco.",
     "settings_pane_visit_again_header": "Visitar de novo",
-    "settings_pane_visit_again_body": "Firefox vos monstrara partes de vostre chronologia de navigation que vos pote voler rememorar o visitar novemente.",
+    "settings_pane_visit_again_body": "Firefox te monstrara partes de tu chronologia de navigation que tu pote voler rememorar o visitar novemente.",
     "settings_pane_highlights_header": "In evidentia",
-    "settings_pane_highlights_body2": "Retrova cosas interessante que vos ha recentemente visitate o marcate.",
+    "settings_pane_highlights_body2": "Retrova cosas interessante que tu ha recentemente visitate o marcate.",
     "settings_pane_highlights_options_bookmarks": "Paginas marcate",
     "settings_pane_highlights_options_visited": "Sitos visitate",
     "settings_pane_snippets_header": "Breve novas",
     "settings_pane_snippets_body": "Lege breve e legier novas de Mozilla super Firefox, cultura internet e occasionalmente super alcun meme.",
     "settings_pane_done_button": "Facite",
     "edit_topsites_button_text": "Editar",
-    "edit_topsites_button_label": "Personalisar vostre section de sitos popular",
+    "edit_topsites_button_label": "Personalisar tu section de sitos popular",
     "edit_topsites_showmore_button": "Monstrar plus",
     "edit_topsites_showless_button": "Monstrar minus",
     "edit_topsites_done_button": "Facite",
@@ -3298,9 +3293,9 @@
     "pocket_read_more": "Subjectos popular:",
     "pocket_read_even_more": "Vider plus historias",
     "pocket_feedback_header": "Le melior del web, selectionate per 25 milliones de personas.",
-    "pocket_description": "Discoperir contento de alte qualitate que vos poterea alteremente non cognoscer, con le adjuta de Pocket, ora parte de Mozilla.",
-    "highlights_empty_state": "Comencia navigar e nos vos monstrara alcun del grande articulos, videos e altere paginas que vos ha recentemente visitate o marcate hic.",
-    "topstories_empty_state": "Vos ja es in die con toto. Reveni plus tarde pro plus historias popular de {provider}. Non vole attender? Selectiona un subjecto popular pro trovar plus altere historias interessante del web.",
+    "pocket_description": "Discoperir contento de alte qualitate que tu poterea alteremente non cognoscer, con le adjuta de Pocket, ora parte de Mozilla.",
+    "highlights_empty_state": "Comencia navigar e nos te monstrara alcun del grande articulos, videos e altere paginas que tu ha recentemente visitate o marcate hic.",
+    "topstories_empty_state": "Tu ja es in die con toto. Reveni plus tarde pro plus historias popular de {provider}. Non vole attender? Selectiona un subjecto popular pro trovar plus altere historias interessante del web.",
     "manual_migration_explanation2": "Essaya Firefox con le paginas marcate, le chronologia e le contrasignos de altere navigator.",
     "manual_migration_cancel_button": "No, gratias",
     "manual_migration_import_button": "Importar ora"

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.19.0036-50fae6d7</em:version>
+    <em:version>2017.09.20.0232-e27564ef</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/ActivityStream.jsm

@@ -41,6 +41,10 @@ const REASON_ADDON_UNINSTALL = 6;
 // Configure default Activity Stream prefs with a plain `value` or a `getValue`
 // that computes a value. A `value_local_dev` is used for development defaults.
 const PREFS_CONFIG = new Map([
+  ["aboutHome.autoFocus", {
+    title: "Focus the about:home search box on load",
+    value: false
+  }],
   ["default.sites", {
     title: "Comma-separated list of default top sites to fill in behind visited sites",
     getValue: ({geo}) => DEFAULT_SITES.get(DEFAULT_SITES.has(geo) ? geo : "")
@@ -117,10 +121,6 @@ const PREFS_CONFIG = new Map([
   ["telemetry.ping.endpoint", {
     title: "Telemetry server endpoint",
     value: "https://tiles.services.mozilla.com/v4/links/activity-stream"
-  }],
-  ["aboutHome.autoFocus", {
-    title: "Focus the about:home search box on load",
-    value: true
   }]
 ]);
 

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

@@ -174,7 +174,7 @@ this.ActivityStreamMessageChannel = class ActivityStreamMessageChannel {
   onNewTabInit(msg) {
     this.onActionFromContent({
       type: at.NEW_TAB_INIT,
-      data: {url: msg.target.url}
+      data: msg.target
     }, msg.target.portID);
   }
 

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

@@ -37,9 +37,12 @@ this.NewTabInit = class NewTabInit {
           this._queue.clear();
         }
         break;
-      case at.SEARCH_BOX_FOCUSED:
-        if (action._target.url === "about:home" && this.store.getState().Prefs.values["aboutHome.autoFocus"]) {
-          action._target.browser.focus();
+      case at.NEW_TAB_INIT:
+        if (action.data.url === "about:home") {
+          const prefs = this.store.getState().Prefs.values;
+          if (prefs["aboutHome.autoFocus"] && prefs.showSearch) {
+            action.data.browser.focus();
+          }
         }
         break;
     }

browser/extensions/activity-stream/test/unit/lib/ActivityStreamMessageChannel.test.js

@@ -80,7 +80,7 @@ describe("ActivityStreamMessageChannel", () => {
         mm.createChannel();
         assert.notCalled(global.AboutNewTab.override);
       });
-      it("should simluate init for existing ports", () => {
+      it("should simulate init for existing ports", () => {
         sinon.stub(mm, "onActionFromContent");
 
         RPmessagePorts.push({
@@ -96,8 +96,8 @@ describe("ActivityStreamMessageChannel", () => {
 
         mm.createChannel();
 
-        assert.calledWith(mm.onActionFromContent.firstCall, {type: at.NEW_TAB_INIT, data: {url: "about:monkeys"}}, "inited");
-        assert.calledWith(mm.onActionFromContent.secondCall, {type: at.NEW_TAB_INIT, data: {url: "about:sheep"}}, "loaded");
+        assert.calledWith(mm.onActionFromContent.firstCall, {type: at.NEW_TAB_INIT, data: RPmessagePorts[0]});
+        assert.calledWith(mm.onActionFromContent.secondCall, {type: at.NEW_TAB_INIT, data: RPmessagePorts[1]});
       });
       it("should simluate load for loaded ports", () => {
         sinon.stub(mm, "onActionFromContent");
@@ -162,8 +162,8 @@ describe("ActivityStreamMessageChannel", () => {
 
         assert.calledWith(mm.onActionFromContent, {
           type: at.NEW_TAB_INIT,
-          data: {url: "about:monkeys"}
-        }, "foo");
+          data: t
+        });
       });
     });
     describe("#onNewTabLoad", () => {

browser/extensions/activity-stream/test/unit/lib/NewTabInit.test.js

@@ -59,40 +59,48 @@ describe("NewTabInit", () => {
     instance.onAction({type: at.LOCALE_UPDATED});
     assert.notCalled(store.dispatch);
   });
-  it("should focus the content browser when SEARCH_BOX_FOCUSED", () => {
-    STATE.Prefs = {values: {"aboutHome.autoFocus": true}};
-    const action = {
-      type: at.SEARCH_BOX_FOCUSED,
-      _target: {
+  describe("about:home search auto focus", () => {
+    let action;
+    beforeEach(() => {
+      STATE.Prefs = {
+        values: {
+          "aboutHome.autoFocus": true,
+          "showSearch": true
+        }
+      };
+      action = {
+        type: at.NEW_TAB_INIT,
+        data: {
           url: "about:home",
           browser: {focus: sinon.spy()}
         }
       };
-    instance.onAction(action);
-    assert.calledOnce(action._target.browser.focus);
     });
-  it("should NOT focus the content browser when SEARCH_BOX_FOCUSED for about:newtab", () => {
-    STATE.Prefs = {values: {"aboutHome.autoFocus": true}};
-    const action = {
-      type: at.SEARCH_BOX_FOCUSED,
-      _target: {
-        url: "about:newtab",
-        browser: {focus: sinon.spy()}
-      }
-    };
+    it("should focus the content browser when NEW_TAB_INIT", () => {
       instance.onAction(action);
-    assert.notCalled(action._target.browser.focus);
+
+      assert.calledOnce(action.data.browser.focus);
     });
-  it("should NOT focus the content browser when SEARCH_BOX_FOCUSED when autoFocus pref is off", () => {
-    STATE.Prefs = {values: {"aboutHome.autoFocus": false}};
-    const action = {
-      type: at.SEARCH_BOX_FOCUSED,
-      _target: {
-        url: "about:newtab",
-        browser: {focus: sinon.spy()}
-      }
-    };
+    it("should NOT focus the content browser when NEW_TAB_INIT for about:newtab", () => {
+      action.data.url = "about:newtab";
+
       instance.onAction(action);
-    assert.notCalled(action._target.browser.focus);
+
+      assert.notCalled(action.data.browser.focus);
+    });
+    it("should NOT focus the content browser when NEW_TAB_INIT when autoFocus pref is off", () => {
+      STATE.Prefs.values["aboutHome.autoFocus"] = false;
+
+      instance.onAction(action);
+
+      assert.notCalled(action.data.browser.focus);
+    });
+    it("should NOT focus the content browser when NEW_TAB_INIT when there's no search", () => {
+      STATE.Prefs.values.showSearch = false;
+
+      instance.onAction(action);
+
+      assert.notCalled(action.data.browser.focus);
+    });
   });
 });