popupMenu: Use an image for arrows

Until now the arrows were the associated arrow
character of the font. This cause some problems like
different arrows for different fonts, and size can be
altered because of the font size.
To solve that, use an image for the arrows.

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

data/Makefile.am

@@ -39,6 +39,7 @@ dist_theme_DATA =				\
 	theme/filter-selected-rtl.svg		\
 	theme/gnome-shell.css			\
 	theme/logged-in-indicator.svg		\
+	theme/menu-arrow-symbolic.svg		    \
 	theme/message-tray-background.png	\
 	theme/more-results.svg			\
 	theme/noise-texture.png			\

data/theme/gnome-shell.css

@@ -157,8 +157,9 @@ StScrollBar StButton#vhandle:active {
     min-width: 200px;
 }
 
-.unicode-arrow {
-    font-size: 120%;
+.popup-menu-arrow {
+    width: 16px;
+    height: 16px;
 }
 
 .popup-submenu-menu-item:open {

data/theme/menu-arrow-symbolic.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg3863"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="menu-arrow.svg">
+  <defs
+     id="defs3865" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.836083"
+     inkscape:cx="-3.1641676"
+     inkscape:cy="11.823817"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1366"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true">
+    <sodipodi:guide
+       orientation="1,0"
+       position="15.996443,16.922964"
+       id="guide3873" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="28.041217,3.1256134"
+       id="guide3875" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-0.80372916,24.469088"
+       id="guide3877" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="3.0363102,34.649657"
+       id="guide3879" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="29.023553,28.577037"
+       id="guide3881" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid2988" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3868">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-16)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 4,23 8,0 -4,5 z"
+       id="path3883"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>

js/ui/panel.js

@@ -213,7 +213,7 @@ const AppMenuButton = new Lang.Class({
         this._label = new TextShadower();
         this._label.actor.y_align = Clutter.ActorAlign.CENTER;
         this._hbox.add_actor(this._label.actor);
-        this._arrow = PopupMenu.unicodeArrow(St.Side.BOTTOM);
+        this._arrow = PopupMenu.arrowIcon(St.Side.BOTTOM);
         this._hbox.add_actor(this._arrow);
 
         this._iconBottomClip = 0;
@@ -842,7 +842,7 @@ const AggregateMenu = new Lang.Class({
         this._indicators.add_child(this._rfkill.indicators);
         this._indicators.add_child(this._volume.indicators);
         this._indicators.add_child(this._power.indicators);
-        this._indicators.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._indicators.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.menu.addMenuItem(this._volume.menu);
         this.menu.addMenuItem(this._brightness.menu);

js/ui/popupMenu.js

@@ -45,28 +45,35 @@ function isPopupMenuItemVisible(child) {
 /**
  * @side Side to which the arrow points.
  */
-function unicodeArrow(side) {
-    let arrowChar;
+function arrowIcon(side) {
+    let rotation;
     switch (side) {
         case St.Side.TOP:
-            arrowChar = '\u25B4';
+            rotation = 180;
             break;
         case St.Side.RIGHT:
-            arrowChar = '\u25B8';
+            rotation = - 90;
             break;
         case St.Side.BOTTOM:
-            arrowChar = '\u25BE';
+            rotation = 0;
             break;
         case St.Side.LEFT:
-            arrowChar = '\u25C2';
+            rotation = 90;
             break;
     }
 
-    return new St.Label({ text: arrowChar,
-                          style_class: 'unicode-arrow',
-                          accessible_role: Atk.Role.ARROW,
-                          y_expand: true,
-                          y_align: Clutter.ActorAlign.CENTER });
+    let gicon = new Gio.FileIcon({ file: Gio.File.new_for_path(global.datadir +
+                                             '/theme/menu-arrow-symbolic.svg') });
+
+    let arrow = new St.Icon({ style_class: 'popup-menu-arrow',
+                              gicon: gicon,
+                              accessible_role: Atk.Role.ARROW,
+                              y_expand: true,
+                              y_align: Clutter.ActorAlign.CENTER });
+
+    arrow.rotation_angle_z = rotation;
+
+    return arrow;
 }
 
 const PopupBaseMenuItem = new Lang.Class({
@@ -993,7 +1000,7 @@ const PopupSubMenuMenuItem = new Lang.Class({
                                      y_align: Clutter.ActorAlign.CENTER });
         this.actor.add_child(this.status);
 
-        this._triangle = unicodeArrow(St.Side.RIGHT);
+        this._triangle = arrowIcon(St.Side.RIGHT);
         this._triangle.pivot_point = new Clutter.Point({ x: 0.5, y: 0.6 });
 
         this._triangleBin = new St.Widget({ y_expand: true,

js/ui/status/accessibility.js

@@ -44,7 +44,7 @@ const ATIndicator = new Lang.Class({
         this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         this._hbox.add_child(new St.Icon({ style_class: 'system-status-icon',
                                            icon_name: 'preferences-desktop-accessibility-symbolic' }));
-        this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.actor.add_child(this._hbox);
 

js/ui/status/keyboard.js

@@ -341,7 +341,7 @@ const InputSourceIndicator = new Lang.Class({
 
         this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         this._hbox.add_child(this._container);
-        this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.actor.add_child(this._hbox);
         this.actor.add_style_class_name('panel-status-button');