Mimic the behaviour and style of the sugar GTK+ 2 sub-toolbars in GTK+ 3

This draws the grey line around the toolbutton icon with a gap at the
bottom and a grey line at the top of the subtoolbar. Furthermore it
gets the highlightning of the button correct, in the pressed and hover
state. This patch depends on the sugar-artwork patch with the id
7464b808eb12b1df650952e3c8214acff1d1360f.

Signed-off-by: Gonzalo Odiard <gonzalo@laptop.org>
Signed-off-by: Manuel Quiñones <manuq@laptop.org>
Acked-by: Simon Schampijer <simon@laptop.org>

src/sugar3/graphics/toolbarbox.py

@@ -66,7 +66,7 @@ class ToolbarButton(ToolButton):
         if page is None:
             self.page_widget = None
             return
-        self.page_widget, alignment_ = _embed_page(_Box, page)
+        self.page_widget, alignment_ = _embed_page(_Box(self), page)
         self.page_widget.set_size_request(-1, style.GRID_CELL_SIZE)
         page.show()
         if self.props.palette is None:
@@ -126,21 +126,31 @@ class ToolbarButton(ToolButton):
         page_parent.remove(self.page_widget)
 
     def do_draw(self, cr):
-        if not self.is_expanded() or self.props.palette is not None and \
-                self.props.palette.is_up():
-            Gtk.ToolButton.do_draw(self, cr)
-            _paint_arrow(self, cr, math.pi)
-            return
-
         alloc = self.get_allocation()
 
         context = self.get_style_context()
         context.add_class('toolitem')
 
-        Gtk.render_frame_gap(context, cr, 0, 0, alloc.width, alloc.height,
-                             Gtk.PositionType.BOTTOM, 0, alloc.width)
+        arrow_direction = 0
+        if not self.is_expanded() or self.props.palette is not None and \
+                self.props.palette.is_up():
+            arrow_direction = math.pi
+
+        if not self.is_expanded() and self.props.palette is not None and \
+            self.props.palette.is_up():
+            # draw a black background
+            cr.set_source_rgba(*style.COLOR_BLACK.get_rgba())
+            cr.rectangle(0, 0, alloc.width, alloc.height)
+            cr.fill()
+
         Gtk.ToolButton.do_draw(self, cr)
-        _paint_arrow(self, cr, 0)
+
+        if self.is_expanded() or self.props.palette is not None and \
+            self.props.palette.is_up():
+            Gtk.render_frame_gap(context, cr, 0, 0, alloc.width, alloc.height,
+                                 Gtk.PositionType.BOTTOM, 0, alloc.width)
+
+        _paint_arrow(self, cr, arrow_direction)
 
 
 class ToolbarBox(Gtk.VBox):
@@ -155,7 +165,7 @@ class ToolbarBox(Gtk.VBox):
         self._toolbar.connect('remove', self.__remove_cb)
 
         self._toolbar_widget, self._toolbar_alignment = \
-                _embed_page(Gtk.EventBox, self._toolbar)
+                _embed_page(Gtk.EventBox(), self._toolbar)
         self.pack_start(self._toolbar_widget, True, True, 0)
 
         self.props.padding = padding
@@ -269,26 +279,23 @@ class _ToolbarPalette(PaletteWindow):
 
 class _Box(Gtk.EventBox):
 
-    def __init__(self):
+    def __init__(self, toolbar_button):
         GObject.GObject.__init__(self)
         self.set_app_paintable(True)
+        self._toolbar_button = toolbar_button
 
-    def do_expose_event(self, widget, event):
-        # TODO: reimplement this in the theme
-        expanded_button = self.get_parent().expanded_button
-        if expanded_button is None:
-            return
-        alloc = expanded_button.allocation
-        self.get_style().paint_box(event.window,
-                Gtk.StateType.NORMAL, Gtk.ShadowType.IN, event.area, self,
-                'palette-invoker', -style.FOCUS_LINE_WIDTH, 0,
-                self.allocation.width + style.FOCUS_LINE_WIDTH * 2,
-                self.allocation.height + style.FOCUS_LINE_WIDTH)
-        self.get_style().paint_box(event.window,
-                Gtk.StateType.NORMAL, Gtk.ShadowType.NONE, event.area, self, None,
-                alloc.x + style.FOCUS_LINE_WIDTH, 0,
-                alloc.width - style.FOCUS_LINE_WIDTH * 2,
-                    style.FOCUS_LINE_WIDTH)
+    def do_draw(self, cr):
+        button_alloc = self._toolbar_button.get_allocation()
+
+        cr.set_line_width(style.FOCUS_LINE_WIDTH * 2)
+        cr.set_source_rgba(*style.COLOR_BUTTON_GREY.get_rgba())
+        cr.move_to(0, 0)
+        cr.line_to(button_alloc.x + style.FOCUS_LINE_WIDTH, 0)
+        cr.move_to(button_alloc.x + button_alloc.width - style.FOCUS_LINE_WIDTH, 0)
+        cr.line_to(self.get_allocation().width, 0)
+        cr.stroke()
+
+        Gtk.EventBox.do_draw(self, cr)
 
 
 def _setup_page(page_widget, color, hpad):
@@ -305,14 +312,13 @@ def _setup_page(page_widget, color, hpad):
     page_widget.modify_bg(Gtk.StateType.PRELIGHT, color)
 
 
-def _embed_page(box_class, page):
+def _embed_page(page_widget, page):
     page.show()
 
     alignment = Gtk.Alignment(xscale=1.0, yscale=1.0)
     alignment.add(page)
     alignment.show()
 
-    page_widget = box_class()
     page_widget.modify_bg(Gtk.StateType.ACTIVE,
             style.COLOR_BUTTON_GREY.get_gdk_color())
     page_widget.add(alignment)