Implement fullscreen mode (#28)

![screenshot from 2018-08-30 18-03-16](https://user-images.githubusercontent.com/1204189/44864348-b9090400-ac7f-11e8-993d-f9b9c9c8c67c.png)

Fullscreen, entered via the fullscreen button (pictured above) or F11, hides the titlebar/tabbar, panel and navigationbar (as well as the page menu). The navigationbar will reveal itself when hovering the top of the screen or ^L until it loses focus.

I'm using the opportunity to move the navigationbar into its own class/ UI file.

Fixes: #30 

6 files changed, 222 insertions, 117 deletions

diff --git a/core/browser.vala b/core/browser.vala
index fa29617c..c1854bbb 100644
--- a/core/browser.vala
+++ b/core/browser.vala
@@ -16,6 +16,7 @@ namespace Midori {
         public bool is_loading { get { return tab != null && tab.is_loading; } }
         public Tab? tab { get; protected set; }
         public ListStore trash { get; protected set; }
+        public bool is_fullscreen { get; protected set; default = false; }
 
         const ActionEntry[] actions = {
             { "tab-new", tab_new_activated },
@@ -29,6 +30,7 @@ namespace Midori {
             { "tab-stop-loading", tab_stop_loading_activated },
             { "tab-previous", tab_previous_activated },
             { "tab-next", tab_next_activated },
+            { "fullscreen", fullscreen_activated },
             { "show-downloads", show_downloads_activated },
             { "find", find_activated },
             { "print", print_activated },
@@ -53,19 +55,7 @@ namespace Midori {
         [GtkChild]
         Gtk.Image profile_icon;
         [GtkChild]
-        Gtk.ActionBar navigationbar;
-        [GtkChild]
-        Gtk.Button go_back;
-        [GtkChild]
-        Gtk.Button go_forward;
-        [GtkChild]
-        Gtk.Button reload;
-        [GtkChild]
-        Gtk.Button stop_loading;
-        [GtkChild]
-        Urlbar urlbar;
-        [GtkChild]
-        Gtk.MenuButton menubutton;
+        Navigationbar navigationbar;
         [GtkChild]
         Gtk.Stack tabs;
         [GtkChild]
@@ -82,11 +72,21 @@ namespace Midori {
         construct {
             overlay.add_events (Gdk.EventMask.ENTER_NOTIFY_MASK);
             overlay.enter_notify_event.connect ((event) => {
+                if (is_fullscreen && !tab.pinned) {
+                    navigationbar.show ();
+                    navigationbar.urlbar.grab_focus ();
+                }
                 statusbar.hide ();
                 statusbar.halign = statusbar.halign == Gtk.Align.START ? Gtk.Align.END : Gtk.Align.START;
                 statusbar.show ();
                 return false;
             });
+            navigationbar.urlbar.focus_out_event.connect ((event) => {
+                if (is_fullscreen) {
+                    navigationbar.hide ();
+                }
+                return false;
+            });
 
             add_action_entries (actions, this);
 
@@ -96,6 +96,7 @@ namespace Midori {
                 application.set_accels_for_action ("win.tab-close", { "<Primary>w" });
                 application.set_accels_for_action ("win.close", { "<Primary><Shift>w" });
                 application.set_accels_for_action ("win.tab-reopen", { "<Primary><Shift>t" });
+                application.set_accels_for_action ("win.fullscreen", { "F11" });
                 application.set_accels_for_action ("win.show-downloads", { "<Primary><Shift>j" });
                 application.set_accels_for_action ("win.find", { "<Primary>f", "slash" });
                 application.set_accels_for_action ("win.print", { "<Primary>p" });
@@ -118,7 +119,7 @@ namespace Midori {
                 application.set_accels_for_action ("win.tab-zoom(1.0)", { "<Primary>0" });
 
                 profile.menu_model = application.get_menu_by_id ("profile-menu");
-                menubutton.menu_model = application.get_menu_by_id ("browser-menu");
+                navigationbar.menubutton.menu_model = application.get_menu_by_id ("browser-menu");
 
                 application.bind_busy_property (this, "is-loading");
                 // App menu fallback as a button rather than a menu
@@ -143,11 +144,12 @@ namespace Midori {
 
             trash = new ListStore (typeof (DatabaseItem));
 
-            urlbar.notify["uri"].connect ((pspec) => {
-                if (urlbar.uri.has_prefix ("javascript:")) {
-                    tab.run_javascript.begin (urlbar.uri.substring (11, -1), null);
-                } else if (urlbar.uri != tab.display_uri) {
-                    tab.load_uri (urlbar.uri);
+            navigationbar.urlbar.notify["uri"].connect ((pspec) => {
+                string uri = navigationbar.urlbar.uri;
+                if (uri.has_prefix ("javascript:")) {
+                    tab.run_javascript.begin (uri.substring (11, -1), null);
+                } else if (uri != tab.display_uri) {
+                    tab.load_uri (uri);
                 }
             });
             tabs.notify["visible-child"].connect (() => {
@@ -158,25 +160,25 @@ namespace Midori {
                 }
                 tab = (Tab)tabs.visible_child;
                 if (tab != null) {
-                    go_back.sensitive = tab.can_go_back;
-                    go_forward.sensitive = tab.can_go_forward;
-                    reload.visible = !tab.is_loading;
-                    stop_loading.visible = tab.is_loading;
-                    urlbar.progress_fraction = tab.progress;
+                    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;
                     title = tab.display_title;
-                    urlbar.secure = tab.secure;
+                    navigationbar.urlbar.secure = tab.secure;
                     statusbar.label = tab.link_uri;
-                    urlbar.uri = tab.display_uri;
+                    navigationbar.urlbar.uri = tab.display_uri;
                     navigationbar.visible = !tab.pinned;
-                    bindings.append (tab.bind_property ("can-go-back", go_back, "sensitive"));
-                    bindings.append (tab.bind_property ("can-go-forward", go_forward, "sensitive"));
-                    bindings.append (tab.bind_property ("is-loading", reload, "visible", BindingFlags.INVERT_BOOLEAN));
-                    bindings.append (tab.bind_property ("is-loading", stop_loading, "visible"));
-                    bindings.append (tab.bind_property ("progress", urlbar, "progress-fraction"));
+                    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 ("progress", navigationbar.urlbar, "progress-fraction"));
                     bindings.append (tab.bind_property ("display-title", this, "title"));
-                    bindings.append (tab.bind_property ("secure", urlbar, "secure"));
+                    bindings.append (tab.bind_property ("secure", navigationbar.urlbar, "secure"));
                     bindings.append (tab.bind_property ("link-uri", statusbar, "label"));
-                    bindings.append (tab.bind_property ("display-uri", urlbar, "uri"));
+                    bindings.append (tab.bind_property ("display-uri", navigationbar.urlbar, "uri"));
                     bindings.append (tab.bind_property ("pinned", navigationbar, "visible", BindingFlags.INVERT_BOOLEAN));
                     tab.grab_focus ();
                 } else {
@@ -210,6 +212,7 @@ namespace Midori {
                 var box = (get_child () as Gtk.Box);
                 box.add (titlebar);
                 box.reorder_child (titlebar, 0);
+                bind_property ("is-fullscreen", titlebar, "visible", BindingFlags.INVERT_BOOLEAN);
                 titlebar.unref ();
                 titlebar.get_style_context ().remove_class ("titlebar");
             } else {
@@ -258,7 +261,7 @@ namespace Midori {
             }
             if (base.key_press_event (event)) {
                 // Popdown completion if a key binding was fired
-                urlbar.popdown ();
+                navigationbar.urlbar.popdown ();
                 return true;
             }
             return false;
@@ -296,7 +299,10 @@ namespace Midori {
         }
 
         void goto_activated () {
-            urlbar.grab_focus ();
+            if (!tab.pinned) {
+                navigationbar.show ();
+                navigationbar.urlbar.grab_focus ();
+            }
         }
 
         void go_back_activated () {
@@ -341,6 +347,21 @@ namespace Midori {
             }
         }
 
+        void fullscreen_activated () {
+            is_fullscreen = !is_fullscreen;
+            navigationbar.restore.visible = is_fullscreen;
+            navigationbar.menubutton.visible = !is_fullscreen;
+            if (is_fullscreen) {
+                fullscreen ();
+                navigationbar.hide ();
+                panel.hide ();
+            } else {
+                unfullscreen ();
+                navigationbar.visible = !tab.pinned;
+                panel.visible = lookup_action ("panel").state.get_boolean ();
+            }
+        }
+
         void show_downloads_activated () {
             downloads.show_downloads ();
         }
diff --git a/core/navigationbar.vala b/core/navigationbar.vala
new file mode 100644
index 00000000..f148ce80
--- /dev/null
+++ b/core/navigationbar.vala
@@ -0,0 +1,33 @@
+/*
+ Copyright (C) 2018 Christian Dywan <christian@twotoats.de>
+
+ This library is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ See the file COPYING for the full license text.
+*/
+
+namespace Midori {
+    [GtkTemplate (ui = "/ui/navigationbar.ui")]
+    public class Navigationbar : Gtk.ActionBar {
+        [GtkChild]
+        public Gtk.Button go_back;
+        [GtkChild]
+        public Gtk.Button go_forward;
+        [GtkChild]
+        public Gtk.Button reload;
+        [GtkChild]
+        public Gtk.Button stop_loading;
+        [GtkChild]
+        public Urlbar urlbar;
+        [GtkChild]
+        public Gtk.MenuButton menubutton;
+        [GtkChild]
+        public Gtk.Button restore;
+
+        construct {
+        }
+    }
+}
diff --git a/gresource.xml b/gresource.xml
index 86a438ed..a4ff1b2f 100644
--- a/gresource.xml
+++ b/gresource.xml
@@ -23,6 +23,7 @@
     <file compressed="true" preprocess="xml-stripblanks">ui/clear-private-data.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/download-button.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/download-row.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">ui/navigationbar.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/network-check.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/suggestion-row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/tab.ui</file>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 0d733484..341d31f9 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -12,6 +12,7 @@ core/favicon.vala
 core/history.vala
 core/loggable.vala
 core/main.vala
+core/navigationbar.vala
 core/network-check.vala
 core/shortcuts.val
 core/statusbar.vala
@@ -25,6 +26,7 @@ ui/clear-private-data.ui
 ui/download-button.ui
 ui/download-row.ui
 ui/menus.ui
+ui/navigationbar.ui
 ui/network-check.ui
 ui/shortcuts.ui
 ui/suggestion-row.ui
diff --git a/ui/browser.ui b/ui/browser.ui
index 0d105d8c..4bf7c3dc 100644
--- a/ui/browser.ui
+++ b/ui/browser.ui
@@ -11,7 +11,7 @@
     <property name="mode">horizontal</property>
     <widgets>
       <widget name="scrolled"/>
-      <widget name="urlbar"/>
+      <widget name="navigationbar"/>
     </widgets>
   </object>
   <template class="MidoriBrowser" parent="GtkApplicationWindow">
@@ -55,6 +55,23 @@
               </object>
             </child>
             <child>
+              <object class="GtkButton">
+                <property name="focus-on-click">no</property>
+                <property name="valign">center</property>
+                <property name="action-name">win.fullscreen</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="MidoriDownloadButton" id="downloads">
                 <property name="valign">center</property>
               </object>
@@ -152,88 +169,8 @@
                 <property name="orientation">vertical</property>
                 <property name="visible">yes</property>
                 <child>
-                  <object class="GtkActionBar" id="navigationbar">
+                  <object class="MidoriNavigationbar" id="navigationbar">
                     <property name="visible">yes</property>
-                      <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="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>
-                            <property name="action-name">win.go-forward</property>
-                            <property name="visible">yes</property>
-                            <child>
-                              <object class="GtkImage">
-                                <property name="icon-name">go-next-symbolic</property>
-                                <property name="visible">yes</property>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="reload">
-                        <property name="focus-on-click">no</property>
-                        <property name="action-name">win.tab-reload</property>
-                        <property name="visible">yes</property>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">view-refresh-symbolic</property>
-                            <property name="visible">yes</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="stop_loading">
-                        <property name="focus-on-click">no</property>
-                        <property name="action-name">win.tab-stop-loading</property>
-                        <property name="visible">yes</property>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">process-stop-symbolic</property>
-                            <property name="visible">yes</property>
-                          </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>
-                    <child>
-                      <object class="GtkMenuButton" id="menubutton">
-                        <property name="valign">center</property>
-                        <property name="direction">none</property>
-                        <property name="visible">yes</property>
-                      </object>
-                      <packing>
-                        <property name="pack-type">end</property>
-                      </packing>
-                    </child>
                   </object>
                 </child>
                 <child>
@@ -245,6 +182,17 @@
                     <property name="hexpand">yes</property>
                     <property name="vexpand">yes</property>
                     <property name="visible">yes</property>
+                    <!-- Invisible bar at the top to detect motion to reveal the navigationbar -->
+                    <child type="overlay">
+                      <object class="GtkEventBox">
+                        <property name="halign">start</property>
+                        <property name="valign">start</property>
+                        <property name="hexpand">yes</property>
+                        <property name="vexpand">no</property>
+                        <property name="halign">fill</property>
+                        <property name="visible">yes</property>
+                      </object>
+                    </child>
                     <child>
                       <object class="GtkStack" id="tabs">
                         <property name="transition-type">over-left-right</property>
diff --git a/ui/navigationbar.ui b/ui/navigationbar.ui
new file mode 100644
index 00000000..b9de5e64
--- /dev/null
+++ b/ui/navigationbar.ui
@@ -0,0 +1,100 @@
+<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="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>
+            <property name="action-name">win.go-forward</property>
+            <property name="visible">yes</property>
+            <child>
+              <object class="GtkImage">
+                <property name="icon-name">go-next-symbolic</property>
+                <property name="visible">yes</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton" id="reload">
+        <property name="focus-on-click">no</property>
+        <property name="action-name">win.tab-reload</property>
+        <property name="visible">yes</property>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">view-refresh-symbolic</property>
+            <property name="visible">yes</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton" id="stop_loading">
+        <property name="focus-on-click">no</property>
+        <property name="action-name">win.tab-stop-loading</property>
+        <property name="visible">yes</property>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">process-stop-symbolic</property>
+            <property name="visible">yes</property>
+          </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>
+    <child>
+      <object class="GtkButton" id="restore">
+        <property name="focus-on-click">no</property>
+        <property name="valign">center</property>
+        <property name="action-name">win.fullscreen</property>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">view-restore-symbolic</property>
+            <property name="visible">yes</property>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="pack-type">end</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkMenuButton" id="menubutton">
+        <property name="valign">center</property>
+        <property name="direction">none</property>
+        <property name="visible">yes</property>
+      </object>
+      <packing>
+        <property name="pack-type">end</property>
+      </packing>
+    </child>
+  </template>
+</interface>