[gnome-shell] popupMenu: Use a unicode character for the ornament

[Jasper St. Pierre <jstpierre src gnome org>]

commit a123ec94efdab1eb4700ea2e35eb13647198b425
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Fri Apr 19 21:08:35 2013 -0400

    popupMenu: Use a unicode character for the ornament
    
    This makes it easy to replace the dot with another label in the future.
    Change the allocation logic, as text layout is more complicated than
    simple icon logic.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=698427

 data/theme/gnome-shell.css |    4 ++
 js/ui/popupMenu.js         |   66 ++++++++++++++++----------------------------
 2 files changed, 28 insertions(+), 42 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c4d49ed..e908592 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -125,6 +125,10 @@ StScrollBar StButton#vhandle:active {
 
 /* PopupMenu */
 
+.popup-menu-ornament {
+    text-align: center;
+}
+
 .popup-menu-boxpointer,
 .candidate-popup-boxpointer {
     -arrow-border-radius: 8px;
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index e3adfca..8f600a4 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -59,7 +59,8 @@ const PopupBaseMenuItem = new Lang.Class({
 
         this._children = [];
         this._ornament = Ornament.NONE;
-        this._dot = null;
+        this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
+        this.actor.add_actor(this._ornamentLabel);
         this._columnWidths = null;
         this._spacing = 0;
         this.active = false;
@@ -189,32 +190,14 @@ const PopupBaseMenuItem = new Lang.Class({
         this._ornament = ornament;
 
         if (ornament == Ornament.DOT) {
-            this._dot = new St.DrawingArea({ style_class: 'popup-menu-item-dot' });
-            this._dot.connect('repaint', Lang.bind(this, this._onRepaintDot));
-            this.actor.add_actor(this._dot);
-            this.actor.add_accessible_state (Atk.StateType.CHECKED);
-        } else  if (ornament == Ornament.NONE) {
-            this._dot.destroy();
-            this._dot = null;
-            this.actor.remove_accessible_state (Atk.StateType.CHECKED);
+            this._ornamentLabel.text = '\u2022';
+            this.actor.add_accessible_state(Atk.StateType.CHECKED);
+        } else if (ornament == Ornament.NONE) {
+            this._ornamentLabel.text = '';
+            this.actor.remove_accessible_state(Atk.StateType.CHECKED);
         }
     },
 
-    _onRepaintDot: function(area) {
-        let cr = area.get_context();
-        let [width, height] = area.get_surface_size();
-        let color = area.get_theme_node().get_foreground_color();
-
-        cr.setSourceRGBA (
-            color.red / 255,
-            color.green / 255,
-            color.blue / 255,
-            color.alpha / 255);
-        cr.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI);
-        cr.fill();
-        cr.$dispose();
-    },
-
     // This returns column widths in logical order (i.e. from the dot
     // to the image), not in visual order (left to right)
     getColumnWidths: function() {
@@ -285,26 +268,25 @@ const PopupBaseMenuItem = new Lang.Class({
         let height = box.y2 - box.y1;
         let direction = this.actor.get_text_direction();
 
-        if (this._dot) {
-            // The dot is placed outside box
-            // one quarter of padding from the border of the container
-            // (so 3/4 from the inner border)
-            // (padding is box.x1)
-            let dotBox = new Clutter.ActorBox();
-            let dotWidth = Math.round(box.x1 / 2);
-
-            if (direction == Clutter.TextDirection.LTR) {
-                dotBox.x1 = Math.round(box.x1 / 4);
-                dotBox.x2 = dotBox.x1 + dotWidth;
-            } else {
-                dotBox.x2 = box.x2 + 3 * Math.round(box.x1 / 4);
-                dotBox.x1 = dotBox.x2 - dotWidth;
-            }
-            dotBox.y1 = Math.round(box.y1 + (height - dotWidth) / 2);
-            dotBox.y2 = dotBox.y1 + dotWidth;
-            this._dot.allocate(dotBox, flags);
+        // The ornament is placed outside box
+        // one quarter of padding from the border of the container
+        // (so 3/4 from the inner border)
+        // (padding is box.x1)
+        let ornamentBox = new Clutter.ActorBox();
+        let ornamentWidth = box.x1;
+
+        ornamentBox.x1 = 0;
+        ornamentBox.x2 = ornamentWidth;
+        ornamentBox.y1 = box.y1;
+        ornamentBox.y2 = box.y2;
+
+        if (direction == Clutter.TextDirection.RTL) {
+            ornamentBox.x1 += box.x2;
+            ornamentBox.x2 += box.x2;
         }
 
+        this._ornamentLabel.allocate(ornamentBox, flags);
+
         let x;
         if (direction == Clutter.TextDirection.LTR)
             x = box.x1;