[StDrawingArea] further CSS-ify StDrawingArea users

Make shell_draw_box_pointer() use CSS colors, and set the app well
menu arrow width based on its own CSS rather than its parent's.

https://bugzilla.gnome.org/show_bug.cgi?id=614516

data/theme/gnome-shell.css

@@ -502,10 +502,15 @@ StTooltip {
     padding: 4px;
     background-color: rgba(0,0,0,0.9);
     color: #ffffff;
-    -shell-arrow-width: 12px;
     -shell-menu-spacing: 4px;
 }
 
+.app-well-menu-arrow {
+    border-color: #5f5f5f;
+    color: rgba(0,0,0,0.9);
+    width: 12px;
+}
+
 .app-well-menu-item:hover {
     background-color: #1e1e1e;
 }
@@ -818,6 +823,16 @@ StTooltip {
     background-image: url("corner-ripple.png");
 }
 
+.switcher-arrow {
+    border-color: rgba(0,0,0,0);
+    color: #808080;
+}
+
+.switcher-arrow:highlighted {
+    border-color: rgba(0,0,0,0);
+    color: white;
+}
+
 /* Workspace Switcher */
 .workspace-switcher-container {
     background: rgba(0,0,0,0.8);

js/ui/altTab.js

@@ -13,13 +13,6 @@ const St = imports.gi.St;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 
-const POPUP_ARROW_COLOR = new Clutter.Color();
-POPUP_ARROW_COLOR.from_pixel(0xffffffff);
-const POPUP_UNFOCUSED_ARROW_COLOR = new Clutter.Color();
-POPUP_UNFOCUSED_ARROW_COLOR.from_pixel(0x808080ff);
-const TRANSPARENT_COLOR = new Clutter.Color();
-TRANSPARENT_COLOR.from_pixel(0x00000000);
-
 const POPUP_APPICON_SIZE = 96;
 const POPUP_SCROLL_TIME = 0.10; // seconds
 
@@ -477,16 +470,18 @@ SwitcherList.prototype = {
         this.actor.add_actor(this._rightGradient);
 
         // Those arrows indicate whether scrolling in one direction is possible
-        this._leftArrow = new St.DrawingArea();
+        this._leftArrow = new St.DrawingArea({ style_class: 'switcher-arrow',
+                                               pseudo_class: 'highlighted' });
         this._leftArrow.connect('repaint', Lang.bind(this,
                                             function (area) {
-                                                Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR);
+                                                Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT);
                                             }));
 
-        this._rightArrow = new St.DrawingArea();
+        this._rightArrow = new St.DrawingArea({ style_class: 'switcher-arrow',
+                                                pseudo_class: 'highlighted' });
         this._rightArrow.connect('repaint', Lang.bind(this,
                                             function (area) {
-                                                Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR);
+                                                Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT);
                                             }));
 
         this._leftGradient.add_actor(this._leftArrow);
@@ -865,16 +860,13 @@ AppSwitcher.prototype = {
     // thumbnails are visible (ie, when the app icon is supposed to be
     // in justOutline mode). Apps with multiple windows will normally
     // show a dim arrow, but show a bright arrow when they are
-    // highlighted; their redraw handler will use the right color
+    // highlighted.
-    // based on this._curApp; we just need to do a queue_relayout() to
-    // force it to redraw. (queue_redraw() doesn't work because
-    // ShellDrawingArea only redraws on allocate.)
     highlight : function(n, justOutline) {
         if (this._curApp != -1) {
             if (this.icons[this._curApp].cachedWindows.length == 1)
                 this._arrows[this._curApp].hide();
             else
-                this._arrows[this._curApp].queue_relayout();
+                this._arrows[this._curApp].remove_style_pseudo_class('highlighted');
         }
 
         SwitcherList.prototype.highlight.call(this, n, justOutline);
@@ -884,7 +876,7 @@ AppSwitcher.prototype = {
             if (justOutline && this.icons[this._curApp].cachedWindows.length == 1)
                 this._arrows[this._curApp].show();
             else
-                this._arrows[this._curApp].queue_relayout();
+                this._arrows[this._curApp].add_style_pseudo_class('highlighted');
         }
     },
 
@@ -893,12 +885,10 @@ AppSwitcher.prototype = {
         this.addItem(appIcon.actor);
 
         let n = this._arrows.length;
-        let arrow = new St.DrawingArea();
+        let arrow = new St.DrawingArea({ style_class: 'switcher-arrow' });
         arrow.connect('repaint', Lang.bind(this,
             function (area) {
-                Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN,
+                Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN);
-                                       TRANSPARENT_COLOR,
-                                       this._curApp == n ? POPUP_ARROW_COLOR : POPUP_UNFOCUSED_ARROW_COLOR);
             }));
         this._list.add_actor(arrow);
         this._arrows.push(arrow);

js/ui/appDisplay.js

