general: Add actions to the toolbar

Generally actions in Nautilus were accessed through context menus or
keyboard shorcuts. However, those are not very discoverable and are
not touch friendly.

Even more, in list view it was not possible to access background actions
since there is always a selection, making Nautilus UX quite poor in that
case.

Also some actions were placed in the app menu, which didn't was not as
clear for some people given that we have most of actions in the toolbar.

In all, we came with a new design that solves the main goals of
discoverability, touch friendly and accessibility for background actions
and app actions, and now are placed in the toolbar together with an
overhaul of the looks of Nautilus path bar and search.

There is still work to do, specifically finding a design that works for
the selection actions and also to replace the current information
floating bar. The later might be just a different goal. However this
goes in the right direction.

See https://gitlab.gnome.org/GNOME/nautilus/issues/322

4 files changed, 478 insertions, 283 deletions

diff --git a/src/resources/ui/nautilus-toolbar-menu.ui b/src/resources/ui/nautilus-toolbar-menu.ui
deleted file mode 100644
index 384558dc1..000000000
--- a/src/resources/ui/nautilus-toolbar-menu.ui
+++ /dev/null
@@ -1,128 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface>
-  <object class="GtkPopoverMenu" id="menu_popover">
-    <child>
-      <object class="GtkBox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="border_width">9</property>
-        <property name="orientation">vertical</property>
-        <property name="width_request">160</property>
-        <child>
-          <object class="GtkBox">
-            <property name="visible">True</property>
-            <property name="orientation">horizontal</property>
-            <property name="homogeneous">True</property>
-            <style>
-              <class name="linked"/>
-            </style>
-            <child>
-              <object class="GtkButton" id="new-folder">
-                <property name="visible">True</property>
-                <property name="action_name">view.new-folder</property>
-                <property name="tooltip-text" translatable="yes">New folder</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="icon-name">folder-new-symbolic</property>
-                    <property name="icon-size">1</property>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="bookmark-this-location">
-                <property name="visible">True</property>
-                <property name="action_name">win.bookmark-current-location</property>
-                <property name="tooltip-text" translatable="yes">Bookmark this location</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="icon-name">bookmark-new-symbolic</property>
-                    <property name="icon-size">1</property>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="new-tab">
-                <property name="visible">True</property>
-                <property name="action-name">win.new-tab</property>
-                <property name="tooltip-text" translatable="yes">New tab</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="icon-name">tab-new-symbolic</property>
-                    <property name="icon-size">1</property>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">2</property>
-              </packing>
-            </child>
-          </object>
-        </child>
-        <child>
-          <!-- Zoom controls are added to this, if the view supports them -->
-          <object class="GtkBox" id="view_menu_zoom_section">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkBox" id="view_menu_undo_redo_section">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
-            <child>
-              <object class="GtkSeparator">
-                <property name="visible">True</property>
-                <property name="orientation">horizontal</property>
-                <property name="margin-top">6</property>
-                <property name="margin-bottom">6</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkModelButton" id="undo">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="text" translatable="yes">_Undo</property>
-                <property name="action-name">win.undo</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkModelButton" id="redo">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="text" translatable="yes">_Redo</property>
-                <property name="action-name">win.redo</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <!-- Other controls custom to the view are added to this -->
-          <object class="GtkBox" id="view_menu_extended_section">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-</interface>
diff --git a/src/resources/ui/nautilus-toolbar-view-menu.ui b/src/resources/ui/nautilus-toolbar-view-menu.ui
index 2aefd3bcd..d585e0f72 100644
--- a/src/resources/ui/nautilus-toolbar-view-menu.ui
+++ b/src/resources/ui/nautilus-toolbar-view-menu.ui
@@ -10,7 +10,6 @@
         <property name="visible">True</property>
         <property name="orientation">horizontal</property>
         <property name="homogeneous">True</property>
-        <property name="margin-top">9</property>
         <style>
           <class name="linked"/>
         </style>
diff --git a/src/resources/ui/nautilus-toolbar.ui b/src/resources/ui/nautilus-toolbar.ui
index 59d3fea04..959b18e9f 100644
--- a/src/resources/ui/nautilus-toolbar.ui
+++ b/src/resources/ui/nautilus-toolbar.ui
@@ -1,215 +1,551 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
 <interface>
-  <!-- interface-requires gtk+ 3.8 -->
-  <template class="NautilusToolbar" parent="GtkHeaderBar">
-    <property name="visible">True</property>
-    <property name="show-close-button">True</property>
+  <requires lib="gtk+" version="3.22"/>
+  <object class="GtkPopoverMenu" id="app_menu">
+    <property name="can_focus">False</property>
     <child>
-      <object class="GtkBox" id="navigation_box">
+      <object class="GtkBox">
         <property name="visible">True</property>
