diff options
author | Christian Dywan <christian@twotoasts.de> | 2018-11-21 08:34:02 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-21 08:34:02 +0200 |
commit | 3e0657b11b010944f4d14a642b3f1ab7e70e7761 (patch) | |
tree | 32d45ad0ee625178c4b41ee532c901d7b0b51659 | |
parent | 08454b5dbd58576a6d3390a4f20496a6eabf9a17 (diff) | |
download | midori-git-3e0657b11b010944f4d14a642b3f1ab7e70e7761.tar.gz |
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)
-rw-r--r-- | README.md | 1 | ||||
-rw-r--r-- | core/browser.vala | 108 | ||||
-rw-r--r-- | core/navigationbar.vala | 2 | ||||
-rw-r--r-- | data/gtk3.css | 3 | ||||
-rw-r--r-- | ui/browser.ui | 100 | ||||
-rw-r--r-- | ui/download-button.ui | 2 | ||||
-rw-r--r-- | ui/download-row.ui | 2 | ||||
-rw-r--r-- | ui/menus.ui | 62 | ||||
-rw-r--r-- | ui/navigationbar.ui | 48 |
9 files changed, 228 insertions, 100 deletions
@@ -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> |