@@ -608,9 +608,6 @@ AppIconMenu.prototype = {
     _init: function(source) {
         this._source = source;
 
-        this._arrowSize = 4; // CSS default
-        this._spacing = 0; // CSS default
-
         this.actor = new Shell.GenericContainer({ reactive: true });
         this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
         this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
@@ -634,16 +631,11 @@ AppIconMenu.prototype = {
         this._windowContainer.connect('leave-event', Lang.bind(this, this._onMenuLeave));
         this._windowContainer.connect('button-release-event', Lang.bind(this, this._onMenuButtonRelease));
 
-        this._borderColor = new Clutter.Color();
-        this._backgroundColor = new Clutter.Color();
         this._windowContainerBox.connect('style-changed', Lang.bind(this, this._onStyleChanged));
 
-        this._arrow = new St.DrawingArea();
+        this._arrow = new St.DrawingArea({ style_class: 'app-well-menu-arrow' });
         this._arrow.connect('repaint', Lang.bind(this, function (area) {
-            Shell.draw_box_pointer(area,
+            Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT);
-                                   Shell.PointerDirection.LEFT,
-                                   this._borderColor,
-                                   this._backgroundColor);
         }));
         this.actor.add_actor(this._arrow);
 
@@ -658,11 +650,10 @@ AppIconMenu.prototype = {
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
-        let [min, natural] = this._windowContainerBox.get_preferred_width(forHeight);
+        let [menuMin, menuNatural] = this._windowContainerBox.get_preferred_width(forHeight);
-        min += this._arrowSize;
+        let [arrowMin, arrowNatural] = this._arrow.get_preferred_width(forHeight);
-        natural += this._arrowSize;
+        alloc.min_size = menuMin + arrowMin;
-        alloc.min_size = min;
+        alloc.natural_size = menuNatural + arrowNatural;
-        alloc.natural_size = natural;
     },
 
     _getPreferredHeight: function(actor, forWidth, alloc) {
@@ -678,15 +669,17 @@ AppIconMenu.prototype = {
         let width = box.x2 - box.x1;
         let height = box.y2 - box.y1;
 
+        let [arrowMinWidth, arrowWidth] = this._arrow.get_preferred_width(height);
+
         childBox.x1 = 0;
-        childBox.x2 = this._arrowSize;
+        childBox.x2 = arrowWidth;
-        childBox.y1 = Math.floor((height / 2) - (this._arrowSize / 2));
+        childBox.y1 = Math.floor((height / 2) - (arrowWidth / 2));
-        childBox.y2 = childBox.y1 + this._arrowSize;
+        childBox.y2 = childBox.y1 + arrowWidth;
         this._arrow.allocate(childBox, flags);
 
         // Ensure the arrow is above the border area
         let border = themeNode.get_border_width(St.Side.LEFT);
-        childBox.x1 = this._arrowSize - border;
+        childBox.x1 = arrowWidth - border;
         childBox.x2 = width;
         childBox.y1 = 0;
         childBox.y2 = height;
@@ -873,25 +866,10 @@ AppIconMenu.prototype = {
 
     _onStyleChanged: function() {
         let themeNode = this._windowContainerBox.get_theme_node();
-        let [success, len] = themeNode.get_length('-shell-arrow-width', false);
-        if (success) {
-            this._arrowSize = len;
-            this.actor.queue_relayout();
-        }
         [success, len] = themeNode.get_length('-shell-menu-spacing', false)
         if (success) {
             this._windowContainer.spacing = len;
         }
-
-        let color = new Clutter.Color();
-        themeNode.get_background_color(color);
-        this._backgroundColor = color;
-
-        color = new Clutter.Color();
-        themeNode.get_border_color(St.Side.LEFT, color);
-        this._borderColor = color;
-
-        this._arrow.queue_repaint();
     }
 };
 Signals.addSignalMethods(AppIconMenu.prototype);

src/shell-drawing.c

@@ -51,20 +51,24 @@ shell_draw_clock (StDrawingArea       *area,
 
 void
 shell_draw_box_pointer (StDrawingArea         *area,
-                        ShellPointerDirection  direction,
+                        ShellPointerDirection  direction)
-                        ClutterColor          *border_color,
-                        ClutterColor          *background_color)
 {
+  StThemeNode *theme_node;
+  ClutterColor border_color, body_color;
   guint width, height;
   cairo_t *cr;
 
+  theme_node = st_widget_get_theme_node (ST_WIDGET (area));
+  st_theme_node_get_border_color (theme_node, (StSide)direction, &border_color);
+  st_theme_node_get_foreground_color (theme_node, &body_color);
+
   st_drawing_area_get_surface_size (area, &width, &height);
 
   cr = st_drawing_area_get_context (area);
 
   cairo_set_line_width (cr, 1.0);
 
-  clutter_cairo_set_source_color (cr, border_color);
+  clutter_cairo_set_source_color (cr, &border_color);
 
   switch (direction)
     {
@@ -98,7 +102,7 @@ shell_draw_box_pointer (StDrawingArea         *area,
 
   cairo_stroke_preserve (cr);
 
-  clutter_cairo_set_source_color (cr, background_color);
+  clutter_cairo_set_source_color (cr, &body_color);
 
   cairo_fill (cr);
 }

src/shell-drawing.h

@@ -8,17 +8,16 @@
 
 G_BEGIN_DECLS
 
+/* Note that these correspond to StSide */
 typedef enum {
   SHELL_POINTER_UP,
+  SHELL_POINTER_RIGHT,
   SHELL_POINTER_DOWN,
-  SHELL_POINTER_LEFT,
+  SHELL_POINTER_LEFT
-  SHELL_POINTER_RIGHT
 } ShellPointerDirection;
 
 void shell_draw_box_pointer (StDrawingArea         *area,
-                             ShellPointerDirection  direction,
+                             ShellPointerDirection  direction);
-                             ClutterColor          *border_color,
-                             ClutterColor          *background_color);
 
 void shell_draw_clock (StDrawingArea       *area,
 	               int                  hour,