-        <property name="orientation">horizontal</property>
-        <style>
-          <class name="linked"/>
-          <class name="raised"/>
-        </style>
+        <property name="can_focus">False</property>
+        <property name="margin_left">10</property>
+        <property name="margin_right">10</property>
+        <property name="margin_top">10</property>
+        <property name="margin_bottom">10</property>
+        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkButton" id="back_button">
+          <object class="GtkModelButton">
             <property name="visible">True</property>
-            <property name="sensitive">True</property>
-            <property name="action_name">win.back</property>
-            <property name="tooltip-text" translatable="yes">Go back</property>
-            <style>
-              <class name="image-button"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="back_icon">
-                <property name="visible">True</property>
-                <property name="icon-name">go-previous-symbolic</property>
-                <property name="icon-size">1</property>
-              </object>
-            </child>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="action_name">app.new-window</property>
+            <property name="text" translatable="yes">New Window</property>
           </object>
           <packing>
-            <property name="pack-type">start</property>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
           </packing>
         </child>
         <child>
-          <object class="GtkButton" id="forward_button">
+          <object class="GtkModelButton">
             <property name="visible">True</property>
-            <property name="sensitive">True</property>
-            <property name="action_name">win.forward</property>
-            <property name="tooltip-text" translatable="yes">Go forward</property>
-            <style>
-              <class name="image-button"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="forward_icon">
-                <property name="visible">True</property>
-                <property name="icon-name">go-next-symbolic</property>
-                <property name="icon-size">1</property>
-              </object>
-            </child>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="action_name">win.new-tab</property>
+            <property name="text" translatable="yes">New Tab</property>
           </object>
           <packing>
-            <property name="pack-type">start</property>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkModelButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="action_name">app.preferences</property>
+            <property name="text" translatable="yes">Preferences</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkModelButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="action_name">app.help</property>
+            <property name="text" translatable="yes">Help</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">4</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkModelButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="action_name">app.about</property>
+            <property name="text" translatable="yes">About</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">5</property>
           </packing>
         </child>
       </object>
       <packing>
-        <property name="pack-type">start</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkBox" id="path_bar_container">
-      </object>
-      <packing>
-          <property name="pack-type">start</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkBox" id="location_entry_container">
-        <style>
-          <class name="linked"/>
-        </style>
-      </object>
-      <packing>
-        <property name="pack-type">start</property>
+        <property name="submenu">main</property>
+        <property name="position">1</property>
       </packing>
     </child>
+  </object>
+  <object class="GtkPopoverMenu" id="menu_popover">
+    <property name="can_focus">False</property>
     <child>
-      <object class="GtkMenuButton" id="view_button">
+      <object class="GtkBox">
+        <property name="width_request">160</property>
         <property name="visible">True</property>
-        <property name="sensitive">True</property>
-        <property name="action_name">win.view-menu</property>
-        <property name="tooltip-text" translatable="yes">Open menu</property>
-        <!-- Popover defined in nautilus-toolbar-menu.ui -->
-        <style>
-          <class name="image-button"/>
-        </style>
+        <property name="can_focus">False</property>
+        <property name="border_width">9</property>
+        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkImage">
+          <object class="GtkBox" id="view_menu_zoom_section">
             <property name="visible">True</property>
-            <property name="icon-name">open-menu-symbolic</property>
-            <property name="icon-size">1</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <placeholder/>
+            </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
         </child>
-        <child internal-child="accessible">
-          <object class="AtkObject">
-            <property name="accessible-name" translatable="yes">Action menu</property>
-            <property name="accessible-description" translatable="yes">Open action menu</property>
+        <child>
+          <object class="GtkBox" id="view_menu_undo_redo_section">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkSeparator">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_top">6</property>
+                <property name="margin_bottom">6</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="undo_button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="action_name">win.undo</property>
+                <property name="text" translatable="yes">_Undo</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="redo_button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="action_name">win.redo</property>
+                <property name="text" translatable="yes">_Redo</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox" id="view_menu_extended_section">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <placeholder/>
+            </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
         </child>
       </object>
       <packing>
-        <property name="pack-type">end</property>
+        <property name="submenu">main</property>
+        <property name="position">1</property>
       </packing>
     </child>
+  </object>
+  <object class="GtkPopover" id="operations_popover">
+    <property name="can_focus">False</property>
     <child>
-      <object class="GtkButton" id="view_toggle_button">
+      <object class="GtkScrolledWindow">
         <property name="visible">True</property>
-        <property name="sensitive">True</property>
-        <property name="action_name">slot.files-view-mode-toggle</property>
-        <property name="tooltip-text" translatable="yes">Toggle view</property>
-        <style>
-          <class name="image-button"/>
-        </style>
+        <property name="can_focus">False</property>
+        <property name="hscrollbar_policy">never</property>
+        <property name="max_content_height">270</property>
+        <property name="propagate_natural_height">True</property>
         <child>
