From e5b05c82302ba76df60e12ba75e1d0577f4e12b4 Mon Sep 17 00:00:00 2001
From: Felipe Erias <felipeerias@igalia.com>
Date: Wed, 18 Dec 2024 22:34:34 +0900
Subject: [PATCH] Size and spacing of navigation bar elements

Set the default size in dp (800dp, previously 720dp) of the
navigation bar to be consistent with its default size in world
dimensions (4.0).

This makes the navigation elements slightly smaller, which we
compensate by increasing their size to 44dp.

Reduce the margin between elements.

Split the styles for the navigation bar from the ones used in other
elements in the UI, for example in the close button in dialogs.
---
 .../res/layout/deprecated_version_dialog.xml  |  2 +-
 app/src/main/res/layout/library.xml           |  4 +-
 .../res/layout/navigation_bar_navigation.xml  | 37 ++++++++++---------
 app/src/main/res/layout/options_header.xml    |  8 +---
 app/src/main/res/layout/prompt_dialog.xml     |  4 +-
 app/src/main/res/layout/tabs.xml              |  4 +-
 app/src/main/res/layout/title_bar.xml         |  2 +-
 app/src/main/res/values/dimen.xml             |  6 ++-
 app/src/main/res/values/styles.xml            | 10 ++++-
 9 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/app/src/main/res/layout/deprecated_version_dialog.xml b/app/src/main/res/layout/deprecated_version_dialog.xml
index 8b2c6c4d190..ed1d2b6efb7 100644
--- a/app/src/main/res/layout/deprecated_version_dialog.xml
+++ b/app/src/main/res/layout/deprecated_version_dialog.xml
@@ -31,7 +31,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/dismissButton"
-            style="?attr/navigationBarButtonStyle"
+            style="?attr/headerBarButtonStyle"
             android:layout_alignParentTop="true"
             android:layout_alignParentEnd="true"
             android:src="@drawable/ic_icon_exit"
diff --git a/app/src/main/res/layout/library.xml b/app/src/main/res/layout/library.xml
index 1d4eb932344..a99a9564e42 100644
--- a/app/src/main/res/layout/library.xml
+++ b/app/src/main/res/layout/library.xml
@@ -78,7 +78,7 @@
 
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/backButton"
-                        style="?attr/navigationBarButtonStyle"
+                        style="?attr/headerBarButtonStyle"
                         android:layout_alignParentStart="true"
                         android:layout_centerVertical="true"
                         android:src="@drawable/ic_icon_back"
@@ -112,7 +112,7 @@
 
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/closeButton"
-                        style="?attr/navigationBarButtonStyle"
+                        style="?attr/headerBarButtonStyle"
                         android:layout_centerVertical="true"
                         android:layout_alignParentEnd="true"
                         android:src="@drawable/ic_icon_exit"
diff --git a/app/src/main/res/layout/navigation_bar_navigation.xml b/app/src/main/res/layout/navigation_bar_navigation.xml
index ae12d97b38d..d33005696e3 100644
--- a/app/src/main/res/layout/navigation_bar_navigation.xml
+++ b/app/src/main/res/layout/navigation_bar_navigation.xml
@@ -14,7 +14,7 @@
 
     <LinearLayout
         android:id="@+id/navigationBarContainer"
-        android:layout_width="match_parent"
+        android:layout_width="800dp"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:padding="0dp">
@@ -40,7 +40,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/forwardButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_forward"
             android:tooltipText="@string/forward_tooltip"
@@ -49,28 +49,31 @@
 
         <RelativeLayout
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:padding="0dp" >
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/reloadButton"
                 style="?attr/navigationBarButtonStyle"
+                android:layout_centerInParent="true"
                 android:src="@{viewmodel.isLoading ? @drawable/ic_icon_exit : @drawable/ic_icon_reload}"
                 android:tooltipText="@{viewmodel.isLoading ? @string/stop_tooltip : @string/refresh_tooltip}"
                 app:privateMode="@{viewmodel.isPrivateSession}" />
 
             <ProgressBar
                 android:id="@+id/progressBar"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:layout_centerInParent="true"
+                android:layout_margin="8dp"
                 android:visibility="@{viewmodel.isLoading ? View.VISIBLE : View.GONE}" />
         </RelativeLayout>
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/homeButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_home"
             android:tooltipText="@string/home_tooltip"
@@ -80,9 +83,9 @@
         <com.igalia.wolvic.ui.views.NavigationURLBar
             android:id="@+id/urlBar"
             android:layout_width="wrap_content"
