adjust UI to new text styles

With the new text styles, some UI needs to adjusted, primarily to
accommodate larger heading text.

data/theme/gnome-shell-sass/_common.scss

@@ -146,8 +146,7 @@ StScrollBar {
   -slider-handle-radius: 8px;
   -slider-handle-border-width: 1px;
   -slider-handle-border-color: $borders_color;
-  color: $bg_color; /* FIXME to match gtk, we'd need to style the border of the slider, not
-     the whole widget */
+  color: if($variant == 'light', lighten($bg_color, 10%), darken($bg_color,4%));
   &:hover { color: $_hover_bg_color; }
   &:active { color: $_active_bg_color; }
 }
@@ -188,7 +187,7 @@ StScrollBar {
 
 /* Modal Dialogs */
 
-.headline { font-size: 110%; }
+.headline { @extend %heading; }
 .lightbox { background-color: black; }
 .flashspot { background-color: white; }
 
@@ -205,8 +204,7 @@ StScrollBar {
   }
   .run-dialog-button-box { padding-top: 1em; }
   .run-dialog-label {
-    @include fontsize($font-size + 1.1);
-    font-weight: normal;
+    @extend %title-4;
     color: $fg_color;
     padding-bottom: .4em;
   }
@@ -214,8 +212,8 @@ StScrollBar {
 }
 
   .mount-dialog-subject,
-  .end-session-dialog-subject { //this should be a generic header class
-    @include fontsize($font-size * 1.3);
+  .end-session-dialog-subject {
+    @extend %title-2;
   }
 
 /* Message Dialog */
@@ -235,12 +233,12 @@ StScrollBar {
   }
 
   .message-dialog-title {
-    font-weight: bold;
+    @extend %title-2;
   }
 
   .message-dialog-subtitle {
+    @extend %heading;
     color: $fg_color;
-    font-weight: bold;
   }
 
 /* End Session Dialog */
@@ -254,6 +252,7 @@ StScrollBar {
   }
 
   .end-session-dialog-layout {
+    spacing: 12px;
     padding-left: 17px;
     &:rtl { padding-right: 17px; }
   }
@@ -301,7 +300,7 @@ StScrollBar {
   }
 
   .end-session-dialog-list-header {
-    font-weight: bold;
+    @extend %heading;
     &:rtl { text-align: right; }
   }
 
@@ -312,12 +311,11 @@ StScrollBar {
 
   .end-session-dialog-app-list-item-name,
   .end-session-dialog-session-list-item-name {
-    font-weight: bold;
+    @extend %heading;
   }
 
   .end-session-dialog-app-list-item-description {
     color: darken($fg_color,5%);
-    font-size: 10pt;
   }
 
 /* ShellMountOperation Dialogs */
@@ -373,11 +371,6 @@ StScrollBar {
     &:rtl { padding-left: 17px; }
   }
 
-  .mount-dialog-app-list-item-name {
-    font-size: 10pt;
-  }
-
-
 /* Password or Authentication Dialog */
 
 .prompt-dialog {
@@ -387,7 +380,7 @@ StScrollBar {
 
   .message-dialog-main-layout { spacing: 24px; padding: 10px; }
   .message-dialog-content { spacing: 16px; }
-  .message-dialog-title { color: lighten($fg_color,15%); }
+  .message-dialog-title { @extend %title-2; color: lighten($fg_color,15%); }
 }
 
   .prompt-dialog-description:rtl {
@@ -400,13 +393,11 @@ StScrollBar {
   }
 
   .prompt-dialog-error-label {
-    font-size: 10pt;
     color: $warning_color;
     padding-bottom: 8px;
   }
 
   .prompt-dialog-info-label {
-    font-size: 10pt;
     padding-bottom: 8px;
   }
 
@@ -415,7 +406,6 @@ StScrollBar {
   }
 
   .prompt-dialog-null-label {
-    font-size: 10pt;
     padding-bottom: 8px;
   }
 
@@ -471,7 +461,7 @@ StScrollBar {
   }
 
   .audio-selection-title {
-    font-weight: bold;
+    @extend %title-2;
     text-align: center;
   }
 
@@ -514,7 +504,7 @@ StScrollBar {
 .extension-dialog {
   @extend %bubble-panel;
   .message-dialog-main-layout { spacing: 24px; padding: 10px; }
-  .message-dialog-title { font-weight: normal; color: $fg_color; }
+  .message-dialog-title { @extend %title-2; }
 }
 
 /* Inhibit-Shortcuts Dialog */
@@ -555,9 +545,9 @@ StScrollBar {
     &:ltr { padding: .4em 1.75em .4em 0em; }
     &:rtl { padding: .4em 0em .4em 1.75em; }
     &:checked {
+      @extend %heading;
       background-color: $bg_color;
       box-shadow: inset 0 -1px 0px $_bubble_borders_color;
-      font-weight: bold;
     }
     &.selected {
       background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
@@ -628,7 +618,7 @@ StScrollBar {
   min-width: 64px;
   min-height: 64px;
 
-  .osd-monitor-label { font-size: 3em; }
+  .osd-monitor-label { @extend %title-1; }
   .level {
     height: 0.6em;
     -barlevel-height: 0.6em;
@@ -801,8 +791,8 @@ StScrollBar {
 /* TOP BAR */
 
 #panel {
+  @extend %heading;
   background-color: black;
-  font-weight: bold;
   height: 1.86em;
   font-feature-settings: "tnum";
 
@@ -834,9 +824,9 @@ StScrollBar {
   }
 
   .panel-button {
+    @extend %heading;
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
     color: #ccc;
 
     .app-menu-icon {
@@ -933,28 +923,28 @@ StScrollBar {
     }
 
     .datemenu-today-button .day-label {
+      @extend %heading;
     }
 
     .datemenu-today-button .date-label {
-      font-size: 1.5em;
-      font-weight: 300;
+      @extend %large-title;
     }
 
     .world-clocks-header,
     .weather-header,
-    .events-section-title {
+    .events-section-title,
+    .calendar-month-label {
+      @extend %heading;
       color: darken($fg_color,40%);
-      font-weight: bold;
     }
 
     .weather-header.location {
-      font-weight: normal;
-      font-size: 0.9em;
+      @extend %caption;
     }
 
     .world-clocks-grid,
     .weather-grid {
-      spacing-rows: 0.4em;
+      spacing-rows: 0.8em;
       spacing-columns: 0.8em;
     }
 
@@ -962,35 +952,26 @@ StScrollBar {
       spacing: 0.4em;
     }
 
-    .world-clocks-city {
-      font-weight: bold;
-      font-size: 0.9em;
-    }
-
     .world-clocks-time {
-      color: darken($fg_color,20%);
-      font-feature-settings: "tnum";
-      font-size: 1.2em;
+        font-feature-settings: "tnum";
     }
 
     .world-clocks-timezone {
-      color: $fg_color;
+      color: darken($fg_color,40%);
       font-feature-settings: "tnum";
-      font-size: 0.9em;
+      @extend %caption;
     }
 
     .weather-forecast-icon {
-      icon-size: 2.18em;
+      icon-size: 32px;
     }
 
     .weather-forecast-time {
+      @extend %caption;
       color: darken($fg_color,40%);
-      font-size: 0.8em;
     }
 
     .calendar-month-label {
-      color: lighten($fg_color,5%);
-      font-weight: bold;
       padding: 8px 0;
       &:focus {}
     }
@@ -1008,7 +989,7 @@ StScrollBar {
       }
 
     .calendar-day-base {
-      font-size: 80%;
+      @extend %caption;
       text-align: center;
       width: 2.4em; height: 2.4em;
       padding: 0.1em;
@@ -1022,9 +1003,8 @@ StScrollBar {
         border-color: transparent; //avoid jumparound due to today
       }
       &.calendar-day-heading {  //day of week heading
-        color: lighten($fg_color,5%);
-        margin-top: 1em;
-        font-size: 70%;
+        color: darken($fg_color,40%);
+//        margin-top: 1em;
       }
     }
       .calendar-day { //border collapse hack - see calendar.js
@@ -1039,14 +1019,15 @@ StScrollBar {
         color: $insensitive_fg_color;
       }
       .calendar-today {
-        font-weight: bold;
+        @extend %caption-heading;
         //color: lighten($fg_color,10%);
         //background-color: darken($bg_color,5%);
         border: 1px solid $_bubble_borders_color;
       }
       .calendar-day-with-events {
+        @extend %caption-heading;
         color: lighten($fg_color,10%);
-        font-weight: bold;
+
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
       }
       .calendar-other-month-day {
@@ -1054,8 +1035,7 @@ StScrollBar {
         opacity: 0.5;
       }
       .calendar-week-number {
-        font-size: 70%;
-        font-weight: bold;
+        @extend %caption-heading;
         width: 2.3em; height: 1.8em;
         border-radius: 2px;
         padding: 0.5em 0 0;
@@ -1112,11 +1092,11 @@ StScrollBar {
           }
 
           .message-secondary-bin > .event-time {
-            color: $fg_color;
-            font-size: 0.7em;
+            @extend %caption;
+            color: darken($fg_color,40%);
             /* HACK: the label should be baseline-aligned with a 1em label,
                      fake this with some bottom padding */
-            padding-bottom: 0.13em;
+           padding-bottom: 1px;
           }
 
           .message-secondary-bin > StIcon {
@@ -1284,17 +1264,16 @@ StScrollBar {
   .nm-dialog-airplane-box { spacing: 12px; }
 
   .nm-dialog-airplane-headline {
-    font-weight: bold;
+    @extend %heading;
     text-align: center;
   }
 
   .nm-dialog-airplane-text { color: $fg_color; }
   .nm-dialog-header-icon { icon-size: 32px; }
   .nm-dialog-scroll-view { border: 2px solid $borders_color; }
-  .nm-dialog-header { font-weight: bold; }
+  .nm-dialog-header { @extend %title-2; }
 
   .nm-dialog-item {
-    font-size: 110%;
     border-bottom: 1px solid $borders_color;
     padding: 12px;
     spacing: 20px;
@@ -1401,7 +1380,7 @@ StScrollBar {
 
   #dash {
     @extend %overview-panel;
-    font-size: 9pt;
+    @extend %caption;
     padding: 4px 0;
     border-radius: 0px 9px 9px 0px;
 
@@ -1616,9 +1595,9 @@ StScrollBar {
   border: none;
 }
 
+// Search status, like "Searching..." and "No results"
 %status_text {
-  font-size: 2em;
-  font-weight: bold;
+  @extend %large-title;
   color: $osd_fg_color;
 }
 
@@ -1627,8 +1606,12 @@ StScrollBar {
   .url-highlighter { link-color: lighten($selected_bg_color,10%); }
 
   // Banners
+  .message-body {
+    @extend %caption;
+    padding-top: 2px;
+  }
+
   .notification-banner {
-    font-size: 11pt;
     width: 34em;
     margin: 5px;
     border-radius: $medium-radius;
@@ -1638,7 +1621,7 @@ StScrollBar {
     &:hover { background: $bg_color; }
     &, &:focus, &:active {
       background-color: $bg_color;
-      .message-title { color: $fg_color }
+      .message-title { color: $fg_color; }
       .message-content { color: $fg_color; }
     }
 
@@ -1665,20 +1648,6 @@ StScrollBar {
       border: none;
     }
   }
-  .summary-source-counter {
-    font-size: 10pt;
-    font-weight: bold;
-    height: 1.6em; width: 1.6em;
-    -shell-counter-overlap-x: 3px;
-    -shell-counter-overlap-y: 3px;
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-    border: 2px solid $fg_color;
-    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
-  }
-
-  .secondary-icon { icon-size: 1.09em; }
 
   //chat bubbles
   .chat-body { spacing: 5px; }
@@ -1695,9 +1664,8 @@ StScrollBar {
     &:rtl { padding-left: 0; padding-right: 18pt; }
   }
   .chat-meta-message {
+    @extend %caption-heading;
     padding-left: 4px;
-    font-size: 9pt;
-    font-weight: bold;
     color: lighten($fg_color,18%);
     &:rtl { padding-left: 0; padding-right: 4px; }
   }
@@ -1983,8 +1951,7 @@ StScrollBar {
     }
   }
   .login-dialog-not-listed-label {
-    font-size: 90%;
-    font-weight: bold;
+    @extend %heading;
     color: darken($osd_fg_color,30%);
     padding-top: 1em;
   }
@@ -2013,8 +1980,7 @@ StScrollBar {
   .login-dialog-username,
   .user-widget-label {
     color: $osd_fg_color;
-    font-size: 120%;
-    font-weight: bold;
+    @extend %title-3;
     text-align: left;
     padding-left: 15px;
   }
@@ -2032,7 +1998,6 @@ StScrollBar {
 
   .login-dialog-prompt-label {
       color: darken($osd_fg_color, 20%);
-      font-size: 110%;
       padding-top: 1em;
   }
 
@@ -2104,7 +2069,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
 
 
 .screen-shield-notification-label {
-  font-weight: bold;
+  @extend %heading;
   padding: 0px 0px 0px 12px;
 }
 
@@ -2144,9 +2109,9 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   }
   .labels { spacing: 4px; }
   .notebook-tab {
+    @extend %heading;
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
-    font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
     padding-left: .3em;
@@ -2207,7 +2172,7 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
   }
 
   .lg-extension-name {
-      font-weight: bold;
+      @extend %heading;
   }
 
   .lg-extension-meta {
@@ -2220,3 +2185,39 @@ $_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
     border-radius: 4px;
     padding: 6px;
   }
+
+// text styles
+
+%large-title {
+  font-weight: 300;
+  font-size: 24pt;
+// letter-spacing: 0.2rem; this breaks the style
+}
+%title-1 {
+  font-weight: 800;
+  font-size: 20pt;
+}
+%title-2 {
+  font-weight: 800;
+  font-size: 15pt;
+}
+%title-3 {
+  font-weight: 700;
+  font-size: 15pt;
+}
+%title-4 {
+  font-weight: 700;
+  font-size: 13pt;
+}
+%heading {
+  font-weight: 700;
+  font-size: 11pt;
+}
+%caption-heading {
+  font-weight: 700;
+  font-size: 9pt;
+}
+%caption {
+  font-weight: 400;
+  font-size: 9pt;
+}

js/ui/components/networkAgent.js

@@ -310,7 +310,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
         case '802-11-wireless':
             wirelessSetting = this._connection.get_setting_wireless();
             ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
-            content.title = _("Authentication required by wireless network");
+            content.title = _("Authentication required");
             content.message = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
             this._getWirelessSecrets(content.secrets, wirelessSetting);
             break;
@@ -338,7 +338,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             // fall through
         case 'cdma':
         case 'bluetooth':
-            content.title = _("Mobile broadband network password");
+            content.title = _("Mobile broadband password");
             content.message = _("A password is required to connect to “%s”.").format(connectionSetting.get_id());
             this._getMobileSecrets(content.secrets, connectionType);
             break;
@@ -683,7 +683,7 @@ var NetworkAgent = class {
         case '802-11-wireless':
             let wirelessSetting = connection.get_setting_wireless();
             let ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
-            title = _("Authentication required by wireless network");
+            title = _("Authentication required");
             body = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
             break;
         case '802-3-ethernet':

js/ui/dialog.js

@@ -214,7 +214,10 @@ var MessageDialogContent = GObject.registerClass({
     }
 
     set icon(icon) {
-        Object.assign(this._icon, { gicon: icon, visible: icon != null });
+        this._icon.set({
+            gicon: icon,
+            visible: icon != null
+        });
         this.notify('icon');
     }
 
@@ -231,7 +234,10 @@ var MessageDialogContent = GObject.registerClass({
     }
 
     _setLabel(label, prop, value) {
-        Object.assign(label, { text: value || '', visible: value != null });
+        label.set({
+            text: value || '',
+            visible: value != null
+        });
         this.notify(prop);
     }
 

js/ui/extensionDownloader.js

@@ -1,8 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const { Clutter, Gio, GLib, GObject, Soup, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Pango, Soup, St } = imports.gi;
 
 const Config = imports.misc.config;
+const Dialog = imports.ui.dialog;
 const ExtensionUtils = imports.misc.extensionUtils;
 const ExtensionSystem = imports.ui.extensionSystem;
 const FileUtils = imports.misc.fileUtils;
@@ -194,19 +195,14 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
                            default: true
                          }]);
 
-        let message = _("Download and install “%s” from extensions.gnome.org?").format(info.name);
+        let content = new Dialog.MessageDialogContent({
+            title: _("Download and install “%s” from extensions.gnome.org?").format(info.name),
+            icon: new Gio.FileIcon({
+                file: Gio.File.new_for_uri(`${REPOSITORY_URL_BASE}${info.icon}`)
+            })
+        });
 
-        let box = new St.BoxLayout({ style_class: 'message-dialog-main-layout',
-                                     vertical: false });
-        this.contentLayout.add(box);
-
-        let gicon = new Gio.FileIcon({ file: Gio.File.new_for_uri(REPOSITORY_URL_BASE + info.icon) })
-        let icon = new St.Icon({ gicon: gicon });
-        box.add(icon);
-
-        let label = new St.Label({ style_class: 'message-dialog-title headline',
-                                   text: message });
-        box.add(label);
+        this.contentLayout.add(content);
     }
 
     _onCancelButtonPressed(button, event) {

js/ui/main.js

@@ -140,12 +140,12 @@ function start() {
 
 function _initializeUI() {
     // Ensure ShellWindowTracker and ShellAppUsage are initialized; this will
-    // also initialize ShellAppSystem first.  ShellAppSystem
+    // also initialize ShellAppSystem first. ShellAppSystem
     // needs to load all the .desktop files, and ShellWindowTracker
-    // will use those to associate with windows.  Right now
+    // will use those to associate with windows. Right now
     // the Monitor doesn't listen for installed app changes
     // and recalculate application associations, so to avoid
-    // races for now we initialize it here.  It's better to
+    // races for now we initialize it here. It's better to
     // be predictable anyways.
     Shell.WindowTracker.get_default();
     Shell.AppUsage.get_default();
@@ -157,8 +157,8 @@ function _initializeUI() {
     // Setup the stage hierarchy early
     layoutManager = new Layout.LayoutManager();
 
-    // Various parts of the codebase still refers to Main.uiGroup
-    // instead using the layoutManager.  This keeps that code
+    // Various parts of the codebase still refer to Main.uiGroup
+    // instead of using the layoutManager. This keeps that code
     // working until it's updated.
     uiGroup = layoutManager.uiGroup;
 
@@ -322,7 +322,7 @@ function getThemeStylesheet() {
 /**
  * setThemeStylesheet:
  * @cssStylesheet: A file path that contains the theme CSS,
- *                  set it to null to use the default
+ *                 set it to null to use the default
  *
  * Set the theme CSS file that the shell will load
  */
@@ -422,15 +422,15 @@ function _findModal(actor) {
  *
  * @params may be used to provide the following parameters:
  *  - timestamp: used to associate the call with a specific user initiated
- *               event.  If not provided then the value of
+ *               event. If not provided then the value of
  *               global.get_current_time() is assumed.
  *
  *  - options: Meta.ModalOptions flags to indicate that the pointer is
  *             already grabbed
  *
  *  - actionMode: used to set the current Shell.ActionMode to filter
- *                    global keybindings; the default of NONE will filter
- *                    out all keybindings
+ *                global keybindings; the default of NONE will filter
+ *                out all keybindings
  *
  * Returns: true iff we successfully acquired a grab or already had one
  */
@@ -476,15 +476,15 @@ function pushModal(actor, params) {
 
 /**
  * popModal:
- * @actor: #ClutterActor passed to original invocation of pushModal().
+ * @actor: #ClutterActor passed to original invocation of pushModal()
  * @timestamp: optional timestamp
  *
- * Reverse the effect of pushModal().  If this invocation is undoing
+ * Reverse the effect of pushModal(). If this invocation is undoing
  * the topmost invocation, then the focus will be restored to the
  * previous focus at the time when pushModal() was invoked.
  *
  * @timestamp is optionally used to associate the call with a specific user
- * initiated event.  If not provided then the value of
+ * initiated event. If not provided then the value of
  * global.get_current_time() is assumed.
  */
 function popModal(actor, timestamp) {
@@ -646,7 +646,7 @@ function _queueBeforeRedraw(workId) {
  *
  * This function sets up a callback to be invoked when either the
  * given actor is mapped, or after some period of time when the machine
- * is idle.  This is useful if your actor isn't always visible on the
+ * is idle. This is useful if your actor isn't always visible on the
  * screen (for example, all actors in the overview), and you don't want
  * to consume resources updating if the actor isn't actually going to be
  * displaying to the user.
@@ -682,7 +682,7 @@ function initializeDeferredWork(actor, callback, props) {
  * @workId: work identifier
  *
  * Ensure that the work identified by @workId will be
- * run on map or timeout.  You should call this function
+ * run on map or timeout. You should call this function
  * for example when data being displayed by the actor has
  * changed.
  */

js/ui/messageTray.js

@@ -616,77 +616,6 @@ class SourceActor extends St.Widget {
     }
 });
 
-var SourceActorWithLabel = GObject.registerClass(
-class SourceActorWithLabel extends SourceActor {
-    _init(source, size) {
-        super._init(source, size);
-
-        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,
-                                        layout_manager: new Clutter.BinLayout() });
-        this._counterBin.hide();
-
-        this._counterBin.connect('style-changed', () => {
-            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.add_actor(this._counterBin);
-
-        this._countUpdatedId = this._source.connect('count-updated', this._updateCount.bind(this));
-        this._updateCount();
-
-        this.connect('destroy', () => {
-            this._source.disconnect(this._countUpdatedId);
-        });
-    }
-
-    vfunc_allocate(box, flags) {
-        super.vfunc_allocate(box, flags);
-
-        let childBox = new Clutter.ActorBox();
-
-        let [minWidth, minHeight, naturalWidth, naturalHeight] = this._counterBin.get_preferred_size();
-        let direction = this.get_text_direction();
-
-        if (direction == Clutter.TextDirection.LTR) {
-            // allocate on the right in LTR
-            childBox.x1 = box.x2 - naturalWidth;
-            childBox.x2 = box.x2;
-        } else {
-            // allocate on the left in RTL
-            childBox.x1 = 0;
-            childBox.x2 = naturalWidth;
-        }
-
-        childBox.y1 = box.y2 - naturalHeight;
-        childBox.y2 = box.y2;
-
-        this._counterBin.allocate(childBox, flags);
-    }
-
-    _updateCount() {
-        if (this._actorDestroyed)
-            return;
-
-        this._counterBin.visible = this._source.countVisible;
-
-        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);
-    }
-});
-
 var Source = class Source {
     constructor(title, iconName) {
         this.SOURCE_ICON_SIZE = 48;

js/ui/windowManager.js

@@ -1060,35 +1060,35 @@ var WindowManager = class {
                                                            false, -1, 1);
 
         let allowedModes = Shell.ActionMode.NORMAL;
-        let gesture = new WorkspaceSwitchAction(allowedModes);
-        gesture.connect('motion', this._switchWorkspaceMotion.bind(this));
-        gesture.connect('activated', this._actionSwitchWorkspace.bind(this));
-        gesture.connect('cancel', this._switchWorkspaceCancel.bind(this));
-        global.stage.add_action(gesture);
+        let workspaceSwitchAction = new WorkspaceSwitchAction(allowedModes);
+        workspaceSwitchAction.connect('motion', this._switchWorkspaceMotion.bind(this));
+        workspaceSwitchAction.connect('activated', this._actionSwitchWorkspace.bind(this));
+        workspaceSwitchAction.connect('cancel', this._switchWorkspaceCancel.bind(this));
+        global.stage.add_action(workspaceSwitchAction);
 
         // This is not a normal Clutter.GestureAction, doesn't need add_action()
-        gesture = new TouchpadWorkspaceSwitchAction(global.stage, allowedModes);
-        gesture.connect('motion', this._switchWorkspaceMotion.bind(this));
-        gesture.connect('activated', this._actionSwitchWorkspace.bind(this));
-        gesture.connect('cancel', this._switchWorkspaceCancel.bind(this));
+        let touchpadSwitchAction = new TouchpadWorkspaceSwitchAction(global.stage, allowedModes);
+        touchpadSwitchAction.connect('motion', this._switchWorkspaceMotion.bind(this));
+        touchpadSwitchAction.connect('activated', this._actionSwitchWorkspace.bind(this));
+        touchpadSwitchAction.connect('cancel', this._switchWorkspaceCancel.bind(this));
 
-        gesture = new AppSwitchAction();
-        gesture.connect('activated', this._switchApp.bind(this));
-        global.stage.add_action(gesture);
+        let appSwitchAction = new AppSwitchAction();
+        appSwitchAction.connect('activated', this._switchApp.bind(this));
+        global.stage.add_action(appSwitchAction);
 
         let mode = Shell.ActionMode.ALL & ~Shell.ActionMode.LOCK_SCREEN;
-        gesture = new EdgeDragAction.EdgeDragAction(St.Side.BOTTOM, mode);
-        gesture.connect('activated', () => {
+        let bottomDragAction = new EdgeDragAction.EdgeDragAction(St.Side.BOTTOM, mode);
+        bottomDragAction.connect('activated', () => {
             Main.keyboard.show(Main.layoutManager.bottomIndex);
         });
         Main.layoutManager.connect('keyboard-visible-changed', (manager, visible) => {
-            gesture.cancel();
-            gesture.set_enabled(!visible);
+            bottomDragAction.cancel();
+            bottomDragAction.set_enabled(!visible);
         });
-        global.stage.add_action(gesture);
+        global.stage.add_action(bottomDragAction);
 
-        gesture = new EdgeDragAction.EdgeDragAction(St.Side.TOP, mode);
-        gesture.connect('activated',  () => {
+        let topDragAction = new EdgeDragAction.EdgeDragAction(St.Side.TOP, mode);
+        topDragAction.connect('activated',  () => {
             let currentWindow = global.display.focus_window;
             if (currentWindow)
                 currentWindow.unmake_fullscreen();
@@ -1096,13 +1096,13 @@ var WindowManager = class {
 
         let updateUnfullscreenGesture = () => {
             let currentWindow = global.display.focus_window;
-            gesture.enabled = currentWindow && currentWindow.is_fullscreen();
+            topDragAction.enabled = currentWindow && currentWindow.is_fullscreen();
         }
 
         global.display.connect('notify::focus-window', updateUnfullscreenGesture);
         global.display.connect('in-fullscreen-changed', updateUnfullscreenGesture);
 
-        global.stage.add_action(gesture);
+        global.stage.add_action(topDragAction);
     }
 
     _showPadOsd(display, device, settings, imagePath, editionMode, monitorIndex) {