-          <object class="GtkImage" id="view_toggle_icon">
+          <object class="GtkViewport">
             <property name="visible">True</property>
-            <property name="icon-size">1</property>
-          </object>
-        </child>
-        <child internal-child="accessible">
-          <object class="AtkObject">
-            <property name="accessible-name" translatable="yes">View mode toggle</property>
-            <property name="accessible-description" translatable="yes">Toggle between grid and list view</property>
+            <property name="can_focus">False</property>
+            <child>
+              <object class="GtkBox" id="operations_container">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_left">12</property>
+                <property name="margin_right">12</property>
+                <property name="margin_top">12</property>
+                <property name="margin_bottom">12</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">10</property>
+                <child>
+                  <placeholder/>
+                </child>
+              </object>
+            </child>
           </object>
         </child>
       </object>
-      <packing>
-        <property name="pack-type">end</property>
-      </packing>
     </child>
+  </object>
+  <template class="NautilusToolbar" parent="GtkHeaderBar">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="show_close_button">True</property>
     <child>
-      <object class="GtkToggleButton" id="search_button">
+      <object class="GtkBox" id="navigation_box">
         <property name="visible">True</property>
-        <property name="sensitive">True</property>
-        <property name="action_name">slot.search-visible</property>
-        <property name="tooltip-text" translatable="yes">Search</property>
-        <style>
-          <class name="image-button"/>
-        </style>
+        <property name="can_focus">False</property>
         <child>
-          <object class="GtkImage" id="search_icon">
+          <object class="GtkButton" id="back_button">
             <property name="visible">True</property>
-            <property name="icon-name">edit-find-symbolic</property>
-            <property name="icon-size">1</property>
+            <property name="can_focus">False</property>
+            <property name="receives_default">False</property>
+            <property name="tooltip_text" translatable="yes">Go back</property>
+            <property name="action_name">win.back</property>
+            <child>
+              <object class="GtkImage" id="back_icon">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">go-previous-symbolic</property>
+                <property name="icon_size">1</property>
+              </object>
+            </child>
+            <style>
+              <class name="image-button"/>
+            </style>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
         </child>
-        <child internal-child="accessible">
-          <object class="AtkObject">
-            <property name="accessible-name" translatable="yes">Search</property>
-            <property name="accessible-description" translatable="yes">Search files</property>
+        <child>
+          <object class="GtkButton" id="forward_button">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="receives_default">False</property>
+            <property name="tooltip_text" translatable="yes">Go forward</property>
+            <property name="action_name">win.forward</property>
+            <child>
+              <object class="GtkImage" id="forward_icon">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">go-next-symbolic</property>
+                <property name="icon_size">1</property>
+              </object>
+            </child>
+            <style>
+              <class name="image-button"/>
+            </style>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
         </child>
+        <style>
+          <class name="linked"/>
+          <class name="raised"/>
+        </style>
       </object>
-      <packing>
-        <property name="pack-type">end</property>
-      </packing>
     </child>
-    <child>
-      <object class="GtkRevealer" id="operations_revealer">
+    <child type="title">
+      <object class="GtkBox" id="header_toolbar">
         <property name="visible">True</property>
-        <property name="transition-type">GTK_REVEALER_TRANSITION_TYPE_CROSSFADE</property>
+        <property name="can_focus">False</property>
+        <property name="margin_left">24</property>
+        <property name="margin_right">24</property>
+        <property name="spacing">6</property>
         <child>
-          <object class="GtkMenuButton" id="operations_button">
-            <property name="visible">False</property>
-            <property name="popover">operations_popover</property>
-            <property name="tooltip-text" translatable="yes">Show operations</property>
-            <signal name="toggled" handler="on_operations_button_toggled" object="NautilusToolbar" swapped="yes"/>
-            <style>
-              <class name="button"/>
-            </style>
+          <object class="GtkStack" id="toolbar_switcher">
+            <property name="width_request">300</property>
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="hexpand">True</property>
+            <property name="transition_type">crossfade</property>
             <child>
-              <object class="GtkDrawingArea" id="operations_icon">
+              <object class="GtkBox" id="path_bar_container">
+                <property name="can_focus">False</property>
+                <property name="valign">center</property>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
+                <style>
+                  <class name="pathbar-box"/>
+                </style>
+              </object>
+              <packing>
+                <property name="name">pathbar</property>
+                <property name="title" translatable="yes">page0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox" id="location_entry_container">
+                <property name="can_focus">False</property>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
+                <style>
+                  <class name="linked"/>
+                </style>
+              </object>
+              <packing>
+                <property name="name">location</property>
+                <property name="title" translatable="yes">page1</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox" id="search_container">
                 <property name="visible">True</property>
