PageIndicators: extend the clickable area

Replace the inactive spacing with clickable padding inside the
buttons, for easier selection with a mouse.

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

data/theme/gnome-shell.css

@@ -942,21 +942,20 @@ StScrollBar StButton#vhandle:active {
 }
 
 .page-indicator {
+    padding: 15px 30px;
+}
+
+.page-indicator .page-indicator-icon {
     width: 18px;
     height: 18px;
     background-image: url(page-indicator-inactive.svg);
 }
 
-.page-indicator:hover,
-.page-indicator:checked{
+.page-indicator:hover .page-indicator-icon,
+.page-indicator:checked .page-indicator-icon {
     background-image: url(page-indicator-active.svg);
 }
 
-.page-indicators {
-    spacing: 30px;
-    padding: 0px 30px;
-}
-
 .no-frequent-applications-label {
     font-size: 18pt;
     color: #999999;

js/ui/appDisplay.js

@@ -211,6 +211,7 @@ const PageIndicators = new Lang.Class({
                                                              St.ButtonMask.THREE,
                                                 toggle_mode: true,
                                                 checked: pageIndex == this._currentPage });
+                indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
                 indicator.connect('clicked', Lang.bind(this,
                     function() {
                         this.emit('page-activated', pageIndex);