From 3e0657b11b010944f4d14a642b3f1ab7e70e7761 Mon Sep 17 00:00:00 2001 From: Christian Dywan Date: Wed, 21 Nov 2018 08:34:02 +0200 Subject: 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) --- README.md | 1 + core/browser.vala | 108 ++++++++++++++++++++++++++++++++++++++---------- core/navigationbar.vala | 2 + data/gtk3.css | 3 ++ ui/browser.ui | 100 ++++++++++++++++++++++---------------------- ui/download-button.ui | 2 - ui/download-row.ui | 2 +- ui/menus.ui | 62 +++++++++++++++++++++++++++ ui/navigationbar.ui | 48 +++++++++++---------- 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 @@ -12,6 +12,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] 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 @@ -57,24 +57,6 @@ - - - no - center - win.fullscreen - Toggle fullscreen view - yes - - - view-fullscreen-symbolic - yes - - - - - end - - no @@ -87,41 +69,59 @@ - - center - - - end - - - - - no - center - win.panel - Sidepanel + + horizontal + yes + - - view-grid-symbolic + + no + center + win.tab-new + Open a new tab yes + + + tab-new-symbolic + yes + + - - - start - - - - - no - center - win.tab-new - Open a new tab - yes - - tab-new-symbolic + + no + center + win.panel + Sidepanel + + + view-grid-symbolic + yes + + + + + + + center + + + + + no + center + win.fullscreen + Toggle fullscreen view yes + + + view-fullscreen-symbolic + yes + + @@ -133,9 +133,6 @@ - - no - @@ -216,6 +213,9 @@ + + no + 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 @@ Downloads - yes - 33 yes 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 @@ 0.0 yes - 1 + 20 yes 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 @@ + +
+ horizontal-buttons + + win.tab-new + action-disabled + Open a new tab + tab-new-symbolic + + + win.panel + action-disabled + Sidepanel + view-grid-symbolic + + + win.show-downloads + action-disabled + View downloaded files + folder-download-symbolic + + + win.fullscreen + action-disabled + Toggle fullscreen view + view-fullscreen-symbolic + +
+
@@ -43,6 +72,39 @@
+ +
+ horizontal-buttons + + win.go-back + Go back to the previous page + go-previous-symbolic + + + win.go-forward + Go forward to the next page + go-next-symbolic + + + win.tab-reload + action-disabled + Reload the current page + view-refresh-symbolic + + + win.tab-stop-loading + action-disabled + Stop loading the current page + process-stop-symbolic + + + win.homepage + action-disabled + Go to your homepage + user-home-symbolic + +
+
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 @@