[gnome-shell] dialogs: Use a smaller font-size if the title width exceeds the space

[Florian Müllner <fmuellner src gnome org>]

commit 80a869e7686adf772512069d7818bda0379190d8
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Mon Feb 17 19:59:31 2020 +0100

    dialogs: Use a smaller font-size if the title width exceeds the space
    
    Since quite a few strings of dialogs provided by external programs are
    not updated yet and the string freeze is already in effect, make sure we
    don't break those dialogs by stripping aways large parts of the
    headline.
    
    To do that, detect if the title label is larger than the available width
    and if it is, switch to a smaller font-size of 13pt. This makes sure we
    still show about the same number of characters in the headline as we did
    in previous releases.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/1012

 data/theme/gnome-shell-sass/widgets/_dialogs.scss |  5 ++++
 js/ui/dialog.js                                   | 36 ++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 6ee2b36ae2..229c54af2f 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -42,6 +42,11 @@
     text-align: center;
     font-size: 18pt;
     font-weight: 800;
+
+    &.leightweight {
+      font-size: 13pt;
+      font-weight: 800;
+    }
   }
   .message-dialog-description { text-align: center; }
 }
diff --git a/js/ui/dialog.js b/js/ui/dialog.js
index 2aa7fc37bb..694da4e151 100644
--- a/js/ui/dialog.js
+++ b/js/ui/dialog.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */
 
-const { Clutter, GObject, Pango, St } = imports.gi;
+const { Clutter, GObject, Meta, Pango, St } = imports.gi;
 
 function _setLabel(label, value) {
     label.set({
@@ -179,10 +179,20 @@ var MessageDialogContent = GObject.registerClass({
         };
         super._init(Object.assign(defaultParams, params));
 
+        this.connect('notify::size', this._updateTitleStyle.bind(this));
+        this.connect('destroy', this._onDestroy.bind(this));
+
         this.add_child(this._title);
         this.add_child(this._description);
     }
 
+    _onDestroy() {
+        if (this._updateTitleStyleLater) {
+            Meta.later_remove(this._updateTitleStyleLater);
+            delete this._updateTitleStyleLater;
+        }
+    }
+
     get title() {
         return this._title.text;
     }
@@ -191,8 +201,32 @@ var MessageDialogContent = GObject.registerClass({
         return this._description.text;
     }
 
+    _updateTitleStyle() {
+        if (!this._title.mapped)
+            return;
+
+        this._title.ensure_style();
+        const [, titleNatWidth] = this._title.get_preferred_width(-1);
+
+        if (titleNatWidth > this.width) {
+            if (this._updateTitleStyleLater)
+                return;
+
+            this._updateTitleStyleLater = Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
+                this._updateTitleStyleLater = 0;
+                this._title.add_style_class_name('leightweight');
+                return false;
+            });
+        }
+
+    }
+
     set title(title) {
         _setLabel(this._title, title);
+
+        this._title.remove_style_class_name('leightweight');
+        this._updateTitleStyle();
+
         this.notify('title');
     }