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.

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"

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"

app/src/main/res/layout/navigation_bar_navigation.xml

@@ -16,14 +16,15 @@
         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">
 
     <!-- Navigation bar -->
     <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"

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"

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"

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"

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}"

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>
 

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>