[epiphany/wip/exalm/elementary4: 1/3] page-menu-popover: Rearrange margins

[Alexander Mikhaylenko <alexm src gnome org>]

commit 1ed1be1b5095e3817a5af978515e0ce5bd2e019a
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Mon Sep 23 19:47:19 2019 +0500

    page-menu-popover: Rearrange margins
    
    Pack menu contents other than the top buttons into an extra box, set
    margins via css. Add style classes for the new box and for zoom controls.
    
    This is a prerequisite for overriding margins for elementary.

 src/resources/gtk/page-menu-popover.ui | 336 +++++++++++++++++----------------
 src/resources/themes/_shared-base.scss |   8 +-
 2 files changed, 183 insertions(+), 161 deletions(-)
---
diff --git a/src/resources/gtk/page-menu-popover.ui b/src/resources/gtk/page-menu-popover.ui
index fc7d59808..6c4b7c7e3 100644
--- a/src/resources/gtk/page-menu-popover.ui
+++ b/src/resources/gtk/page-menu-popover.ui
@@ -4,17 +4,20 @@
     <child>
       <object class="GtkBox">
         <property name="can_focus">False</property>
-        <property name="border_width">12</property>
+        <property name="margin-top">12</property>
         <property name="orientation">vertical</property>
         <property name="visible">True</property>
+        <property name="spacing">6</property>
         <child>
           <object class="GtkBox" id="zoom-box">
             <property name="visible">True</property>
             <property name="orientation">horizontal</property>
             <property name="homogeneous">True</property>
-            <property name="margin-bottom">6</property>
+            <property name="margin-start">12</property>
+            <property name="margin-end">12</property>
             <style>
-                <class name="linked"/>
+              <class name="linked"/>
+              <class name="page-menu-zoom-box"/>
             </style>
             <child>
               <object class="GtkButton">
@@ -74,7 +77,8 @@
             <property name="orientation">horizontal</property>
             <property name="spacing">6</property>
             <property name="homogeneous">True</property>
-            <property name="margin-bottom">6</property>
+            <property name="margin-start">12</property>
+            <property name="margin-end">12</property>
             <child>
               <object class="GtkModelButton">
                 <property name="tooltip_text" translatable="yes">Print…</property>
@@ -122,164 +126,176 @@
             </child>
           </object>
         </child>
-        <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
         <child>
-          <object class="GtkSeparator" id="new-window-separator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="new-window-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_New Window</property>
-            <property name="action-name">app.new-window</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="new-incognito-window-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">New _Incognito Window</property>
-            <property name="action-name">app.new-incognito</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: This button is manually removed for app mode in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkModelButton" id="reopen-closed-tab-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">Reopen Closed _Tab</property>
-            <property name="action-name">app.reopen-closed-tab</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_History</property>
-            <property name="action-name">app.history</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkSeparator" id="bookmarks-separator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="import-bookmarks-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">I_mport Bookmarks…</property>
-            <property name="action-name">app.import-bookmarks</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="export-bookmarks-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">E_xport Bookmarks…</property>
-            <property name="action-name">app.export-bookmarks</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkSeparator" id="save-as-application-separator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="save-as-application-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">Install Site as Web _Application…</property>
-            <property name="action-name">win.save-as-application</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="application-manager-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">Open Appli_cation Manager</property>
-            <property name="action-name">win.open-application-manager</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkSeparator" id="override-text-encoding-separator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton" id="override-text-encoding-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_Override Text Encoding…</property>
-            <property name="action-name">win.encoding</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator">
-            <property name="orientation">horizontal</property>
-            <property name="margin-top">6</property>
-            <property name="margin-bottom">6</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkModelButton">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">Pr_eferences</property>
-            <property name="action-name">app.preferences</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: This button is manually removed for app mode in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkModelButton" id="keyboard-shortcuts-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_Keyboard Shortcuts</property>
-            <property name="action-name">app.shortcuts</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: This button is manually removed for app mode/Pantheon in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkModelButton" id="help-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_Help</property>
-            <property name="action-name">app.help</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <!-- FRAGILE: This button is manually removed for Pantheon in ephy-header-bar.c. -->
-        <child>
-          <object class="GtkModelButton" id="about-button">
-            <property name="can_focus">True</property>
-            <property name="text" translatable="yes">_About Web</property>
-            <property name="action-name">app.about</property>
+          <object class="GtkBox">
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
             <property name="visible">True</property>
+            <style>
+              <class name="page-menu-contents"/>
+            </style>
+
+            <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkSeparator" id="new-window-separator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="new-window-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_New Window</property>
+                <property name="action-name">app.new-window</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="new-incognito-window-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">New _Incognito Window</property>
+                <property name="action-name">app.new-incognito</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSeparator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: This button is manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkModelButton" id="reopen-closed-tab-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">Reopen Closed _Tab</property>
+                <property name="action-name">app.reopen-closed-tab</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_History</property>
+                <property name="action-name">app.history</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkSeparator" id="bookmarks-separator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="import-bookmarks-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">I_mport Bookmarks…</property>
+                <property name="action-name">app.import-bookmarks</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="export-bookmarks-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">E_xport Bookmarks…</property>
+                <property name="action-name">app.export-bookmarks</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkSeparator" id="save-as-application-separator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="save-as-application-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">Install Site as Web _Application…</property>
+                <property name="action-name">win.save-as-application</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="application-manager-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">Open Appli_cation Manager</property>
+                <property name="action-name">win.open-application-manager</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: These buttons are manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkSeparator" id="override-text-encoding-separator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton" id="override-text-encoding-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_Override Text Encoding…</property>
+                <property name="action-name">win.encoding</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSeparator">
+                <property name="orientation">horizontal</property>
+                <property name="margin-top">6</property>
+                <property name="margin-bottom">6</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkModelButton">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">Pr_eferences</property>
+                <property name="action-name">app.preferences</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: This button is manually removed for app mode in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkModelButton" id="keyboard-shortcuts-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_Keyboard Shortcuts</property>
+                <property name="action-name">app.shortcuts</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: This button is manually removed for app mode/Pantheon in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkModelButton" id="help-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_Help</property>
+                <property name="action-name">app.help</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <!-- FRAGILE: This button is manually removed for Pantheon in ephy-header-bar.c. -->
+            <child>
+              <object class="GtkModelButton" id="about-button">
+                <property name="can_focus">True</property>
+                <property name="text" translatable="yes">_About Web</property>
+                <property name="action-name">app.about</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+
           </object>
         </child>
       </object>
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index d2d69b294..9c297fe89 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -147,4 +147,10 @@
   background-size: 6px 6px;
   background-repeat: no-repeat;
   background-position: center bottom;
-}
\ No newline at end of file
+}
+
+.page-menu-contents {
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-bottom: 12px;
+}