Expose Chrome version to todos webview (fix #1211) (#1478)

* Expose Chrome version to todos webview (fix #1211)

The TickTick todo service fails to load if the Chrome version number
does not appear in the User-Agent string. However, login to Google Tasks
is prevented by the same.

We adopt the "chromeless" User-Agent logic from the service webview,
which selectively exposes the Chrome version everywhere except the
Google login screen. The common logic was moved into the
userAgent-helpers module.

* Refactor user agent switching

* "Chromeless" user agent switching is extracted into a separate model
* Both the service and the todos webview uses the same model

3 files changed, 16 insertions, 8 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 18a900e8a..634ec4caa 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -14,8 +14,6 @@ import Appear from '../../../components/ui/effects/Appear';
 import UpgradeButton from '../../../components/ui/UpgradeButton';
 import { TODOS_PARTITION_ID } from '..';
 
-import userAgent from '../../../helpers/userAgent-helpers';
-
 // NOTE: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
 function validURL(str) {
   let url;
@@ -112,6 +110,7 @@ class TodosWebview extends Component {
     resize: PropTypes.func.isRequired,
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
+    userAgent: PropTypes.string.isRequired,
     isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
     stores: PropTypes.shape({
       settings: PropTypes.instanceOf(SettingsStore).isRequired,
@@ -139,11 +138,6 @@ class TodosWebview extends Component {
     this.node.addEventListener('mousemove', this.resizePanel.bind(this));
     this.node.addEventListener('mouseup', this.stopResize.bind(this));
     this.node.addEventListener('mouseleave', this.stopResize.bind(this));
-
-    const webViewInstance = this;
-    this.webview.addEventListener('dom-ready', () => {
-      webViewInstance.webview.setUserAgent(userAgent(true));
-    });
   }
 
   startResize = (event) => {
@@ -214,6 +208,7 @@ class TodosWebview extends Component {
       classes,
       isTodosServiceActive,
       isVisible,
+      userAgent,
       isTodosIncludedInCurrentPlan,
       stores,
     } = this.props;
@@ -275,6 +270,7 @@ class TodosWebview extends Component {
             partition={TODOS_PARTITION_ID}
             preload="./features/todos/preload.js"
             ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            useragent={userAgent}
             src={todoUrl}
           />
           )
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 884925be6..631893f93 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -27,6 +27,7 @@ class TodosScreen extends Component {
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
+          userAgent={todosStore.userAgent}
           isTodosIncludedInCurrentPlan
         />
       </ErrorBoundary>
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index c1d6a9049..af8519d9c 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -16,6 +16,8 @@ import {
 import { IPC } from './constants';
 import { state as delayAppState } from '../delayApp';
 
+import UserAgent from '../../models/UserAgent';
+
 const debug = require('debug')('Ferdi:feature:todos:store');
 
 export default class TodoStore extends FeatureStore {
@@ -25,6 +27,8 @@ export default class TodoStore extends FeatureStore {
 
   @observable webview = null;
 
+  @observable userAgentModel = new UserAgent();
+
   isInitialized = false;
 
   @computed get width() {
@@ -51,6 +55,10 @@ export default class TodoStore extends FeatureStore {
     return localStorage.getItem('todos') || {};
   }
 
+  @computed get userAgent() {
+    return this.userAgentModel.userAgent;
+  }
+
   // ========== PUBLIC API ========= //
 
   @action start(stores, actions) {
@@ -123,7 +131,10 @@ export default class TodoStore extends FeatureStore {
 
   @action _setTodosWebview = ({ webview }) => {
     debug('_setTodosWebview', webview);
-    this.webview = webview;
+    if (this.webview !== webview) {
+      this.webview = webview;
+      this.userAgentModel.setWebviewReference(webview);
+    }
   };
 
   @action _handleHostMessage = (message) => {