-                <property name="height-request">16</property>
-                <property name="width-request">16</property>
-                <property name="valign">GTK_ALIGN_CENTER</property>
-                <property name="halign">GTK_ALIGN_CENTER</property>
-                <signal name="draw" handler="on_operations_icon_draw" object="NautilusToolbar" swapped="no"/>
+                <property name="can_focus">False</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <placeholder/>
+                </child>
               </object>
+              <packing>
+                <property name="name">search</property>
+                <property name="title" translatable="yes">page2</property>
+                <property name="position">2</property>
+              </packing>
             </child>
-            <child internal-child="accessible">
-              <object class="AtkObject">
-                <property name="accessible-name" translatable="yes">Operations in progress</property>
-                <property name="accessible-description" translatable="yes">Show operations in progress</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkToggleButton" id="search_button">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
+            <property name="tooltip_text" translatable="yes">Search</property>
+            <property name="action_name">slot.search-visible</property>
+            <child>
+              <object class="GtkImage" id="search_icon">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">edit-find-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
             </child>
+            <style>
+              <class name="image-button"/>
+            </style>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
         </child>
       </object>
       <packing>
-        <property name="pack-type">end</property>
+        <property name="pack_type">end</property>
       </packing>
     </child>
-  </template>
-  <object class="GtkPopover" id="operations_popover">
     <child>
-      <object class="GtkScrolledWindow">
+      <object class="GtkBox">
         <property name="visible">True</property>
-        <property name="hscrollbar_policy">GTK_POLICY_NEVER</property>
-        <property name="max-content-height">270</property>
-        <property name="propagate-natural-height">True</property>
+        <property name="can_focus">False</property>
+        <property name="spacing">6</property>
         <child>
-          <object class="GtkBox" id="operations_container">
-            <property name="orientation">vertical</property>
+          <object class="GtkRevealer" id="operations_revealer">
             <property name="visible">True</property>
-            <property name="margin">12</property>
-            <property name="spacing">10</property>
+            <property name="can_focus">False</property>
+            <property name="transition_type">crossfade</property>
+            <child>
+              <object class="GtkMenuButton" id="operations_button">
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="tooltip_text" translatable="yes">Show operations</property>
+                <property name="popover">operations_popover</property>
+                <signal name="toggled" handler="on_operations_button_toggled" object="NautilusToolbar" swapped="yes"/>
+                <child>
+                  <object class="GtkDrawingArea" id="operations_icon">
+                    <property name="width_request">16</property>
+                    <property name="height_request">16</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <signal name="draw" handler="on_operations_icon_draw" object="NautilusToolbar" swapped="no"/>
+                  </object>
+                </child>
+                <style>
+                  <class name="button"/>
+                </style>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <child>
+              <object class="GtkButton" id="view_toggle_button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="tooltip_text" translatable="yes">Toggle view</property>
+                <property name="action_name">slot.files-view-mode-toggle</property>
+                <child>
+                  <object class="GtkImage" id="view_toggle_icon">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_size">1</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="image-button"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkMenuButton" id="view_button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="halign">start</property>
+                <property name="action_name">win.view-menu</property>
+                <property name="popover">menu_popover</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="icon_name">pan-down-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="disclosure-button"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <style>
+              <class name="linked"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkMenuButton" id="app_button">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="receives_default">False</property>
+            <property name="tooltip_text" translatable="yes">Open menu</property>
+            <property name="popover">app_menu</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">open-menu-symbolic</property>
+                <property name="icon_size">1</property>
+              </object>
+            </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
         </child>
       </object>
+      <packing>
+        <property name="pack_type">end</property>
+        <property name="position">3</property>
+      </packing>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/src/resources/ui/nautilus-window.ui b/src/resources/ui/nautilus-window.ui
index 52efc2ecc..4eef37c11 100644
--- a/src/resources/ui/nautilus-window.ui
+++ b/src/resources/ui/nautilus-window.ui
@@ -3,18 +3,6 @@
   <template class="NautilusWindow" parent="GtkApplicationWindow">
     <property name="show-menubar">False</property>
     <property name="title" translatable="yes">_Files</property>
-    <child type="titlebar">
-      <object class="NautilusToolbar" id="toolbar">
-        <!-- We override the title widget so the GtkHeaderBar stop managing the
-        title label automatically, since we use the NautilusPathBar. We need to set it
-        here rather than in the NautilusToolbar definition due to bug 744324 on
-        gtk+ . -->
-        <child type="title">
-          <object class="GtkLabel">
-          </object>
-        </child>
-      </object>
-    </child>
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>