[gnome-builder] debugger: add a frame to the debugger controls

[Christian Hergert <chergert src gnome org>]

commit 128142c6164b88c578f466e70caa8ae2c2c7ca7f
Author: Christian Hergert <chergert redhat com>
Date:   Sat Sep 2 16:06:01 2017 -0700

    debugger: add a frame to the debugger controls
    
    This are going to be moved into a floating layer above the editor grid, so
    we need to be able to create a shadow layer.

 data/themes/shared.css                   |    1 +
 data/themes/shared/shared-debugger.css   |   21 +++++
 libide/debugger/ide-debugger-controls.c  |    1 +
 libide/debugger/ide-debugger-controls.ui |  133 +++++++++++++++--------------
 libide/libide.gresource.xml              |    1 +
 5 files changed, 93 insertions(+), 64 deletions(-)
---
diff --git a/data/themes/shared.css b/data/themes/shared.css
index 8d19d0d..a9ee0c9 100644
--- a/data/themes/shared.css
+++ b/data/themes/shared.css
@@ -1,3 +1,4 @@
+@import url("resource:///org/gnome/builder/themes/shared/shared-debugger.css");
 @import url("resource:///org/gnome/builder/themes/shared/shared-layout.css");
 @import url("resource:///org/gnome/builder/themes/shared/shared-editor.css");
 @import url("resource:///org/gnome/builder/themes/shared/shared-omnibar.css");
diff --git a/data/themes/shared/shared-debugger.css b/data/themes/shared/shared-debugger.css
new file mode 100644
index 0000000..a3ed9de
--- /dev/null
+++ b/data/themes/shared/shared-debugger.css
@@ -0,0 +1,21 @@
+
+idedebuggercontrols frame {
+  background-image: linear-gradient(shade(@theme_bg_color,1.05), @theme_bg_color);
+  padding: 6px;
+  margin-top: 12px;
+  margin-left: 12px;
+  margin-right: 12px;
+  border-style: solid;
+  border-color: @borders;
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-top-width: 1px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  box-shadow: 0px 3px 5px @borders;
+
+}
+
+idedebuggercontrols frame border {
+  border: none;
+}
diff --git a/libide/debugger/ide-debugger-controls.c b/libide/debugger/ide-debugger-controls.c
index 71295b0..85abfed 100644
--- a/libide/debugger/ide-debugger-controls.c
+++ b/libide/debugger/ide-debugger-controls.c
@@ -31,6 +31,7 @@ ide_debugger_controls_class_init (IdeDebuggerControlsClass *klass)
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
   gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/builder/ui/ide-debugger-controls.ui");
+  gtk_widget_class_set_css_name (widget_class, "idedebuggercontrols");
 }
 
 static void
diff --git a/libide/debugger/ide-debugger-controls.ui b/libide/debugger/ide-debugger-controls.ui
index 0abbb52..f5f92bc 100644
--- a/libide/debugger/ide-debugger-controls.ui
+++ b/libide/debugger/ide-debugger-controls.ui
@@ -2,99 +2,104 @@
 <interface>
   <template class="IdeDebuggerControls" parent="GtkRevealer">
     <child>
-      <object class="GtkBox">
-        <property name="orientation">horizontal</property>
+      <object class="GtkFrame">
         <property name="visible">true</property>
-        <style>
-          <class name="linked"/>
-        </style>
         <child>
-          <object class="GtkButton" id="pause_button">
-            <property name="action-name">debugger.stop</property>
-            <property name="tooltip-text" translatable="yes">Interrupt the program</property>
+          <object class="GtkBox">
+            <property name="orientation">horizontal</property>
             <property name="visible">true</property>
+            <style>
+              <class name="linked"/>
+            </style>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">media-playback-pause-symbolic</property>
+              <object class="GtkButton" id="pause_button">
+                <property name="action-name">debugger.stop</property>
+                <property name="tooltip-text" translatable="yes">Interrupt the program</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">media-playback-pause-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="continue_button">
-            <property name="action-name">debugger.continue</property>
-            <property name="tooltip-text" translatable="yes">Continue running the program</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-continue-symbolic</property>
+              <object class="GtkButton" id="continue_button">
+                <property name="action-name">debugger.continue</property>
+                <property name="tooltip-text" translatable="yes">Continue running the program</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-continue-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="execute_from_cursor_button">
-            <property name="action-name">debugger.execute-from-cursor</property>
-            <property name="tooltip-text" translatable="yes">Execute from the current cursor 
position</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-execute-from-cursor-symbolic</property>
+              <object class="GtkButton" id="execute_from_cursor_button">
+                <property name="action-name">debugger.execute-from-cursor</property>
+                <property name="tooltip-text" translatable="yes">Execute from the current cursor 
position</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-execute-from-cursor-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="execute_to_cursor_button">
-            <property name="action-name">debugger.execute-to-cursor</property>
-            <property name="tooltip-text" translatable="yes">Execute until reaching the current cursor 
position</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-execute-to-cursor-symbolic</property>
+              <object class="GtkButton" id="execute_to_cursor_button">
+                <property name="action-name">debugger.execute-to-cursor</property>
+                <property name="tooltip-text" translatable="yes">Execute until reaching the current cursor 
position</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-execute-to-cursor-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="step_in_button">
-            <property name="action-name">debugger.step-in</property>
-            <property name="tooltip-text" translatable="yes">Execute the current line, stepping into any 
function calls</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-step-in-symbolic</property>
+              <object class="GtkButton" id="step_in_button">
+                <property name="action-name">debugger.step-in</property>
+                <property name="tooltip-text" translatable="yes">Execute the current line, stepping into any 
function calls</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-step-in-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="step_over_button">
-            <property name="action-name">debugger.step-over</property>
-            <property name="tooltip-text" translatable="yes">Execute the current line, stepping over any 
function calls</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-step-over-symbolic</property>
+              <object class="GtkButton" id="step_over_button">
+                <property name="action-name">debugger.step-over</property>
+                <property name="tooltip-text" translatable="yes">Execute the current line, stepping over any 
function calls</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-step-over-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="finish_button">
-            <property name="action-name">debugger.finish</property>
-            <property name="tooltip-text" translatable="yes">Run until the end of the function</property>
-            <property name="visible">true</property>
             <child>
-              <object class="GtkImage">
-                <property name="icon-name">debug-step-out-symbolic</property>
+              <object class="GtkButton" id="finish_button">
+                <property name="action-name">debugger.finish</property>
+                <property name="tooltip-text" translatable="yes">Run until the end of the function</property>
                 <property name="visible">true</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon-name">debug-step-out-symbolic</property>
+                    <property name="visible">true</property>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
diff --git a/libide/libide.gresource.xml b/libide/libide.gresource.xml
index e72a949..4e2d9ac 100644
--- a/libide/libide.gresource.xml
+++ b/libide/libide.gresource.xml
@@ -32,6 +32,7 @@
     <file compressed="true" alias="Arc-shared.css">../data/themes/Arc-shared.css</file>
 
     <file compressed="true" alias="shared.css">../data/themes/shared.css</file>
+    <file compressed="true" 
alias="shared/shared-debugger.css">../data/themes/shared/shared-debugger.css</file>
     <file compressed="true" alias="shared/shared-editor.css">../data/themes/shared/shared-editor.css</file>
     <file compressed="true" alias="shared/shared-layout.css">../data/themes/shared/shared-layout.css</file>
     <file compressed="true" alias="shared/shared-omnibar.css">../data/themes/shared/shared-omnibar.css</file>