From b061a45aac282a5ffbb6bde2ae80ed150a3e092a 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.

Increase the height of the navigation bar to ensure that the move
bar is visible.
---
 .../res/layout/deprecated_version_dialog.xml  |  2 +-
 app/src/main/res/layout/library.xml           |  4 +-
 .../res/layout/navigation_bar_navigation.xml  | 40 +++++++++++--------
 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             |  9 ++++-
 app/src/main/res/values/styles.xml            | 10 ++++-
 9 files changed, 47 insertions(+), 36 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..79497e28b63 100644
--- a/app/src/main/res/layout/navigation_bar_navigation.xml
+++ b/app/src/main/res/layout/navigation_bar_navigation.xml
@@ -16,6 +16,7 @@
         android:id="@+id/navigationBarContainer"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:minHeight="@dimen/navigation_bar_height"
         android:orientation="vertical"
         android:padding="0dp">
 
@@ -23,7 +24,7 @@
     <LinearLayout
         style="?attr/navigationBarStyle"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:padding="0dp">
 
@@ -40,7 +41,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 +50,33 @@
 
         <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:padding="@{viewmodel.isLoading ? @dimen/nav_button_padding : @dimen/nav_button_progress_padding}"
                 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:indeterminateTint="@drawable/main_button_icon_color"
+                android:layout_margin="4dp"
                 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 +86,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 +97,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 +115,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 +124,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 +140,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 +152,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..5118bcbb34a 100644
--- a/app/src/main/res/values/dimen.xml
+++ b/app/src/main/res/values/dimen.xml
@@ -15,8 +15,8 @@
     <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_height">74dp</dimen>
+    <dimen name="navigation_bar_width">800dp</dimen>
+    <dimen name="navigation_bar_height">96dp</dimen>
     <dimen name="url_bar_item_width">28dp</dimen>
     <dimen name="url_bar_first_item_width">36dp</dimen>
     <dimen name="url_bar_last_item_width">36dp</dimen>
@@ -191,6 +191,11 @@
     <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_progress_padding">9dp</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>