[gnome-shell] dateMenu: Align time strings in the World Clocks section

[Marge Bot <marge-bot src gnome org>]

commit 3290ef4eb662ddd8325afb66346f238fc22f2d14
Author: Maksym Hazevych <dpadar protonmail com>
Date:   Sat May 7 18:27:08 2022 +0300

    dateMenu: Align time strings in the World Clocks section
    
    The problem is that " 9:59 AM" (notice the space at the beginning) and
    "12:59 AM" strings, when centred, look misaligned —
    strings padded with a space look off to the right by nearly
    half a character. This happens because the font feature "tnum",
    used to make numbers monospace, doesn't work on spaces.
    
    The commit overcomes this by aligning time labels to the end.
    However, this won't work for locales with AM/PM strings of different
    lengths, so they are aligned to the start instead to minimise offset.
    
    It's too complex to know whether the used locale has different
    AM/PM string lengths. Instead, every time the time changes, it
    determines whether all the time labels have the same amount of characters.
    
    Fixes #5438
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2294>

 js/ui/dateMenu.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)
---
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index bd363f3232..f3cb006139 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -418,7 +418,10 @@ class WorldClocksSection extends St.Button {
                 x_expand: true,
             });
 
-            let time = new St.Label({ style_class: 'world-clocks-time' });
+            let time = new St.Label({
+                style_class: 'world-clocks-time',
+                x_align: Clutter.ActorAlign.END,
+            });
 
             const tz = new St.Label({
                 style_class: 'world-clocks-timezone',
@@ -484,10 +487,25 @@ class WorldClocksSection extends St.Button {
     }
 
     _updateTimeLabels() {
+        let differentLength = false;
+        let lastLength;
         for (let i = 0; i < this._locations.length; i++) {
             let l = this._locations[i];
             const now = GLib.DateTime.new_now(l.location.get_timezone());
-            l.timeLabel.text = Util.formatTime(now, { timeOnly: true });
+            const text = Util.formatTime(now, { timeOnly: true });
+            l.timeLabel.text = text;
+
+            if (differentLength)
+                continue;
+            if (lastLength === undefined)
+                lastLength = text.length;
+            differentLength = lastLength !== text.length;
+        }
+
+        for (let i = 0; i < this._locations.length; i++) {
+            this._locations[i].timeLabel.x_align = differentLength
+                ? Clutter.ActorAlign.START
+                : Clutter.ActorAlign.END;
         }
     }