Hide page and browser actions when window is small (#171)

- At a width of less than 500 the browser window is considered small
and the left-hand page action buttons as well as the right-hand
window actions are hidden and added to the respective menus.
- Downloads show relative to the app menu if there's no visible button.
- The shrink constraint is moved from the navigationbar to the tab itself.
- Urlbar margins are moved to CSS.
- Effective minimum width becomes 269px with Adwaita w/o title buttons.

To make this work the relevant actions need to be enabled and
disabled when they're available and unavailable respectively.

![screenshot from 2018-11-19 08-34-09](https://user-images.githubusercontent.com/1204189/48690203-3cc6f280-ebd6-11e8-8b0d-148ee912dc64.png)
![screenshot from 2018-11-19 08-36-05](https://user-images.githubusercontent.com/1204189/48690202-3c2e5c00-ebd6-11e8-8813-22a8a6429515.png)

9 files changed, 228 insertions, 100 deletions

diff --git a/README.md b/README.md
index dd9c258e..54f622e8 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,7 @@ You'll want to **unit test** the code if you're testing a new version or contrib
 * Download button lists on-going and finished downloads
 * `javascript:alert("test")`, `javascript:confirm("test")` and `javascript:input("test")` work
 * Websites can (un)toggle fullscreen mode
+* Shrinking the window moves browser and page actions into the respective menus
 
 # Release process
 
diff --git a/core/browser.vala b/core/browser.vala
index 77a48763..f65a2ebd 100644
--- a/core/browser.vala
+++ b/core/browser.vala
@@ -19,28 +19,21 @@ namespace Midori {
     [GtkTemplate (ui = "/ui/browser.ui")]
     public class Browser : Gtk.ApplicationWindow {
         public WebKit.WebContext web_context { get; construct set; }
-        public bool is_loading { get { return tab != null && tab.is_loading; } }
+        public bool is_loading { get; protected set; default = false; }
         public string? uri { get; protected set; }
         public Tab? tab { get; protected set; }
         public ListStore trash { get; protected set; }
         public bool is_fullscreen { get; protected set; default = false; }
         public bool is_locked { get; construct set; default = false; }
+        internal bool is_small { get; protected set; default = false; }
 
         const ActionEntry[] actions = {
-            { "tab-new", tab_new_activated },
             { "tab-close", tab_close_activated },
             { "close", close_activated },
             { "tab-reopen", tab_reopen_activated },
             { "goto", goto_activated },
-            { "go-back", go_back_activated },
-            { "go-forward", go_forward_activated },
-            { "tab-reload", tab_reload_activated },
-            { "tab-stop-loading", tab_stop_loading_activated },
-            { "homepage", homepage_activated },
             { "tab-previous", tab_previous_activated },
             { "tab-next", tab_next_activated },
-            { "fullscreen", fullscreen_activated },
-            { "show-downloads", show_downloads_activated },
             { "find", find_activated },
             { "view-source", view_source_activated },
             { "print", print_activated },
@@ -55,10 +48,12 @@ namespace Midori {
         [GtkChild]
         Gtk.Stack panel;
         [GtkChild]
-        Gtk.ToggleButton panel_toggle;
-        [GtkChild]
         Gtk.HeaderBar tabbar;
         [GtkChild]
+        Gtk.Box actionbox;
+        [GtkChild]
+        Gtk.ToggleButton panel_toggle;
+        [GtkChild]
         DownloadButton downloads;
         [GtkChild]
         Gtk.Button tab_new;
@@ -141,6 +136,18 @@ namespace Midori {
 
                 app_menu.menu_model = application.get_menu_by_id ("app-menu");
                 navigationbar.menubutton.menu_model = application.get_menu_by_id ("page-menu");
+                notify["is-small"].connect (() => {
+                    if (is_small) {
+                        ((Menu)app_menu.menu_model).insert_section (0, null, application.get_menu_by_id ("app-menu-small"));
+                        ((Menu)navigationbar.menubutton.menu_model).insert_section (0, null, application.get_menu_by_id ("page-menu-small"));
+                        // Anchor downloads popover to app menu if the button is hidden
+                        downloads.popover.relative_to = app_menu;
+                    } else {
+                        ((Menu)app_menu.menu_model).remove (0);
+                        ((Menu)navigationbar.menubutton.menu_model).remove (0);
+                        downloads.popover.relative_to = downloads;
+                    }
+                });
 
                 application.bind_busy_property (this, "is-loading");
 
@@ -159,14 +166,69 @@ namespace Midori {
             action = new SimpleAction ("tab-zoom", VariantType.DOUBLE);
             action.activate.connect (tab_zoom_activated);
             add_action (action);
+            // Browser actions
+            action = new SimpleAction ("tab-new", null);
+            action.activate.connect (tab_new_activated);
+            add_action (action);
+            action.set_enabled (!is_locked);
+            var show_downloads = new SimpleAction ("show-downloads", null);
+            show_downloads.activate.connect (show_downloads_activated);
+            add_action (show_downloads);
+            show_downloads.set_enabled (false);
+            downloads.notify["visible"].connect (() => {
+                show_downloads.set_enabled (downloads.visible);
+            });
+            var fullscreen = new SimpleAction ("fullscreen", null);
+            fullscreen.activate.connect (fullscreen_activated);
+            add_action (fullscreen);
+            navigationbar.notify["visible"].connect (() => {
+                fullscreen.set_enabled (navigationbar.visible);
+            });
             // Action for panel toggling
             action = new SimpleAction.stateful ("panel", null, false);
+            action.set_enabled (false);
             action.change_state.connect (panel_activated);
             add_action (action);
+            // Reveal panel toggle after panels are added
+            panel.add.connect ((widget) => {
+                panel_toggle.show ();
+                action.set_enabled (true);
+            });
+            // Page actions
+            var go_back = new SimpleAction ("go-back", null);
+            go_back.activate.connect (go_back_activated);
+            add_action (go_back);
+            var go_forward = new SimpleAction ("go-forward", null);
+            go_back.activate.connect (go_forward_activated);
+            add_action (go_forward);
+            notify["uri"].connect (() => {
+                go_back.set_enabled (tab.can_go_back);
+                go_forward.set_enabled (tab.can_go_forward);
+            });
+            var reload = new SimpleAction ("tab-reload", null);
+            reload.activate.connect (tab_reload_activated);
+            add_action (reload);
+            var stop = new SimpleAction ("tab-stop-loading", null);
+            stop.activate.connect (tab_stop_loading_activated);
+            add_action (stop);
+            notify["is-loading"].connect (() => {
+                reload.set_enabled (!is_loading);
+                stop.set_enabled (is_loading);
+            });
+            action = new SimpleAction ("homepage", null);
+            action.activate.connect (homepage_activated);
+            add_action (action);
+            var settings = CoreSettings.get_default ();
+            action.set_enabled (settings.homepage_in_toolbar);
+            settings.notify["homepage-in-toolbar"].connect (() => {
+                action.set_enabled (settings.homepage_in_toolbar);
+            });
 
             trash = new ListStore (typeof (DatabaseItem));
 
             bind_property ("is-locked", tab_new, "visible", BindingFlags.INVERT_BOOLEAN);
+            bind_property ("is-small", actionbox, "visible", BindingFlags.SYNC_CREATE | BindingFlags.INVERT_BOOLEAN);
+            bind_property ("is-small", navigationbar.actionbox, "visible", BindingFlags.SYNC_CREATE | BindingFlags.INVERT_BOOLEAN);
             navigationbar.urlbar.notify["uri"].connect ((pspec) => {
                 string uri = navigationbar.urlbar.uri;
                 if (uri.has_prefix ("javascript:")) {
@@ -183,10 +245,6 @@ namespace Midori {
                 }
                 tab = (Tab)tabs.visible_child;
                 if (tab != null) {
-                    navigationbar.go_back.sensitive = tab.can_go_back;
-                    navigationbar.go_forward.sensitive = tab.can_go_forward;
-                    navigationbar.reload.visible = !tab.is_loading;
-                    navigationbar.stop_loading.visible = tab.is_loading;
                     navigationbar.urlbar.progress_fraction = tab.progress;
                     uri = tab.display_uri;
                     title = tab.display_title;
@@ -195,10 +253,9 @@ namespace Midori {
                     navigationbar.urlbar.uri = tab.display_uri;
                     toggle_fullscreen.visible = !tab.pinned;
                     navigationbar.visible = !tab.pinned;
-                    bindings.append (tab.bind_property ("can-go-back", navigationbar.go_back, "sensitive"));
-                    bindings.append (tab.bind_property ("can-go-forward", navigationbar.go_forward, "sensitive"));
-                    bindings.append (tab.bind_property ("is-loading", navigationbar.reload, "visible", BindingFlags.INVERT_BOOLEAN));
-                    bindings.append (tab.bind_property ("is-loading", navigationbar.stop_loading, "visible"));
+                    bindings.append (tab.bind_property ("is-loading", navigationbar.reload, "visible", BindingFlags.SYNC_CREATE | BindingFlags.INVERT_BOOLEAN));
+                    bindings.append (tab.bind_property ("is-loading", navigationbar.stop_loading, "visible", BindingFlags.SYNC_CREATE));
+                    bindings.append (tab.bind_property ("is-loading", this, "is-loading", BindingFlags.SYNC_CREATE));
                     bindings.append (tab.bind_property ("progress", navigationbar.urlbar, "progress-fraction"));
                     bindings.append (tab.bind_property ("display-title", this, "title"));
                     bindings.append (tab.bind_property ("display-uri", this, "uri"));
@@ -263,9 +320,6 @@ namespace Midori {
             if (web_context.is_ephemeral ()) {
                 get_style_context ().add_class ("incognito");
             }
-
-            // Reveal panel toggle after panels are added
-            panel.add.connect ((widget) => { panel_toggle.show (); });
         }
 
         void update_decoration_layout () {
@@ -279,6 +333,16 @@ namespace Midori {
             }
         }
 
+        public override bool configure_event (Gdk.EventConfigure event) {
+            bool result = base.configure_event (event);
+
+            int width;
+            get_size (out width, null);
+            is_small = width < 500;
+
+            return result;
+        }
+
         /*
          * Add a button to be displayed in a toolbar.
          */
diff --git a/core/navigationbar.vala b/core/navigationbar.vala
index cdead6d1..acdace1b 100644
--- a/core/navigationbar.vala
+++ b/core/navigationbar.vala
@@ -13,6 +13,8 @@ namespace Midori {
     [GtkTemplate (ui = "/ui/navigationbar.ui")]
     public class Navigationbar : Gtk.ActionBar {
         [GtkChild]
+        public Gtk.Box actionbox;
+        [GtkChild]
         public Gtk.Button go_back;
         [GtkChild]
         public Gtk.Button go_forward;
diff --git a/data/gtk3.css b/data/gtk3.css
index 4609324f..331aef4f 100644
--- a/data/gtk3.css
+++ b/data/gtk3.css
@@ -96,6 +96,9 @@ statusbar button {
   padding: 0 4px;
 }
 
+.urlbar {
+  margin: 0 4px;
+}
 /* Emphasize security indicator */
 .urlbar image.left {
   color: @theme_selected_bg_color;
diff --git a/ui/browser.ui b/ui/browser.ui
index 338c27a4..6567841b 100644
--- a/ui/browser.ui
+++ b/ui/browser.ui
@@ -58,24 +58,6 @@
               </object>
             </child>
             <child>
-              <object class="GtkButton" id="toggle_fullscreen">
-                <property name="focus-on-click">no</property>
-                <property name="valign">center</property>
-                <property name="action-name">win.fullscreen</property>
-                <property name="tooltip-text" translatable="yes">Toggle fullscreen view</property>
-                <property name="visible">yes</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="icon-name">view-fullscreen-symbolic</property>
-                    <property name="visible">yes</property>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="pack-type">end</property>
-              </packing>
-            </child>
-            <child>
               <object class="GtkMenuButton" id="app_menu">
                 <property name="focus-on-click">no</property>
                 <property name="valign">center</property>
@@ -87,41 +69,59 @@
               </packing>
             </child>
             <child>
-              <object class="MidoriDownloadButton" id="downloads">
-                <property name="valign">center</property>
-              </object>
-              <packing>
-                <property name="pack-type">end</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkToggleButton" id="panel_toggle">
-                <property name="focus-on-click">no</property>
-                <property name="valign">center</property>
-                <property name="action-name">win.panel</property>
-                <property name="tooltip-text" translatable="yes">Sidepanel</property>
+              <object class="GtkBox" id="actionbox">
+                <property name="orientation">horizontal</property>
+                <property name="visible">yes</property>
+                <style>
+                  <class name="linked"/>
+                </style>
                 <child>
-                  <object class="GtkImage">
-                    <property name="icon-name">view-grid-symbolic</property>
+                  <object class="GtkButton" id="tab_new">
+                    <property name="focus-on-click">no</property>
+                    <property name="valign">center</property>
+                    <property name="action-name">win.tab-new</property>
+                    <property name="tooltip-text" translatable="yes">Open a new tab</property>
                     <property name="visible">yes</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="icon-name">tab-new-symbolic</property>
+                        <property name="visible">yes</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
-              </object>
-              <packing>
-                <property name="pack-type">start</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="tab_new">
-                <property name="focus-on-click">no</property>
-                <property name="valign">center</property>
-                <property name="action-name">win.tab-new</property>
-                <property name="tooltip-text" translatable="yes">Open a new tab</property>
-                <property name="visible">yes</property>
                 <child>
-                  <object class="GtkImage">
-                    <property name="icon-name">tab-new-symbolic</property>
+                  <object class="GtkToggleButton" id="panel_toggle">
+                    <property name="focus-on-click">no</property>
+                    <property name="valign">center</property>
+                    <property name="action-name">win.panel</property>
+                    <property name="tooltip-text" translatable="yes">Sidepanel</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="icon-name">view-grid-symbolic</property>
+                        <property name="visible">yes</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="MidoriDownloadButton" id="downloads">
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton" id="toggle_fullscreen">
+                    <property name="focus-on-click">no</property>
+                    <property name="valign">center</property>
+                    <property name="action-name">win.fullscreen</property>
+                    <property name="tooltip-text" translatable="yes">Toggle fullscreen view</property>
                     <property name="visible">yes</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="icon-name">view-fullscreen-symbolic</property>
+                        <property name="visible">yes</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
@@ -133,9 +133,6 @@
               <class name="tabbar"/>
             </style>
           </object>
-          <packing>
-            <property name="shrink">no</property>
-          </packing>
         </child>
       </object>
     </child>
@@ -216,6 +213,9 @@
                   </object>
                 </child>
               </object>
+              <packing>
+                <property name="shrink">no</property>
+              </packing>
             </child>
           </object>
         </child>
diff --git a/ui/download-button.ui b/ui/download-button.ui
index 0958ed2f..63be2754 100644
--- a/ui/download-button.ui
+++ b/ui/download-button.ui
@@ -16,8 +16,6 @@
             <child>
               <object class="GtkLabel">
                 <property name="label" translatable="yes">Downloads</property>
-                <property name="hexpand">yes</property>
-                <property name="width-chars">33</property>
                 <property name="visible">yes</property>
               </object>
             </child>
diff --git a/ui/download-row.ui b/ui/download-row.ui
index 434813df..bffee640 100644
--- a/ui/download-row.ui
+++ b/ui/download-row.ui
@@ -32,7 +32,7 @@
                 <property name="xalign">0.0</property>
                 <property name="hexpand">yes</property>
                 <!-- As per docs, when ellipsized and expanded max width is the minimum -->
-                <property name="max-width-chars">1</property>
+                <property name="max-width-chars">20</property>
                 <property name="visible">yes</property>
               </object>
             </child>
diff --git a/ui/menus.ui b/ui/menus.ui
index 9c5fe1e5..c11d93da 100644
--- a/ui/menus.ui
+++ b/ui/menus.ui
@@ -1,4 +1,33 @@
 <interface>
+  <menu id="app-menu-small">
+    <section>
+      <attribute name="display-hint">horizontal-buttons</attribute>
+      <item>
+        <attribute name="action">win.tab-new</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Open a new tab</attribute>
+        <attribute name="verb-icon">tab-new-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.panel</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Sidepanel</attribute>
+        <attribute name="verb-icon">view-grid-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.show-downloads</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">View downloaded files</attribute>
+        <attribute name="verb-icon">folder-download-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.fullscreen</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Toggle fullscreen view</attribute>
+        <attribute name="verb-icon">view-fullscreen-symbolic</attribute>
+      </item>
+    </section>
+  </menu>
   <menu id="app-menu">
     <section>
       <item>
@@ -43,6 +72,39 @@
       </item>
     </section>
   </menu>
+  <menu id="page-menu-small">
+    <section>
+      <attribute name="display-hint">horizontal-buttons</attribute>
+      <item>
+        <attribute name="action">win.go-back</attribute>
+        <attribute name="label" translatable="yes">Go back to the previous page</attribute>
+        <attribute name="verb-icon">go-previous-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.go-forward</attribute>
+        <attribute name="label" translatable="yes">Go forward to the next page</attribute>
+        <attribute name="verb-icon">go-next-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.tab-reload</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Reload the current page</attribute>
+        <attribute name="verb-icon">view-refresh-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.tab-stop-loading</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Stop loading the current page</attribute>
+        <attribute name="verb-icon">process-stop-symbolic</attribute>
+      </item>
+      <item>
+        <attribute name="action">win.homepage</attribute>
+        <attribute name="hidden-when">action-disabled</attribute>
+        <attribute name="label" translatable="yes">Go to your homepage</attribute>
+        <attribute name="verb-icon">user-home-symbolic</attribute>
+      </item>
+    </section>
+  </menu>
   <menu id="page-menu">
     <section>
       <item>
diff --git a/ui/navigationbar.ui b/ui/navigationbar.ui
index 7c8a611a..272a532f 100644
--- a/ui/navigationbar.ui
+++ b/ui/navigationbar.ui
@@ -1,26 +1,26 @@
 <interface>
   <template class="MidoriNavigationbar" parent="GtkActionBar">
-   <child>
-    <object class="GtkBox">
-      <property name="orientation">horizontal</property>
-      <property name="visible">yes</property>
-      <style>
-        <class name="linked"/>
-      </style>
-      <child>
-        <object class="GtkButton" id="go_back">
-          <property name="focus-on-click">no</property>
-          <property name="action-name">win.go-back</property>
-          <property name="tooltip-text" translatable="yes">Go back to the previous page</property>
-          <property name="visible">yes</property>
-          <child>
-            <object class="GtkImage">
-              <property name="icon-name">go-previous-symbolic</property>
-              <property name="visible">yes</property>
-            </object>
-          </child>
-        </object>
-      </child>
+    <child>
+      <object class="GtkBox" id="actionbox">
+        <property name="orientation">horizontal</property>
+        <property name="visible">yes</property>
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkButton" id="go_back">
+            <property name="focus-on-click">no</property>
+            <property name="action-name">win.go-back</property>
+            <property name="tooltip-text" translatable="yes">Go back to the previous page</property>
+            <property name="visible">yes</property>
+            <child>
+              <object class="GtkImage">
+                <property name="icon-name">go-previous-symbolic</property>
+                <property name="visible">yes</property>
+              </object>
+            </child>
+          </object>
+        </child>
         <child>
           <object class="GtkButton" id="go_forward">
             <property name="focus-on-click">no</property>
@@ -35,8 +35,6 @@
             </child>
           </object>
         </child>
-      </object>
-    </child>
     <child>
       <object class="GtkButton" id="reload">
         <property name="focus-on-click">no</property>
@@ -78,12 +76,12 @@
         </child>
       </object>
     </child>
+      </object>
+    </child>
     <child type="center">
       <object class="MidoriUrlbar" id="urlbar">
         <!-- expand has no effect, int.MAX doesn't work -->
         <property name="max-width-chars">300</property>
-        <property name="margin-left">16</property>
-        <property name="margin-right">16</property>
         <property name="visible">yes</property>
       </object>
     </child>