[polari] ui: Use a custom title widget in header bar

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

commit 37116a816ec62092e122e24b32581309533d8f64
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Oct 12 03:01:51 2013 +0200

    ui: Use a custom title widget in header bar
    
    GtkHeaderBar's title/subtitle behavior is very close to what we want,
    except that it does not allow markup for either property. However as
    channel topics frequently contain URLs, this is something we depend on
    in order to display URLs as clickable links, so replace GtkHeaderBar's
    default title with a custom widget which replicates the built-in
    behavior, but parses markup in subtitles.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=709889

 data/resources/main-window.ui |   68 +++++++++++++++++++++++++++++++++++++++++
 src/mainWindow.js             |   12 ++++++-
 2 files changed, 78 insertions(+), 2 deletions(-)
---
diff --git a/data/resources/main-window.ui b/data/resources/main-window.ui
index f1a5db4..ac3ffe9 100644
--- a/data/resources/main-window.ui
+++ b/data/resources/main-window.ui
@@ -105,6 +105,74 @@
               <class name="polari-titlebar-right"/>
               <class name="titlebar"/>
             </style>
+            <!-- Use a custom title widget to enable markup for subtitles
+                 (for URLs in channel topics); other than that, we want
+                 the default GtkHeaderBar behavior, e.g. the subtitle may
+                 be hidden, but is always included in the size request.
+                 We replicate this by using a stack which will only ever show
+                 its first child, but still consider the second one's size -->
+            <child type="title">
+              <object class="GtkStack" id="stack1">
+                <property name="visible">True</property>
+                <child>
+                  <object class="GtkBox" id="box5">
+                    <property name="visible">True</property>
+                    <property name="orientation">vertical</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkLabel" id="title_label">
+                        <property name="visible">True</property>
+                        <property name="single_line_mode">True</property>
+                        <property name="ellipsize">end</property>
+                        <style>
+                          <class name="title"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="subtitle_label">
+                        <property name="visible">True</property>
+                        <property name="single_line_mode">True</property>
+                        <property name="ellipsize">end</property>
+                        <property name="use_markup">True</property>
+                        <style>
+                          <class name="subtitle"/>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox" id="box7">
+                    <property name="visible">True</property>
+                    <property name="orientation">vertical</property>
+                    <child>
+                      <object class="GtkLabel" id="label3">
+                        <property name="visible">True</property>
+                        <property name="single_line_mode">True</property>
+                        <property name="ellipsize">end</property>
+                        <style>
+                          <class name="title"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="label4">
+                        <property name="visible">True</property>
+                        <property name="single_line_mode">True</property>
+                        <property name="ellipsize">end</property>
+                        <property name="use_markup">True</property>
+                        <style>
+                          <class name="subtitle"/>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
             <child>
               <object class="GtkLabel" id="label1">
                 <property name="visible">True</property>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index d997cbd..d9e6e87 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -64,6 +64,9 @@ const MainWindow = new Lang.Class({
         this._titlebarRight = builder.get_object('titlebar_right');
         this._titlebarLeft = builder.get_object('titlebar_left');
 
+        this._titleLabel = builder.get_object('title_label');
+        this._subtitleLabel = builder.get_object('subtitle_label');
+
         this._selectionRevealer = builder.get_object('selection_toolbar_revealer');
         this._showUserListButton = builder.get_object('show_user_list_button');
         this._revealer = builder.get_object('room_list_revealer');
@@ -367,8 +370,13 @@ const MainWindow = new Lang.Class({
     },
 
     _updateTitlebar: function() {
-        this._titlebarRight.title = this._room ? this._room.display_name : null;
-        this._titlebarRight.subtitle = this._room ? this._room.topic : null;
+        let subtitle = '';
+        if (this._room && this._room.topic)
+            subtitle = GLib.markup_escape_text(this._room.topic, -1);
+        this._subtitleLabel.label = subtitle;
+        this._subtitleLabel.visible = subtitle.length > 0;
+
+        this._titleLabel.label = this._room ? this._room.display_name : null;
     },
 
     _updateNick: function() {