ADS: Browser Menu migration (#2682)

Task/Issue URL: https://app.asana.com/0/1174433894299346/1203514942123199 ### Description PR to update the Browser Menu specs Design review in https://app.asana.com/0/1174433894299346/1203600732931519
duckduckgo · Jan 9, 2023 · 0e42d81 · 0e42d81
1 parent a575edc
commit 0e42d81
Show file tree

Hide file tree

Showing 25 changed files with 196 additions and 204 deletions.
diff --git a/app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt b/app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt
@@ -2712,9 +2712,6 @@ class BrowserTabFragment :
                     viewModel.onAutofillMenuSelected()
                 }
             }
-            view.menuScrollableContent.setOnScrollChangeListener { _, _, _, _, _ ->
-                view.dividerShadow.isVisible = view.menuScrollableContent.canScrollVertically(-1)
-            }
             browserMenu.setOnClickListener {
                 viewModel.onBrowserMenuClicked()
                 hideKeyboardImmediately()

diff --git a/app/src/main/res/drawable/ic_key_16.xml b/app/src/main/res/drawable/ic_key_16.xml
diff --git a/app/src/main/res/layout/popup_window_browser_menu.xml b/app/src/main/res/layout/popup_window_browser_menu.xml
@@ -18,25 +18,27 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    xmlns:tools="http://schemas.android.com/tools"
     android:background="@drawable/popup_menu_bg"
     android:orientation="vertical">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/header"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center"
-        android:orientation="horizontal"
-        android:layout_marginTop="@dimen/keyline_2"
         android:layout_marginStart="10dp"
-        android:layout_marginEnd="10dp">
+        android:layout_marginTop="@dimen/keyline_2"
+        android:layout_marginEnd="10dp"
+        android:layout_marginBottom="@dimen/keyline_2"
+        android:gravity="center"
+        android:orientation="horizontal">
 
         <ImageButton
             android:id="@+id/backMenuItem"
             style="@style/Widget.DuckDuckGo.NavigationalIcon"
+            android:layout_marginStart="@dimen/keyline_4"
             android:contentDescription="@string/back"
             android:src="@drawable/ic_arrow_left_24"
-            android:layout_marginStart="@dimen/keyline_4"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -54,34 +56,27 @@
         <ImageButton
             android:id="@+id/refreshMenuItem"
             style="@style/Widget.DuckDuckGo.NavigationalIcon"
+            android:layout_marginEnd="@dimen/keyline_4"
             android:contentDescription="@string/refresh"
             android:src="@drawable/ic_reload_24"
-            android:layout_marginEnd="@dimen/keyline_4"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
     <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
-        android:layout_height="wrap_content"
         android:layout_width="match_parent"
-        app:defaultPadding="false"
-        android:paddingTop="8dp"
-        android:paddingBottom="0dp"/>
-
-    <View
-        android:id="@+id/dividerShadow"
-        android:layout_height="3dp"
-        android:layout_width="match_parent"
-        android:visibility="invisible"
-        android:background="?attr/bottomShadowBackground"/>
+        android:layout_height="wrap_content"
+        app:defaultPadding="false" />
 
     <ScrollView
         android:id="@+id/menuScrollableContent"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:overScrollMode="never">
+        android:clipToPadding="false"
+        android:overScrollMode="never"
+        android:paddingTop="4dp">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -93,130 +88,119 @@
                 android:id="@+id/newTabMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/newTabMenuItem"
-                app:iconDrawable="@drawable/ic_add_16" />
+                app:iconDrawable="@drawable/ic_add_16"
+                app:labelText="@string/newTabMenuItem" />
 
             <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
                 android:id="@+id/siteOptionsMenuDivider"
-                android:layout_height="wrap_content"
+                style="@style/Widget.DuckDuckGo.PopupMenuHorizontalDivider"
                 android:layout_width="match_parent"
-                app:defaultPadding="false"
-                android:layout_marginTop="@dimen/keyline_empty"
-                android:layout_marginBottom="@dimen/keyline_empty"
-                android:layout_marginStart="@dimen/keyline_5"
-                android:layout_marginEnd="@dimen/keyline_5"/>
+                android:layout_height="wrap_content" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/sharePageMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/shareMenuTitle"
-                app:iconDrawable="@drawable/ic_share_16_1" />
+                app:iconDrawable="@drawable/ic_share_android_16"
+                app:labelText="@string/shareMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/addBookmarksMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/addBookmarkMenuTitle"
-                app:iconDrawable="@drawable/ic_bookmark_16" />
+                app:iconDrawable="@drawable/ic_bookmark_16"
+                app:labelText="@string/addBookmarkMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/addFavoriteMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/addFavoriteMenuTitle"
-                app:iconDrawable="@drawable/ic_favorite_16" />
+                app:iconDrawable="@drawable/ic_favorite_16"
+                app:labelText="@string/addFavoriteMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/bookmarksMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/bookmarksMenuTitle"
-                app:iconDrawable="@drawable/ic_library_16" />
+                app:iconDrawable="@drawable/ic_library_16"
+                app:labelText="@string/bookmarksMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
                 android:id="@+id/browserOptionsMenuDivider"
-                android:layout_height="wrap_content"
+                style="@style/Widget.DuckDuckGo.PopupMenuHorizontalDivider"
                 android:layout_width="match_parent"
-                android:paddingTop="3dp"
-                android:paddingBottom="3dp"
-                app:defaultPadding="false"
-                android:layout_marginStart="@dimen/keyline_5"
-                android:layout_marginEnd="@dimen/keyline_5"/>
+                android:layout_height="wrap_content" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/fireproofWebsiteMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/fireproofWebsiteMenuTitleAdd"
-                app:iconDrawable="@drawable/ic_fire_16" />
+                app:iconDrawable="@drawable/ic_fire_16"
+                app:labelText="@string/fireproofWebsiteMenuTitleAdd" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/createAliasMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/newEmailAliasMenuTitle"
-                app:iconDrawable="@drawable/ic_email_16" />
+                app:iconDrawable="@drawable/ic_email_16"
+                app:labelText="@string/newEmailAliasMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/changeBrowserModeMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/requestDesktopSiteMenuTitle"
-                app:iconDrawable="@drawable/ic_device_desktop_16" />
+                app:iconDrawable="@drawable/ic_device_desktop_16"
+                app:labelText="@string/requestDesktopSiteMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/findInPageMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/findInPageMenuTitle"
-                app:iconDrawable="@drawable/ic_find_search_16" />
+                app:iconDrawable="@drawable/ic_find_search_16"
+                app:labelText="@string/findInPageMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
-                    android:id="@+id/printPageMenuItem"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    app:labelText="@string/printMenuTitle"
-                    app:iconDrawable="@drawable/ic_print_16" />
+                android:id="@+id/printPageMenuItem"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:iconDrawable="@drawable/ic_print_16"
+                app:labelText="@string/printMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/openInAppMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:visibility="gone"
-                app:labelText="@string/appLinkMenuItemTitle"
-                app:iconDrawable="@drawable/ic_open_in_16_1" />
+                tools:visibility="visible"
+                app:iconDrawable="@drawable/ic_open_in_app_android_alt_16"
+                app:labelText="@string/appLinkMenuItemTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/addToHomeMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/addToHome"
-                app:iconDrawable="@drawable/ic_add_to_home_16" />
+                app:iconDrawable="@drawable/ic_add_to_home_16"
+                app:labelText="@string/addToHome" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/privacyProtectionMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/enablePrivacyProtection"
-                app:iconDrawable="@drawable/ic_protections_blocked_16" />
+                app:iconDrawable="@drawable/ic_protections_blocked_16"
+                app:labelText="@string/enablePrivacyProtection" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/brokenSiteMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/brokenSiteReportBrokenSiteMenuItem"
-                app:iconDrawable="@drawable/ic_feedback_16" />
+                app:iconDrawable="@drawable/ic_feedback_16"
+                app:labelText="@string/brokenSiteReportBrokenSiteMenuItem" />
 
             <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
                 android:id="@+id/settingsMenuDivider"
-                android:layout_height="wrap_content"
+                style="@style/Widget.DuckDuckGo.PopupMenuHorizontalDivider"
                 android:layout_width="match_parent"
-                android:paddingTop="3dp"
-                android:paddingBottom="3dp"
-                app:defaultPadding="false"
-                android:layout_marginStart="@dimen/keyline_5"
-                android:layout_marginEnd="@dimen/keyline_5"/>
+                android:layout_height="wrap_content" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/autofillMenuItem"
@@ -229,15 +213,15 @@
                 android:id="@+id/downloadsMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/downloadsMenuTitle"
-                app:iconDrawable="@drawable/ic_downloads_16" />
+                app:iconDrawable="@drawable/ic_downloads_16"
+                app:labelText="@string/downloadsMenuTitle" />
 
             <com.duckduckgo.mobile.android.ui.view.MenuItemView
                 android:id="@+id/settingsMenuItem"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                app:labelText="@string/settingsMenuItemTitle"
-                app:iconDrawable="@drawable/ic_settings_16" />
+                app:iconDrawable="@drawable/ic_settings_16"
+                app:labelText="@string/settingsMenuItemTitle" />
 
         </LinearLayout>
 

diff --git a/common-ui/src/main/res/drawable/ic_add_16.xml b/common-ui/src/main/res/drawable/ic_add_16.xml
@@ -5,6 +5,6 @@
     android:viewportHeight="16">
   <path
       android:pathData="M8.25,0.5c0.414,0 0.75,0.336 0.75,0.75V7h5.75c0.414,0 0.75,0.336 0.75,0.75s-0.336,0.75 -0.75,0.75H9v5.75c0,0.414 -0.336,0.75 -0.75,0.75s-0.75,-0.336 -0.75,-0.75V8.5H1.75c-0.414,0 -0.75,-0.336 -0.75,-0.75S1.336,7 1.75,7H7.5V1.25c0,-0.414 0.336,-0.75 0.75,-0.75z"
-      android:fillColor="?attr/primaryIconColor"
+      android:fillColor="?attr/daxColorPrimaryIcon"
       android:fillType="evenOdd"/>
 </vector>
diff --git a/common-ui/src/main/res/drawable/ic_add_to_home_16.xml b/common-ui/src/main/res/drawable/ic_add_to_home_16.xml
@@ -5,8 +5,8 @@
     android:viewportHeight="16">
   <path
       android:pathData="M5.25,0C3.455,0 2,1.455 2,3.25v1c0,0.414 0.336,0.75 0.75,0.75s0.75,-0.336 0.75,-0.75v-1C3.5,2.56 4.06,2 4.75,2h6.5c0.69,0 1.25,0.56 1.25,1.25v9.5c0,0.69 -0.56,1.25 -1.25,1.25h-6.5c-0.69,0 -1.25,-0.56 -1.25,-1.25v-1c0,-0.414 -0.336,-0.75 -0.75,-0.75s-0.75,0.336 -0.75,0.75v1C2,14.545 3.455,16 5.25,16h5.5c1.795,0 3.25,-1.455 3.25,-3.25v-9.5C14,1.455 12.545,0 10.75,0h-5.5z"
-      android:fillColor="?attr/primaryIconColor"/>
+      android:fillColor="?attr/daxColorPrimaryIcon"/>
   <path
       android:pathData="M11.03,9.22c0.293,0.293 0.293,0.767 0,1.06l-2.475,2.475c-0.293,0.293 -0.767,0.293 -1.06,0L5.02,10.28c-0.293,-0.293 -0.293,-0.767 0,-1.06 0.293,-0.293 0.768,-0.293 1.06,0l1.17,1.17V9.25c0,-0.966 -0.784,-1.75 -1.75,-1.75h-4c-0.414,0 -0.75,-0.336 -0.75,-0.75S1.086,6 1.5,6h4c1.795,0 3.25,1.455 3.25,3.25v1.19l1.22,-1.22c0.292,-0.293 0.767,-0.293 1.06,0z"
-      android:fillColor="?attr/primaryIconColor"/>
+      android:fillColor="?attr/daxColorPrimaryIcon"/>
 </vector>
diff --git a/common-ui/src/main/res/drawable/ic_bookmark_16.xml b/common-ui/src/main/res/drawable/ic_bookmark_16.xml
@@ -1,26 +1,10 @@
-<!--
-  ~ Copyright (c) 2022 DuckDuckGo
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="16dp"
     android:height="16dp"
     android:viewportWidth="16"
     android:viewportHeight="16">
   <path
       android:pathData="M3,2.25C3,1.007 4.007,0 5.25,0h5.5C11.993,0 13,1.007 13,2.25v12.126c0,0.967 -1.05,1.567 -1.884,1.077L8,13.62l-3.116,1.833C4.05,15.943 3,15.343 3,14.376L3,2.25zM5.25,1.5c-0.414,0 -0.75,0.336 -0.75,0.75v11.689l2.866,-1.686c0.391,-0.23 0.877,-0.23 1.268,0l2.866,1.686L11.5,2.25c0,-0.414 -0.336,-0.75 -0.75,-0.75h-5.5z"
-      android:fillColor="?attr/primaryIconColor"
+      android:fillColor="?attr/daxColorPrimaryIcon"
       android:fillType="evenOdd"/>
 </vector>
diff --git a/common-ui/src/main/res/drawable/ic_device_desktop_16.xml b/common-ui/src/main/res/drawable/ic_device_desktop_16.xml
@@ -4,6 +4,7 @@
     android:viewportWidth="16"
     android:viewportHeight="16">
   <path
-      android:pathData="M13.5,0.75H2.5C2.0367,0.7526 1.5931,0.9378 1.2655,1.2655C0.9378,1.5931 0.7526,2.0367 0.75,2.5V10.5C0.7526,10.9633 0.9378,11.4069 1.2655,11.7345C1.5931,12.0622 2.0367,12.2474 2.5,12.25H6.75V13.75H4.5C4.3011,13.75 4.1103,13.829 3.9697,13.9697C3.829,14.1103 3.75,14.3011 3.75,14.5C3.75,14.6989 3.829,14.8897 3.9697,15.0303C4.1103,15.171 4.3011,15.25 4.5,15.25H11.5C11.6989,15.25 11.8897,15.171 12.0303,15.0303C12.171,14.8897 12.25,14.6989 12.25,14.5C12.25,14.3011 12.171,14.1103 12.0303,13.9697C11.8897,13.829 11.6989,13.75 11.5,13.75H9.25V12.25H13.5C13.9633,12.2474 14.4069,12.0622 14.7345,11.7345C15.0622,11.4069 15.2474,10.9633 15.25,10.5V2.5C15.2474,2.0367 15.0622,1.5931 14.7345,1.2655C14.4069,0.9378 13.9633,0.7526 13.5,0.75ZM2.5,2.25H13.5C13.5663,2.25 13.6299,2.2763 13.6768,2.3232C13.7237,2.3701 13.75,2.4337 13.75,2.5V9.75H2.25V2.5C2.25,2.4337 2.2763,2.3701 2.3232,2.3232C2.3701,2.2763 2.4337,2.25 2.5,2.25Z"
-      android:fillColor="?attr/primaryIconColor"/>
+      android:pathData="M2,1C0.895,1 0,1.895 0,3v7c0,1.105 0.895,2 2,2h5v1.5L4.75,13.5c-0.414,0 -0.75,0.336 -0.75,0.75s0.336,0.75 0.75,0.75h6.5c0.414,0 0.75,-0.336 0.75,-0.75s-0.336,-0.75 -0.75,-0.75L9,13.5L9,12h5c1.105,0 2,-0.895 2,-2L16,3c0,-1.105 -0.895,-2 -2,-2L2,1zM1.5,3c0,-0.276 0.224,-0.5 0.5,-0.5h12c0.276,0 0.5,0.224 0.5,0.5v6c0,0.276 -0.224,0.5 -0.5,0.5L2,9.5c-0.276,0 -0.5,-0.224 -0.5,-0.5L1.5,3z"
+      android:fillColor="?attr/daxColorPrimaryIcon"
+      android:fillType="evenOdd"/>
 </vector>