Final touches before 3.5 release (#935)

* Browser Core version bump - fixes for Human Web * Fixing broken page reporting * beaking news dot * Home: news bar layout adjustments * Better home background caching * News telemetry
ghostery · Apr 16, 2020 · 74c2cbb · 74c2cbb
1 parent 370ab15
commit 74c2cbb
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 55 deletions.
diff --git a/Client/Frontend/Browser/BrowserViewController.swift b/Client/Frontend/Browser/BrowserViewController.swift
@@ -285,7 +285,7 @@ class BrowserViewController: UIViewController {
             let shortComment = comment?.truncateToUTF8ByteCount(200)
             let payloadDict = [
                 "url": url.host ?? "",
-                "type": "broken page",
+                "type": "INADEQUATE_CONTENT",
                 "comment": shortComment,
                 "channel": "ios",
             ]

diff --git a/Client/Frontend/Browser/BrowserViewController/BrowserViewController+ReaderMode.swift b/Client/Frontend/Browser/BrowserViewController/BrowserViewController+ReaderMode.swift
@@ -14,6 +14,7 @@ extension BrowserViewController: ReaderModeDelegate {
     }
 
     func readerMode(_ readerMode: ReaderMode, didDisplayReaderizedContentForTab tab: Tab) {
+        Telemetry.reportReaderMode()
         self.showReaderModeBar(animated: true)
         tab.showContent(true)
     }

diff --git a/ReactNative/js/components/SpeedDial.jsx b/ReactNative/js/components/SpeedDial.jsx
@@ -6,7 +6,7 @@ import Logo from './Logo';
 import NativeDrawable from './NativeDrawable';
 import { withTheme } from '../contexts/theme';
 
-const getStyles = theme => ({
+export const getStyles = theme => ({
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -15,7 +15,7 @@ const getStyles = theme => ({
   circle: {
     padding: 20,
     borderRadius: 60,
-    backgroundColor: '#ffffff50',
+    backgroundColor: '#ffffff33',
   },
   label: {
     marginTop: 5,

diff --git a/ReactNative/js/screens/Home/components/Background.jsx b/ReactNative/js/screens/Home/components/Background.jsx
@@ -1,10 +1,9 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { View, StyleSheet, Platform, Image } from 'react-native';
+import { View, StyleSheet, Platform, Image, Settings } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 const DAY_OF_MONTH = new Date().getDate();
 const BACKGROUND_URL = `https://cdn.cliqz.com/serp/configs/config_${DAY_OF_MONTH}.json`;
-let cachedBackgroundUrl;
 
 const styles = {
   mask: [
@@ -16,7 +15,7 @@ const styles = {
 };
 
 const useBackgroundImage = () => {
-  const [url, setUrl] = useState();
+  const [url, setUrl] = useState(Settings.get('backgroundUrl'));
   useEffect(() => {
     const fetchBackground = async () => {
       const responseData = await fetch(BACKGROUND_URL);
@@ -26,13 +25,18 @@ const useBackgroundImage = () => {
         : responseJSON.backgrounds_mobile;
       const backgroundIndex = Math.floor(Math.random() * backgrounds.length);
       const background = backgrounds[backgroundIndex];
-      if (background) {
+      if (background && background.url !== url) {
         setUrl(background.url);
-        cachedBackgroundUrl = background.url;
+        Settings.set({
+          backgroundUrl: background.url,
+          backgroundTimestamp: Date.now(),
+        });
       }
     };
-
-    if (!cachedBackgroundUrl) {
+    if (
+      !url ||
+      Settings.get('backgroundTimestamp') > Date.now() - 1000 * 60 * 60 * 12 // check every 12h
+    ) {
       fetchBackground();
     }
   });
@@ -50,22 +54,19 @@ export default ({ height, children }) => {
     }),
     [height],
   );
+  const backgroundSource = useMemo(
+    () => ({
+      uri: backgroundUrl,
+      priority: FastImage.priority.normal,
+    }),
+    [backgroundUrl],
+  );
+  const maskSource = useMemo(() => ({ uri: 'mask' }), []);
 
   return (
     <View style={style} accessibilityIgnoresInvertColors>
-      <FastImage
-        style={StyleSheet.absoluteFill}
-        source={{
-          uri: backgroundUrl || cachedBackgroundUrl,
-          priority: FastImage.priority.normal,
-        }}
-      />
-      <Image
-        style={styles.mask}
-        source={{
-          uri: 'mask',
-        }}
-      />
+      <FastImage style={StyleSheet.absoluteFill} source={backgroundSource} />
+      <Image style={styles.mask} source={maskSource} />
       {children}
     </View>
   );

diff --git a/ReactNative/js/screens/Home/components/News.jsx b/ReactNative/js/screens/Home/components/News.jsx
@@ -85,8 +85,7 @@ const HiddableImage = props => {
   );
 };
 
-
-function News({ news, isImagesEnabled, theme }) {
+function News({ news, isImagesEnabled, theme, telemetry }) {
   const styles = useMemo(() => getStyles(theme), [theme]);
 
   if (news.length === 0) {
@@ -100,7 +99,18 @@ function News({ news, isImagesEnabled, theme }) {
           style={styles.item}
           key={item.url}
         >
-          <TouchableWithoutFeedback onPress={() => openLink(item.url)}>
+          <TouchableWithoutFeedback onPress={() => {
+              telemetry.push(
+                {
+                  component: 'home',
+                  view: 'news',
+                  target: 'article',
+                  action: 'click',
+                },
+                'ui.metric.interaction',
+              );
+              openLink(item.url);
+            }}>
             <View>
               {isImagesEnabled && item.imageUrl &&
                 <HiddableImage style={styles.image} source={item.imageUrl}>

diff --git a/ReactNative/js/screens/Home/components/NewsToolbar.tsx b/ReactNative/js/screens/Home/components/NewsToolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, Text, NativeModules, TouchableHighlight } from 'react-native';
 import NativeDrawable from '../../../components/NativeDrawable';
 import { useStyles } from '../../../contexts/theme';
@@ -10,6 +10,9 @@ const getStyles = (theme: any) => ({
     width: '100%',
     flexDirection: 'row',
   },
+  buttonContainer: {
+    flex: 2,
+  },
   button: {
     alignItems: 'center',
     flexDirection: 'row',
@@ -36,23 +39,31 @@ const getStyles = (theme: any) => ({
     alignItems: 'center',
   },
   playbackControls: {
+    flex: 2,
     flexDirection: 'row',
+    justifyContent: 'flex-end'
   },
   downIconWrapper: {
-    position: 'absolute',
-    width: '100%',
-    alignItems: 'center',
+    flex: 0,
+  },
+  breakingNewsDot: {
+    height: 7,
+    width: 7,
+    borderRadius: 7,
+    backgroundColor: theme.redColor,
   },
 });
 
 export default ({
   scrollToNews,
   news,
   edition,
+  telemetry,
 }: {
   scrollToNews: any;
   news: News[];
   edition: String;
+  telemetry: any;
 }) => {
   const styles = useStyles(getStyles);
   const read = useCallback(() => {
@@ -79,25 +90,68 @@ export default ({
       default:
         language = 'de-DE';
     }
+    telemetry.push(
+      {
+        component: 'home',
+        view: 'news-toolbar',
+        target: 'read',
+        action: 'click',
+      },
+      'ui.metric.interaction',
+    );
     NativeModules.ReadTheNews.read(news, language);
-  }, [news, edition]);
+  }, [news, edition, telemetry]);
+  const hasBreakingNews = useMemo(
+    () => news.some(article => article.breaking_label),
+    [news],
+  );
+  const scrollToNewsTitle = useCallback(() => {
+    telemetry.push(
+      {
+        component: 'home',
+        view: 'news-toolbar',
+        target: 'title',
+        action: 'click',
+      },
+      'ui.metric.interaction',
+    );
+    scrollToNews();
+  }, [scrollToNews, telemetry]);
+  const scrollToNewsDownIcon = useCallback(() => {
+    telemetry.push(
+      {
+        component: 'home',
+        view: 'news-toolbar',
+        target: 'down-icon',
+        action: 'click',
+      },
+      'ui.metric.interaction',
+    );
+    scrollToNews();
+  }, [scrollToNews, telemetry]);
   return (
     <View style={styles.wrapper}>
-      <View style={styles.downIconWrapper}>
-        <NativeDrawable
-          style={styles.buttonIcon}
-          source="arrow-down"
-          color={styles.buttonIcon.color}
-        />
-      </View>
-      <TouchableHighlight onPress={scrollToNews}>
+      <TouchableHighlight
+        onPress={scrollToNewsTitle}
+        style={styles.buttonContainer}
+      >
         <View style={styles.button}>
           <Text style={styles.buttonText}>
             {t('ActivityStream.News.Header')}
           </Text>
+          {hasBreakingNews && <View style={styles.breakingNewsDot} />}
         </View>
       </TouchableHighlight>
-      <View style={styles.spacer} />
+      <TouchableHighlight
+        onPress={scrollToNewsDownIcon}
+        style={styles.downIconWrapper}
+      >
+        <NativeDrawable
+          style={styles.buttonIcon}
+          source="arrow-down"
+          color={styles.buttonIcon.color}
+        />
+      </TouchableHighlight>
       <View style={styles.playbackControls}>
         <TouchableHighlight onPress={read}>
           <NativeDrawable

diff --git a/ReactNative/js/screens/Home/components/SpeedDialsRow.jsx b/ReactNative/js/screens/Home/components/SpeedDialsRow.jsx
@@ -1,12 +1,16 @@
 import React from 'react';
-import { View, StyleSheet, NativeModules } from 'react-native';
-import SpeedDial from '../../../components/SpeedDial';
+import { Text, View, StyleSheet, NativeModules } from 'react-native';
+import SpeedDial, {
+  getStyles as getSpeedDialStyle,
+} from '../../../components/SpeedDial';
 
 const openSpeedDialLink = speedDial =>
   NativeModules.BrowserActions.openLink(speedDial.url, '');
 const longPressSpeedDial = speedDial =>
   NativeModules.ContextMenu.speedDial(speedDial.url, speedDial.pinned || false);
 
+const speedDialStyle = getSpeedDialStyle();
+
 const styles = StyleSheet.create({
   speedDials: {
     marginTop: 0,
@@ -21,14 +25,22 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     width: 80,
   },
+  logo: {
+    height: 30,
+    width: 30,
+  },
 });
 
-const EmptySpeedDial = () => <View style={styles.speedDial} />;
+const EmptySpeedDial = () => (
+  <View style={[speedDialStyle.container, styles.speedDial]}>
+    <View style={speedDialStyle.circle}>
+      <View style={styles.logo} />
+    </View>
+    <Text style={speedDialStyle.label} />
+  </View>
+);
 
 export default ({ dials, limit = 4 }) => {
-  if (dials.length === 0) {
-    return null;
-  }
   const emptyCount = limit - dials.length < 0 ? 0 : limit - dials.length;
   const allDials = [
     ...dials.map(dial => (

diff --git a/ReactNative/js/screens/Home/hooks/news.tsx b/ReactNative/js/screens/Home/hooks/news.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 export interface News {
   url: string;
+  breaking_label: boolean;
 }
 
 const deepEqualNews = (oldNews: News[], news: News[]) => {

diff --git a/ReactNative/js/screens/Home/index.jsx b/ReactNative/js/screens/Home/index.jsx
@@ -90,6 +90,7 @@ export default function Home({
   speedDials,
   pinnedSites,
   newsModule,
+  telemetry,
   isNewsEnabled,
   isNewsImagesEnabled,
   height,
@@ -122,13 +123,23 @@ export default function Home({
       },
     );
   }, [scrollViewElement]);
+  const onScroll = useCallback(() => {
+    telemetry.push(
+      {
+        component: 'home',
+        action: 'scroll',
+      },
+      'ui.metric.interaction',
+    );
+    hideKeyboard();
+  }, [telemetry]);
 
   return (
     <ScrollView
       ref={scrollViewElement}
       style={styles.container}
-      onScroll={hideKeyboard}
-      scrollEventThrottle={1}
+      onScroll={onScroll}
+      scrollEventThrottle={0}
       contentContainerStyle={styles.contentContainer}
       scrollEnabled={isNewsEnabled}
     >
@@ -159,14 +170,19 @@ export default function Home({
                 news={news}
                 scrollToNews={scrollToNews}
                 edition={edition}
+                telemetry={telemetry}
               />
             </View>
           </View>
         )}
       </Background>
       {isNewsEnabled && (
         <View style={styles.newsWrapper} ref={newsElement}>
-          <News news={news} isImagesEnabled={isNewsImagesEnabled} />
+          <News
+            news={news}
+            isImagesEnabled={isNewsImagesEnabled}
+            telemetry={telemetry}
+          />
         </View>
       )}
       <ToolbarArea height={toolbarHeight} />

diff --git a/ReactNative/js/screens/PrivacyStats/index.tsx b/ReactNative/js/screens/PrivacyStats/index.tsx
@@ -134,7 +134,7 @@ const usePrivacyStats = (insightsModule: BrowserCoreModule) => {
       if (!trackersBlocked) {
         trackersBlocked = 0;
       }
-      
+
       tabsState.forEach(
         (tabState: { adsBlocked: number; trackersBlocked: number }) => {
           adsBlocked += tabState.adsBlocked;

diff --git a/UserAgent/Telemetry.swift b/UserAgent/Telemetry.swift
@@ -10,7 +10,8 @@ import Foundation
 
 class Telemetry {
     static func reportReaderMode() {
-        send(signal: [:], schema: "browser:reader-mode:open")
+        send(signal: ["component": "urlbar", "view": "page-actions", "target": "reader-mode", "action": "click"],
+             schema: "ui.metric.interaction")
     }
 }