Fix badge numbers on 3.36

appIcons.js

@@ -240,9 +240,9 @@ var taskbarAppIcon = Utils.defineClass({
 
         this.forcedOverview = false;
 
-        this._numberOverlay();
-
         this._progressIndicator = new Progress.ProgressIndicator(this, panel.progressManager);
+
+        this._numberOverlay();
     },
 
     getDragActor: function() {
@@ -1145,35 +1145,44 @@ var taskbarAppIcon = Utils.defineClass({
 
     _numberOverlay: function() {
         // Add label for a Hot-Key visual aid
-        this._numberOverlayLabel = new St.Label();
+        this._numberOverlayLabel = new St.Label({ style_class: 'badge' });
         this._numberOverlayBin = new St.Bin({
-            child: this._numberOverlayLabel,
-            x_align: St.Align.START, y_align: St.Align.START,
-            x_expand: true, y_expand: true
+            child: this._numberOverlayLabel, y: 2
         });
         this._numberOverlayLabel.add_style_class_name('number-overlay');
         this._numberOverlayOrder = -1;
         this._numberOverlayBin.hide();
 
-        this._iconContainer.add_child(this._numberOverlayBin);
-
+        this._dtpIconContainer.add_child(this._numberOverlayBin);
     },
 
-    updateNumberOverlay: function() {
+    updateHotkeyNumberOverlay: function() {
+        this.updateNumberOverlay(this._numberOverlayBin, true);
+    },
+
+    updateNumberOverlay: function(bin, fixedSize) {
         // We apply an overall scale factor that might come from a HiDPI monitor.
         // Clutter dimensions are in physical pixels, but CSS measures are in logical
         // pixels, so make sure to consider the scale.
         let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
         // Set the font size to something smaller than the whole icon so it is
         // still visible. The border radius is large to make the shape circular
-        let [minWidth, natWidth] = this._iconContainer.get_preferred_width(-1);
-        let font_size =  Math.round(Math.max(12, 0.3*natWidth) / scaleFactor);
-        let size = Math.round(font_size*1.2);
-        this._numberOverlayLabel.set_style(
-           'font-size: ' + font_size + 'px;' +
-           'border-radius: ' + this.icon.iconSize + 'px;' +
-           'width: ' + size + 'px; height: ' + size +'px;'
-        );
+        let [minWidth, natWidth] = this._dtpIconContainer.get_preferred_width(-1);
+        let font_size =  Math.round(Math.max(12, 0.3 * natWidth) / scaleFactor);
+        let size = Math.round(font_size * 1.3);
+        let label = bin.child;
+        let style = 'font-size: ' + font_size + 'px;' +
+                    'border-radius: ' + this.icon.iconSize + 'px;' +
+                    'height: ' + size +'px;';
+
+        if (fixedSize || label.get_text().length == 1) {
+            style += 'width: ' + size + 'px;';
+        } else {
+            style += 'padding: 0 2px;';
+        }
+
+        bin.x = fixedSize ? natWidth - size - 2 : 2;
+        label.set_style(style);
     },
 
     setNumberOverlay: function(number) {

progress.js

@@ -280,18 +280,16 @@ var ProgressIndicator = Utils.defineClass({
             this._signalsHandler.destroy();
         });          
 
-        this._notificationBadgeLabel = new St.Label();
+        this._notificationBadgeLabel = new St.Label({ style_class: 'badge' });
         this._notificationBadgeBin = new St.Bin({
-            child: this._notificationBadgeLabel,
-            x_align: St.Align.END, y_align: St.Align.START,
-            x_expand: true, y_expand: true
+            child: this._notificationBadgeLabel, y: 2, x: 2
         });
         this._notificationBadgeLabel.add_style_class_name('notification-badge');
         this._notificationBadgeCount = 0;
         this._notificationBadgeBin.hide();
 
-        this._source._iconContainer.add_child(this._notificationBadgeBin);
-        this._source._iconContainer.connect('allocation-changed', this.updateNotificationBadge.bind(this));
+        this._source._dtpIconContainer.add_child(this._notificationBadgeBin);
+        this._source._dtpIconContainer.connect('allocation-changed', this.updateNotificationBadge.bind(this));
 
         this._progressManagerEntries = [];
         this._progressManager.lookupById(this._source.app.id).forEach(
@@ -334,18 +332,7 @@ var ProgressIndicator = Utils.defineClass({
     },
 
     updateNotificationBadge: function() {
-        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
-        let [minWidth, natWidth] = this._source._iconContainer.get_preferred_width(-1);
-        let logicalNatWidth = natWidth / scaleFactor;
-        let font_size = Math.max(10, Math.round(logicalNatWidth / 5));
-        let margin_left = Math.round(logicalNatWidth / 4);
-
-        this._notificationBadgeLabel.set_style(
-           'font-size: ' + font_size + 'px;' +
-           'margin-left: ' + margin_left + 'px;'
-        );
-
-        this._notificationBadgeBin.width = Math.round(logicalNatWidth - margin_left);
+        this._source.updateNumberOverlay(this._notificationBadgeBin);
         this._notificationBadgeLabel.clutter_text.ellipsize = Pango.EllipsizeMode.MIDDLE;
     },
 

stylesheet.css

@@ -59,23 +59,6 @@
 	margin-bottom: 0;
 }
 
-#dashtopanelScrollview .notification-badge {
-    color: rgba(255,255,255,1);
-    background-color: rgba(255,0,0,1.0);
-    padding: 0.2em 0.5em;
-    border-radius: 1em;
-    font-weight: bold;
-    text-align: center;
-    margin: 2px;
-}
-
-#dashtopanelScrollview .progress-bar {
-    /* Customization of the progress bar style, e.g.:
-      -progress-bar-background: rgba(0.8, 0.8, 0.8, 1);
-      -progress-bar-border: rgba(0.9, 0.9, 0.9, 1);
-    */
-}
-
 #dashtopanelTaskbar .scrollview-fade {
     background-gradient-end: rgba(0, 0, 0, 0);
 }
@@ -139,9 +122,23 @@
 .panel-corner:active, .panel-corner:overview, .panel-corner:focus {
     -panel-corner-border-color: rgba(0, 0, 0, .001);
 }
-
-.number-overlay {
-        background-color: rgba(0,0,0,0.8);
-        color: rgba(256, 256, 256, 1);
-        text-align: center;
+#dashtopanelScrollview .badge {
+	color: rgba(255, 255, 255, 1);
+	font-weight: bold;
+	text-align: center;
+}
+
+#dashtopanelScrollview .number-overlay {
+	background-color: rgba(0,0,0,0.8);
+}
+
+#dashtopanelScrollview .notification-badge {
+    background-color: rgba(255,0,0,0.8);
+}
+
+#dashtopanelScrollview .progress-bar {
+    /* Customization of the progress bar style, e.g.:
+      -progress-bar-background: rgba(0.8, 0.8, 0.8, 1);
+      -progress-bar-border: rgba(0.9, 0.9, 0.9, 1);
+    */
 }

taskbar.js

@@ -913,7 +913,7 @@ var taskbar = Utils.defineClass({
                 icon.setNumberOverlay(-1);
             }
 
-            icon.updateNumberOverlay();
+            icon.updateHotkeyNumberOverlay();
         });
 
         if (Me.settings.get_boolean('hot-keys') &&