-            android:layout_height="40dp"
+            android:layout_height="@dimen/nav_button_size"
             android:layout_gravity="center_vertical"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="100"
             android:orientation="horizontal"
             app:visibleGone="@{!viewmodel.isKioskMode || viewmodel.isFindInPage}" />
@@ -91,14 +94,14 @@
             android:id="@+id/urlBarPlaceholder"
             android:layout_width="wrap_content"
             android:layout_height="0dp"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="100"
             app:visibleGone="@{viewmodel.isKioskMode &amp;&amp; !viewmodel.isFindInPage}" />
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/userFeedbackButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:checked="true"
             android:src="@drawable/baseline_contact_support_24"
@@ -109,7 +112,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/desktopModeButton"
             style="?attr/accentedNavigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:checked="true"
             android:src="@drawable/ic_icon_ua_desktop"
@@ -118,10 +121,10 @@
             app:visibleGone="@{viewmodel.isDesktopMode &amp;&amp; !viewmodel.isKioskMode}" />
 
         <RelativeLayout
-            android:layout_width="40dp"
-            android:layout_height="40dp"
+            android:layout_width="@dimen/nav_button_size"
+            android:layout_height="@dimen/nav_button_size"
             android:layout_weight="0"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:scaleType="fitCenter"
             android:layout_gravity="center_vertical"
             app:visibleGone="@{settingsmodel.isWhatsNewVisible &amp;&amp; viewmodel.width > 640 &amp;&amp; !viewmodel.isKioskMode}">
@@ -134,8 +137,8 @@
                 app:privateMode="@{viewmodel.isPrivateSession}" />
 
             <com.google.android.material.textview.MaterialTextView
-                android:layout_width="6dp"
-                android:layout_height="6dp"
+                android:layout_width="8dp"
+                android:layout_height="8dp"
                 android:layout_marginTop="12dp"
                 android:layout_marginRight="10dp"
                 android:layout_alignParentTop="true"
@@ -146,7 +149,7 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/menuButton"
             style="?attr/navigationBarButtonStyle"
-            android:layout_marginStart="10dp"
+            android:layout_marginStart="@dimen/nav_button_margin"
             android:layout_weight="0"
             android:src="@drawable/ic_icon_hamburger_menu"
             android:tooltipText="@string/hamburger_menu_tooltip"
diff --git a/app/src/main/res/layout/options_header.xml b/app/src/main/res/layout/options_header.xml
index d682bd37d96..70b8a1c3179 100644
--- a/app/src/main/res/layout/options_header.xml
+++ b/app/src/main/res/layout/options_header.xml
@@ -39,9 +39,7 @@
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/backButton"
-                style="?attr/navigationBarButtonStyle"
-                android:layout_width="40dp"
-                android:layout_height="40dp"
+                style="?attr/headerBarButtonStyle"
                 android:layout_alignParentStart="true"
                 android:onClick="@{(view) ->  backClickListener.onClick(view)}"
                 android:src="@drawable/ic_icon_back"
@@ -76,9 +74,7 @@
 
             <com.igalia.wolvic.ui.views.UIButton
                 android:id="@+id/helpButton"
-                style="?attr/navigationBarButtonStyle"
-                android:layout_width="40dp"
-                android:layout_height="40dp"
+                style="?attr/headerBarButtonStyle"
                 android:layout_alignParentEnd="true"
                 android:onClick="@{(view) ->  helpClickListener.onClick(view)}"
                 android:src="@drawable/ic_icon_settings_help"
diff --git a/app/src/main/res/layout/prompt_dialog.xml b/app/src/main/res/layout/prompt_dialog.xml
index 431abb79f21..a1bbc0fd127 100644
--- a/app/src/main/res/layout/prompt_dialog.xml
+++ b/app/src/main/res/layout/prompt_dialog.xml
@@ -14,10 +14,8 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/backButton"
-            style="?attr/navigationBarButtonStyle"
-            android:layout_width="40dp"
+            style="?attr/headerBarButtonStyle"
             android:layout_marginStart="-34dp"
-            android:layout_height="40dp"
             android:layout_alignParentStart="true"
             android:src="@drawable/ic_icon_back"
             android:tint="@color/midnight"
