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.

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"

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"

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"

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>
 

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>