Home page design (#873)

* Background image mask

* Handle disabled news

* No toolbar wrapper on big screen

* Hide urlbar on Home page

* New Cliqz logo

* Nicer Home layout

* tuning design

* disabling failing tests

* fixing detox tests

Author: Krzysztof Jan Modras

Branding/Cliqz/brand.xcassets/logo.imageset/Contents.json

@@ -1,23 +1,12 @@
 {
   "images" : [
     {
-      "idiom" : "universal",
-      "filename" : "[email protected]",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "[email protected]",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "[email protected]",
-      "scale" : "3x"
+      "filename" : "cliqz-white-logo.pdf",
+      "idiom" : "universal"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

Branding/Cliqz/brand.xcassets/logo.imageset/[email protected]

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "mobile-bg-vignette.png",
+      "idiom" : "universal"
+    },
+    {
+      "filename" : "mobile-bg-vignette-ipad.png",
+      "idiom" : "ipad"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Branding/Cliqz/brand.xcassets/logo.imageset/[email protected]

@@ -61,7 +61,6 @@ class BrowserViewController: UIViewController {
     fileprivate(set) var toolbar: TabToolbar?
     var searchController: SearchResultsViewController?
     var screenshotHelper: ScreenshotHelper!
-    fileprivate var homePanelIsInline = false
     var notchAreaCover: UIVisualEffectView = {
         return UIVisualEffectView()
     }()
@@ -373,7 +372,6 @@ class BrowserViewController: UIViewController {
         // set things up. Make sure to only update the toolbar state if the view is ready for it.
         if isViewLoaded {
             updateToolbarStateForTraitCollection(newCollection, withTransitionCoordinator: coordinator)
-            self.homePanelIsInline = self.shouldShowFooterForTraitCollection(newCollection)
             self.updateViewConstraints()
         }
 
@@ -445,7 +443,6 @@ class BrowserViewController: UIViewController {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        self.homePanelIsInline = self.shouldShowFooterForTraitCollection(self.traitCollection)
         NotificationCenter.default.addObserver(self, selector: #selector(appWillResignActiveNotification), name: UIApplication.willResignActiveNotification, object: nil)
         NotificationCenter.default.addObserver(self, selector: #selector(appDidBecomeActiveNotification), name: UIApplication.didBecomeActiveNotification, object: nil)
         NotificationCenter.default.addObserver(self, selector: #selector(appDidEnterBackgroundNotification), name: UIApplication.didEnterBackgroundNotification, object: nil)
@@ -748,17 +745,18 @@ class BrowserViewController: UIViewController {
         // Remake constraints even if we're already showing the home controller.
         // The home controller may change sizes if we tap the URL bar while on about:home.
         homeViewController?.view.snp.remakeConstraints { make in
-            make.top.equalTo(self.urlBar.snp.bottom)
+            if self.toolbar != nil {
+                make.top.equalTo(self.view.safeArea.top)
+            } else {
+                make.top.equalTo(self.urlBar.snp.bottom)
+            }
+
             make.left.right.equalTo(self.view)
 
             make.bottom.equalTo(self.view.snp.bottom)
         }
 
-        if self.homePanelIsInline {
-            self.view.bringSubviewToFront(self.footer)
-        } else {
-            self.view.sendSubviewToBack(self.footer)
-        }
+        self.view.bringSubviewToFront(self.footer)
 
         alertStackView.snp.remakeConstraints { make in
             make.centerX.equalTo(self.view)
@@ -774,10 +772,11 @@ class BrowserViewController: UIViewController {
         }
     }
 
-    fileprivate func showUserAgentHome(inline: Bool) {
-        homePanelIsInline = inline
+    fileprivate func showHome() {
         if self.homeViewController == nil {
-            let homeViewController = HomeViewNavigationController(profile: profile, toolbarHeight: self.toolbar?.bounds.height ?? 80)
+            let homeViewController = HomeViewNavigationController(
+                profile: profile,
+                toolbarHeight: self.traitCollection.horizontalSizeClass == .compact ? UIConstants.BottomToolbarHeight : 0)
             homeViewController.homePanelDelegate = self
             homeViewController.view.alpha = 0.0
             self.homeViewController = homeViewController
@@ -802,7 +801,7 @@ class BrowserViewController: UIViewController {
         view.setNeedsUpdateConstraints()
     }
 
-    fileprivate func hideUserAgentHome() {
+    fileprivate func hideHome() {
         guard let browserHomeViewController = self.homeViewController else {
             return
         }
@@ -828,16 +827,16 @@ class BrowserViewController: UIViewController {
         let isAboutHomeURL = url.flatMap { InternalURL($0)?.isAboutHomeURL } ?? false
         if !urlBar.inOverlayMode {
             guard let url = url else {
-                hideUserAgentHome()
+                hideHome()
                 return
             }
             if isAboutHomeURL {
-                showUserAgentHome(inline: true)
+                showHome()
             } else if !url.absoluteString.hasPrefix("\(InternalURL.baseUrl)/\(SessionRestoreHandler.path)") {
-                hideUserAgentHome()
+                hideHome()
             }
         } else if isAboutHomeURL {
-            showUserAgentHome(inline: false)
+            showHome()
         }
     }
 
@@ -1509,14 +1508,12 @@ extension BrowserViewController: URLBarDelegate {
         if let toast = clipboardBarDisplayHandler?.clipboardToast {
             toast.removeFromSuperview()
         }
-
-        showUserAgentHome(inline: false)
+        hideHome()
     }
 
     func urlBarDidLeaveOverlayMode(_ urlBar: URLBarView) {
         destroySearchController()
         updateInContentHomePanel(tabManager.selectedTab?.url as URL?)
-        self.homePanelIsInline = self.shouldShowFooterForTraitCollection(self.traitCollection)
         self.updateViewConstraints()
     }
 

Branding/Cliqz/brand.xcassets/logo.imageset/[email protected]

@@ -15,12 +15,13 @@ const getStyles = theme => ({
   circle: {
     padding: 20,
     borderRadius: 60,
-    backgroundColor: '#ffffff30',
+    backgroundColor: '#ffffff50',
   },
   label: {
     marginTop: 5,
     color: theme.separatorColor,
     fontSize: 12,
+    fontWeight: '500',
   },
   pin: {
     position: 'absolute',

Branding/Cliqz/brand.xcassets/logo.imageset/cliqz-white-logo.pdf

@@ -1,11 +1,20 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform, Image } 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: [
+    StyleSheet.absoluteFill,
+    {
+      resizeMode: 'stretch',
+    },
+  ],
+};
+
 const useBackgroundImage = () => {
   const [url, setUrl] = useState();
   useEffect(() => {
@@ -51,6 +60,12 @@ export default ({ height, children }) => {
           priority: FastImage.priority.normal,
         }}
       />
+      <Image
+        style={styles.mask}
+        source={{
+          uri: 'mask',
+        }}
+      />
       {children}
     </View>
   );

Client/Assets/Images.xcassets/mask.imageset/Contents.json

@@ -13,7 +13,6 @@ const styles = StyleSheet.create({
     marginBottom: 0,
     padding: 0,
     flexDirection: 'row',
-    flex: 1,
     width: '100%',
     justifyContent: 'space-evenly',
   },

Client/Assets/Images.xcassets/mask.imageset/mobile-bg-vignette-ipad.png

@@ -13,7 +13,7 @@ const startSearch = () => NativeModules.BrowserActions.startSearch();
 
 const getStyles = theme => ({
   container: {
-    height: 40,
+    height: 47,
     width: '100%',
     paddingHorizontal: 20,
     borderRadius: 40,
@@ -39,8 +39,8 @@ export default () => {
   const styles = useStyles(getStyles);
 
   return (
-    <TouchableWithoutFeedback onPress={startSearch}>
-      <View style={styles.container}>
+    <TouchableWithoutFeedback onPress={startSearch} accessible={false}>
+      <View style={styles.container} testID="urlbar">
         <Text style={styles.text}>{t('UrlBar.Placeholder')}</Text>
         <View style={styles.iconWrapper}>
           <NativeDrawable

Client/Assets/Images.xcassets/mask.imageset/mobile-bg-vignette.png

@@ -18,12 +18,15 @@ import NewsToolbar from './components/NewsToolbar';
 
 const hideKeyboard = () => NativeModules.BrowserActions.hideKeyboard();
 
-const getStyles = () => {
+const getStyles = toolbarHeight => {
   const maxWidth = Math.min(
     Dimensions.get('window').width,
     Dimensions.get('window').height,
   );
 
+  const logoHeight = 47;
+  const newsToolbarHeight = 50;
+
   return StyleSheet.create({
     safeArea: {
       flex: 1,
@@ -43,37 +46,36 @@ const getStyles = () => {
       flexDirection: 'column',
       justifyContent: 'space-evenly',
     },
+    logoWrapper: {
+      paddingTop: newsToolbarHeight + toolbarHeight,
+      justifyContent: 'flex-end',
+      flexGrow: 1,
+    },
+    logo: {
+      height: logoHeight,
+    },
+    urlBarWrapper: {
+      paddingHorizontal: 10,
+      width: '100%',
+      paddingVertical: logoHeight,
+    },
+    speedDialsContainer: {
+      width: '100%',
+      flexGrow: 1,
+    },
     newsToolbarWrapper: {
       width: maxWidth,
       paddingHorizontal: 20,
-      marginBottom: 20,
       alignSelf: 'center',
+      height: newsToolbarHeight,
+      justifyContent: 'center',
     },
     newsWrapper: {
       flex: 1,
       width: maxWidth,
       alignSelf: 'center',
       paddingHorizontal: 20,
     },
-    speedDialsContainer: {
-      marginBottom: 25,
-      width: '100%',
-    },
-    logoWrapper: {
-      marginTop: 40 - 8,
-      marginBottom: 30,
-    },
-    logo: {
-      height: 65,
-    },
-    urlBarWrapper: {
-      paddingHorizontal: 10,
-      marginBottom: 30,
-      width: '100%',
-    },
-    footer: {
-      height: 80,
-    },
   });
 };
 
@@ -89,7 +91,7 @@ export default function Home({
   const [showNewsToolbar, setShowNewsToolbar] = useState(true);
   const scrollViewElement = useRef(null);
   const newsElement = useRef(null);
-  const styles = getStyles();
+  const styles = getStyles(toolbarHeight);
   const [firstRow, secondRow] = useMemo(() => {
     const pinnedDomains = new Set([
       ...pinnedSites.map(s => parse(s.url).domain),
@@ -122,6 +124,7 @@ export default function Home({
       onScroll={hideKeyboard}
       scrollEventThrottle={1}
       contentContainerStyle={styles.contentContainer}
+      scrollEnabled={isNewsEnabled}
     >
       <Background height={height}>
         <View style={styles.wrapper}>
@@ -143,9 +146,11 @@ export default function Home({
           </View>
         </View>
 
-        <View style={styles.newsToolbarWrapper}>
-          {showNewsToolbar && <NewsToolbar scrollToNews={scrollToNews} />}
-        </View>
+        {isNewsEnabled && (
+          <View style={styles.newsToolbarWrapper}>
+            {showNewsToolbar && <NewsToolbar scrollToNews={scrollToNews} />}
+          </View>
+        )}
         <ToolbarArea height={toolbarHeight} />
       </Background>
       {isNewsEnabled && (

Client/Frontend/Browser/BrowserViewController.swift

@@ -170,12 +170,21 @@
                <Test
                   Identifier = "BrowsingPDFTests">
                </Test>
+               <Test
+                  Identifier = "ClipBoardTests/testClipboard()">
+               </Test>
                <Test
                   Identifier = "ClipBoardTests/testClipboardPasteAndGo()">
                </Test>
                <Test
                   Identifier = "CopiedLinksTests">
                </Test>
+               <Test
+                  Identifier = "DataManagementTests/testWebSiteDataEnterFirstTime()">
+               </Test>
+               <Test
+                  Identifier = "DataManagementTests/testWebSiteDataOptions()">
+               </Test>
                <Test
                   Identifier = "DatabaseFixtureTest">
                </Test>

ReactNative/js/components/SpeedDial.jsx

@@ -13,7 +13,7 @@ const passOnboarding = async () => {
   const doneButton$ = element(by.label('PrivacyStatementDone'));
   await waitFor(doneButton$).toBeVisible().withTimeout(2000);
   await doneButton$.tap();
-  await waitFor(element(by.id('url'))).toBeVisible().withTimeout(2000);
+  await waitFor(element(by.id('urlbar'))).toBeVisible().withTimeout(2000);
 }
 
 describe('Search', function () {
@@ -22,10 +22,12 @@ describe('Search', function () {
   });
 
   it('start search', async function () {
-    const urlbar$ = element(by.id('url'));
+    const fakeUrlBar$ = element(by.id('urlbar'));
+    await expect(fakeUrlBar$).toBeVisible();
+    await fakeUrlBar$.tap();
+    const urlbar$ = element(by.id('address'));
     await expect(urlbar$).toBeVisible();
-    await urlbar$.tap();
-    await element(by.id('address')).typeText('www.amazon.de');
+    await urlbar$.typeText('www.amazon.de');
     await waitFor(element(by.text('www.amazon.de')).atIndex(1)).toBeVisible().withTimeout(5000);
   });
 });