diff --git a/app/src/main/res/layout/tabs.xml b/app/src/main/res/layout/tabs.xml
index 0d78456204a..2e399346948 100644
--- a/app/src/main/res/layout/tabs.xml
+++ b/app/src/main/res/layout/tabs.xml
@@ -16,9 +16,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/tabsBackButton"
-            style="?attr/navigationBarButtonStyle"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
+            style="?attr/headerBarButtonStyle"
             android:padding="8dp"
             app:tintColorList="@drawable/main_button_icon_color_active"
             android:tint="@color/midnight"
diff --git a/app/src/main/res/layout/title_bar.xml b/app/src/main/res/layout/title_bar.xml
index 81e5232d9ed..fe71f5349af 100644
--- a/app/src/main/res/layout/title_bar.xml
+++ b/app/src/main/res/layout/title_bar.xml
@@ -78,7 +78,7 @@
 
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/mediaButton"
-            style="?attr/navigationBarButtonStyle"
+            style="?attr/headerBarButtonStyle"
             android:src="@{viewmodel.isMediaPlaying ? @drawable/ic_icon_media_pause : @drawable/ic_icon_media_play}"
             android:onClick="@{(view) -> viewmodel.isMediaPlaying ? delegate.onMediaPauseClicked(widget) : delegate.onMediaPlayClicked(widget)}"
             android:tooltipText="@{viewmodel.isMediaPlaying ? @string/media_pause_tooltip : @string/media_resume_tooltip}"
diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
index 2ec690d2592..5963f885baf 100644
--- a/app/src/main/res/values/dimen.xml
+++ b/app/src/main/res/values/dimen.xml
@@ -15,7 +15,7 @@
     <item name="window_world_z_max" format="float" type="dimen">-5.2</item>
 
     <!-- Navigation bar -->
-    <dimen name="navigation_bar_width">720dp</dimen>
+    <dimen name="navigation_bar_width">800dp</dimen>
     <dimen name="navigation_bar_height">74dp</dimen>
     <dimen name="url_bar_item_width">28dp</dimen>
     <dimen name="url_bar_first_item_width">36dp</dimen>
@@ -191,6 +191,10 @@
     <item name="url_bar_popup_world_y" format="float" type="dimen">0.15</item>
     <item name="url_bar_popup_world_z" format="float" type="dimen">0.1</item>
 
+    <dimen name="nav_button_size">44dp</dimen>
+    <dimen name="nav_button_padding">12dp</dimen>
+    <dimen name="nav_button_margin">8dp</dimen>
+
     <dimen name="tray_icon_padding_max">10dp</dimen>
     <dimen name="tray_icon_padding_min">8dp</dimen>
 
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 78160152d5d..eb91172ecc2 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -6,6 +6,7 @@
         <attr name="uiButtonStyle" format="reference" />
         <attr name="navigationBarButtonStyle" format="reference" />
         <attr name="accentedNavigationBarButtonStyle" format="reference" />
+        <attr name="headerBarButtonStyle" format="reference" />
         <attr name="fullScreenButtonStyle" format="reference" />
         <attr name="fullScreenFirstButtonStyle" format="reference" />
         <attr name="fullScreenLastButtonStyle" format="reference" />
@@ -63,11 +64,17 @@
         <item name="clipColor">@color/azure</item>
     </style>
 
-    <style name="navigationBarButtonTheme" parent="uiButtonTheme">
+    <style name="headerBarButtonTheme" parent="uiButtonTheme">
         <item name="android:background">@drawable/main_button</item>
         <item name="privateModeBackground">@drawable/main_button_private</item>
     </style>
 
+    <style name="navigationBarButtonTheme" parent="headerBarButtonTheme">
+        <item name="android:layout_width">@dimen/nav_button_size</item>
+        <item name="android:layout_height">@dimen/nav_button_size</item>
+        <item name="android:padding">@dimen/nav_button_padding</item>
+    </style>
+
     <style name="accentedNavigationBarButtonTheme" parent="navigationBarButtonTheme">
         <item name="android:background">@drawable/main_button_accented</item>
     </style>
@@ -468,6 +475,7 @@
         <item name="navigationBarStyle">@style/navigationBarTheme</item>
         <item name="navigationBarButtonStyle">@style/navigationBarButtonTheme</item>
         <item name="accentedNavigationBarButtonStyle">@style/accentedNavigationBarButtonTheme</item>
+        <item name="headerBarButtonStyle">@style/headerBarButtonTheme</item>
         <item name="fullScreenButtonStyle">@style/fullScreenButtonTheme</item>
         <item name="fullScreenFirstButtonStyle">@style/fullScreenFirstButtonTheme</item>
         <item name="fullScreenLastButtonStyle">@style/fullScreenLastButtonTheme</item>