MessageTray: style summary sources

Make summary sources look more clickable and highlight them when selected.
Highlighting the fully expanded summary source when selected matches the
highlighting in the top bar items and teaches the user that any part of the
expanded summary source can be clicked.

Based on the initial patches by Florian Müllner and Jonathan Strander.

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

data/Makefile.am

@@ -49,6 +49,7 @@ dist_theme_DATA =				\
 	theme/separator-white.png		\
 	theme/single-view-active.svg		\
 	theme/single-view.svg			\
+	theme/source-button-border.svg		\
 	theme/toggle-off-us.svg			\
 	theme/toggle-off-intl.svg		\
 	theme/toggle-on-us.svg			\

data/theme/gnome-shell.css

@@ -971,7 +971,7 @@ StTooltip StLabel {
 #message-tray {
     background-gradient-direction: vertical;
     background-gradient-start: rgba(0,0,0,0.01);
-    background-gradient-end: rgba(0,0,0,0.95);
+    background-gradient-end: rgba(0,0,0,0.82);
     height: 36px;
     color: white;
 }
@@ -1157,14 +1157,32 @@ StTooltip StLabel {
     padding: 2px 4px 0px 0px;
 }
 
+.summary-source-button {
+    color: #fff;
+    text-shadow: black 0px 2px 2px;
+}
+
 .summary-source-button:ltr {
-    padding-left: 4px;
-    padding-right: 16px;
+    padding-right: 12px;
+}
+
+.summary-source-button:selected .summary-source {
+    background-image: url("panel-button-highlight-narrow.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
+}
+
+.summary-source-button:expanded:selected .summary-source {
+    background-image: none;
+    border-image: none;
+}
+
+.summary-source-button:expanded:selected {
+    background-image: url("panel-button-highlight-wide.svg");
+    border-image: url("source-button-border.svg") 10 10 0 1;
 }
 
 .summary-source-button:rtl {
-    padding-right: 4px;
-    padding-left: 16px;
+    padding-left: 12px;
 }
 
 .summary-source-button:last-child:ltr {
@@ -1175,6 +1193,11 @@ StTooltip StLabel {
     padding-left: 12px;
 }
 
+.summary-source {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
 .source-title {
     font-size: 9pt;
     font-weight: bold;

data/theme/source-button-border.svg

@@ -0,0 +1,74 @@
+<?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="21"
+   height="10"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.0 r9654"
+   sodipodi:docname="source-button-border.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.8"
+     inkscape:cx="8.704132"
+     inkscape:cy="5.7029946"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="1145"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     guidetolerance="10000"
+     objecttolerance="10000">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3792"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <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
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3796"
+       width="19"
+       height="2"
+       x="1"
+       y="8" />
+  </g>
+</svg>

js/ui/messageTray.js

@@ -910,6 +910,7 @@ SummaryItem.prototype = {
     _init: function(source) {
         this.source = source;
         this.actor = new St.Button({ style_class: 'summary-source-button',
+                                     y_fill: true,
                                      reactive: true,
                                      button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO | St.ButtonMask.THREE,
                                      track_hover: true });
@@ -926,8 +927,8 @@ SummaryItem.prototype = {
         this._sourceTitleBin.child = this._sourceTitle;
         this._sourceTitleBin.width = 0;
 
-        this._sourceBox.add_actor(this._sourceIcon);
-        this._sourceBox.add_actor(this._sourceTitleBin, { expand: true });
+        this._sourceBox.add(this._sourceIcon, { y_fill: false });
+        this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
         this.actor.child = this._sourceBox;
         this.rightClickMenu = new St.BoxLayout({ name: 'summary-right-click-menu',
                                                  vertical: true });
@@ -1331,12 +1332,18 @@ MessageTray.prototype = {
         // Turn off ellipsization for the previously expanded item that is
         // collapsing and for the item that is expanding because it looks
         // better that way.
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            // Ideally, we would remove 'expanded' pseudo class when the item
+            // is done collapsing, but we don't track when that happens.
+            this._expandedSummaryItem.actor.remove_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         this._expandedSummaryItem = summaryItem;
-        if (this._expandedSummaryItem)
+        if (this._expandedSummaryItem) {
+            this._expandedSummaryItem.actor.add_style_pseudo_class('expanded');
             this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE);
+        }
 
         // We tween on a "_expandedSummaryItemTitleWidth" pseudo-property
         // that represents the current title width of the
@@ -1928,6 +1935,7 @@ MessageTray.prototype = {
         this._adjustSummaryBoxPointerPosition();
 
         this._summaryBoxPointerState = State.SHOWING;
+        this._clickedSummaryItem.actor.add_style_pseudo_class('selected');
         this._summaryBoxPointer.show(true, Lang.bind(this, function() {
             this._summaryBoxPointerState = State.SHOWN;
         }));
@@ -1954,6 +1962,8 @@ MessageTray.prototype = {
             this._summaryRightClickMenuClickedId = 0;
         }
 
+        if (this._clickedSummaryItem)
+            this._clickedSummaryItem.actor.remove_style_pseudo_class('selected');
         this._clickedSummaryItem = null;
         this._clickedSummaryItemMouseButton = -1;
     },