From 7b9308dd6a07bc8d1d5457696d82002ac68779c4 Mon Sep 17 00:00:00 2001
From: Felipe Erias <felipeerias@igalia.com>
Date: Wed, 18 Dec 2024 22:15:56 +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.

Ensure that other unrelated parts of the UI are not affected.
---
 .../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/values/dimen.xml             |  6 ++-
 app/src/main/res/values/styles.xml            |  6 +--
 5 files changed, 34 insertions(+), 21 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..b66bfc4426d 100644
--- a/app/src/main/res/layout/deprecated_version_dialog.xml
+++ b/app/src/main/res/layout/deprecated_version_dialog.xml
@@ -32,6 +32,8 @@
         <com.igalia.wolvic.ui.views.UIButton
             android:id="@+id/dismissButton"
             style="?attr/navigationBarButtonStyle"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
             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..8b4a2d23940 100644
--- a/app/src/main/res/layout/library.xml
+++ b/app/src/main/res/layout/library.xml
@@ -79,6 +79,8 @@
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/backButton"
                         style="?attr/navigationBarButtonStyle"
+                        android:layout_width="40dp"
+                        android:layout_height="40dp"
                         android:layout_alignParentStart="true"
                         android:layout_centerVertical="true"
                         android:src="@drawable/ic_icon_back"
@@ -113,6 +115,8 @@
                     <com.igalia.wolvic.ui.views.UIButton
                         android:id="@+id/closeButton"
                         style="?attr/navigationBarButtonStyle"
+                        android:layout_width="40dp"
+                        android:layout_height="40dp"
                         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/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..e1e72a77f71 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -50,10 +50,10 @@
     </style>
 
     <style name="uiButtonTheme">
-        <item name="android:padding">@dimen/tray_icon_padding_max</item>
+        <item name="android:padding">@dimen/nav_button_padding</item>
         <item name="android:layout_gravity">center_vertical</item>
-        <item name="android:layout_width">40dp</item>
-        <item name="android:layout_height">40dp</item>
+        <item name="android:layout_width">@dimen/nav_button_size</item>
+        <item name="android:layout_height">@dimen/nav_button_size</item>
         <item name="android:scaleType">fitCenter</item>
         <item name="tintColorList">@drawable/main_button_icon_color</item>
         <item name="privateModeTintColorList">@drawable/main_button_icon_color_private</item>