messageTray: Restyle the summary counters

They are bigger and show an ellipsis if the count goes over 99. They
now have a blurred background and a drop shadow based on
data/theme/close-window.svg.

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

data/Makefile.am

@@ -39,6 +39,7 @@ dist_theme_DATA =				\
 	theme/process-working.svg		\
 	theme/running-indicator.svg		\
 	theme/source-button-border.svg		\
+	theme/summary-counter.svg		\
 	theme/toggle-off-us.svg			\
 	theme/toggle-off-intl.svg		\
 	theme/toggle-on-us.svg			\

data/theme/gnome-shell.css

@@ -1438,13 +1438,14 @@ StButton.popup-menu-item:insensitive {
 }
 
 .summary-source-counter {
-    color: white;
+    background-image: url("summary-counter.svg");
-    background-color: #3465A4;
+    background-size: 2.5em;
-    text-shadow: black 1px 1px 0;
+    font-size: 10pt;
-    font-size: 9pt;
+    font-weight: bold;
-    border-radius: 1em;
+    height: 2.5em;
-    min-height: 1em;
+    width: 2.5em;
-    min-width: 1em;
+    -shell-counter-overlap-x: 4px;
+    -shell-counter-overlap-y: 4px;
 }
 
 /* App Switcher */

data/theme/summary-counter.svg

@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+
+<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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   id="Foreground"
+   x="0px"
+   y="0px"
+   width="32"
+   height="32"
+   viewBox="0 0 23.272727 23.272727"
+   enable-background="new 0 0 16 16"
+   xml:space="preserve"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="summary-counter.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"><metadata
+     id="metadata2399"><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 /></cc:Work></rdf:RDF></metadata><defs
+     id="defs2397"><linearGradient
+       id="linearGradient3173"><stop
+         style="stop-color:#c4c4c4;stop-opacity:1;"
+         offset="0"
+         id="stop3175" /><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="1"
+         id="stop3177" /></linearGradient><inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 8 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="16 : 8 : 1"
+       inkscape:persp3d-origin="8 : 5.3333333 : 1"
+       id="perspective2401" /><filter
+       color-interpolation-filters="sRGB"
+       inkscape:collect="always"
+       id="filter16494-4"
+       x="-0.20989846"
+       width="1.4197969"
+       y="-0.20903821"
+       height="1.4180764"><feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.3282637"
+         id="feGaussianBlur16496-8" /></filter><radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient16498-6"
+       id="radialGradient16504-1"
+       cx="7.6582627"
+       cy="5.8191104"
+       fx="7.6582627"
+       fy="5.8191104"
+       r="8.6928644"
+       gradientTransform="matrix(1.0474339,0,0,1.0517402,-0.3632615,-0.42032492)"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       id="linearGradient16498-6"><stop
+         style="stop-color:#9FD0FF;stop-opacity:1"
+         offset="0"
+         id="stop16500-8" /><stop
+         style="stop-color:#3465A4;stop-opacity:1"
+         offset="1"
+         id="stop16502-0" /></linearGradient></defs><sodipodi:namedview
+     inkscape:window-height="709"
+     inkscape:window-width="1366"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10.0"
+     gridtolerance="10.0"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#000000"
+     id="base"
+     showgrid="false"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.386407"
+     inkscape:cy="13.739577"
+     inkscape:window-x="0"
+     inkscape:window-y="1179"
+     inkscape:current-layer="g16402-8"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     borderlayer="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-maximized="1"><inkscape:grid
+       type="xygrid"
+       id="grid11246"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" /></sodipodi:namedview><g
+     style="display:inline"
+     id="g16402-8"
+     transform="translate(4.7533483,2.8238929)"><g
+       id="g3175-4"
+       transform="translate(-0.89995416,0.94028614)"><path
+         sodipodi:type="inkscape:offset"
+         inkscape:radius="0"
+         inkscape:original="M 7.65625 0.125 C 3.2589349 0.125 -0.3125 3.7070002 -0.3125 8.125 C -0.3125 12.543001 3.2589349 16.125 7.65625 16.125 C 12.053566 16.125 15.625 12.543001 15.625 8.125 C 15.625 3.7070002 12.053566 0.125 7.65625 0.125 z "
+         xlink:href="#path2394-32"
+         style="opacity:0.52994014;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2.18181825;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter16494-4);enable-background:accumulate"
+         id="path16480-5"
+         inkscape:href="#path2394-32"
+         d="m 7.65625,0.125 c -4.3973151,0 -7.96875,3.5820002 -7.96875,8 0,4.418001 3.5714349,8 7.96875,8 4.397316,0 7.96875,-3.581999 7.96875,-8 0,-4.4179998 -3.571434,-8 -7.96875,-8 z"
+         transform="translate(0,1.028519)" /><path
+         clip-rule="evenodd"
+         d="m -0.30428257,8.1237596 c 0,-4.4179998 3.56522987,-7.9999996 7.96254497,-7.9999996 4.3973156,0 7.9625456,3.5819998 7.9625456,7.9999996 0,4.4180014 -3.56523,8.0000004 -7.9625456,8.0000004 -4.3973151,0 -7.96254497,-3.581999 -7.96254497,-8.0000004 z"
+         id="path2394-32"
+         style="color:#000000;fill:url(#radialGradient16504-1);fill-opacity:1;fill-rule:nonzero;stroke:#eeeeec;stroke-width:1.4545455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:nodetypes="csssc"
+         inkscape:connector-curvature="0" /><g
+         id="g3172-6" /></g></g></svg>

js/ui/messageTray.js

@@ -953,11 +953,22 @@ const SourceActor = new Lang.Class({
         }));
         this._actorDestroyed = false;
 
-        this._counterLabel = new St.Label();
+        this._counterLabel = new St.Label( {x_align: Clutter.ActorAlign.CENTER,
+                                            x_expand: true,
+                                            y_align: Clutter.ActorAlign.CENTER,
+                                            y_expand: true });
+
         this._counterBin = new St.Bin({ style_class: 'summary-source-counter',
-                                        child: this._counterLabel });
+                                        child: this._counterLabel,
+                                        layout_manager: new Clutter.BinLayout() });
         this._counterBin.hide();
 
+        this._counterBin.connect('style-changed', Lang.bind(this, function() {
+            let themeNode = this._counterBin.get_theme_node();
+            this._counterBin.translation_x = themeNode.get_length('-shell-counter-overlap-x');
+            this._counterBin.translation_y = themeNode.get_length('-shell-counter-overlap-y');
+        }));
+
         this._iconBin = new St.Bin({ width: size,
                                      height: size,
                                      x_fill: true,
@@ -1026,7 +1037,14 @@ const SourceActor = new Lang.Class({
             return;
 
         this._counterBin.visible = this._source.countVisible;
-        this._counterLabel.set_text(this._source.count.toString());
+
+        let text;
+        if (this._source.count < 100)
+            text = this._source.count.toString();
+        else
+            text = String.fromCharCode(0x22EF); // midline horizontal ellipsis
+
+        this._counterLabel.set_text(text);
     }
 });