Merge pull request #14897 from atom/as-jr-fix-not-updating-custom-title-bar

Ensure custom title bar is always updated when document.title changes

spec/title-bar-spec.coffee

@@ -1,29 +0,0 @@
-TitleBar = require '../src/title-bar'
-
-describe "TitleBar", ->
-  it "updates the title based on document.title when the active pane item changes", ->
-    titleBar = new TitleBar({
-      workspace: atom.workspace,
-      themes: atom.themes,
-      applicationDelegate: atom.applicationDelegate,
-    })
-
-    expect(titleBar.element.querySelector('.title').textContent).toBe document.title
-    initialTitle = document.title
-
-    atom.workspace.getActivePane().activateItem({
-      getTitle: -> 'Test Title'
-    })
-
-    expect(document.title).not.toBe(initialTitle)
-    expect(titleBar.element.querySelector('.title').textContent).toBe document.title
-
-  it "can update the sheet offset for the current window based on its height", ->
-    titleBar = new TitleBar({
-      workspace: atom.workspace,
-      themes: atom.themes,
-      applicationDelegate: atom.applicationDelegate,
-    })
-    expect(->
-      titleBar.updateWindowSheetOffset()
-    ).not.toThrow()

spec/title-bar-spec.js

@@ -0,0 +1,57 @@
+const TitleBar = require('../src/title-bar')
+const temp = require('temp')
+
+describe('TitleBar', () => {
+  it('updates its title when document.title changes', () => {
+    const titleBar = new TitleBar({
+      workspace: atom.workspace,
+      themes: atom.themes,
+      applicationDelegate: atom.applicationDelegate
+    })
+    expect(titleBar.element.querySelector('.title').textContent).toBe(document.title)
+
+    const paneItem = new FakePaneItem('Title 1')
+    atom.workspace.getActivePane().activateItem(paneItem)
+    expect(document.title).toMatch('Title 1')
+    expect(titleBar.element.querySelector('.title').textContent).toBe(document.title)
+
+    paneItem.setTitle('Title 2')
+    expect(document.title).toMatch('Title 2')
+    expect(titleBar.element.querySelector('.title').textContent).toBe(document.title)
+
+    atom.project.setPaths([temp.mkdirSync('project-1')])
+    expect(document.title).toMatch('project-1')
+    expect(titleBar.element.querySelector('.title').textContent).toBe(document.title)
+  })
+
+  it('can update the sheet offset for the current window based on its height', () => {
+    const titleBar = new TitleBar({
+      workspace: atom.workspace,
+      themes: atom.themes,
+      applicationDelegate: atom.applicationDelegate
+    })
+    expect(() => titleBar.updateWindowSheetOffset()).not.toThrow()
+  })
+})
+
+class FakePaneItem {
+  constructor (title) {
+    this.title = title
+  }
+
+  getTitle () {
+    return this.title
+  }
+
+  onDidChangeTitle (callback) {
+    this.didChangeTitleCallback = callback
+    return {
+      dispose: () => { this.didChangeTitleCallback = null }
+    }
+  }
+
+  setTitle (title) {
+    this.title = title
+    if (this.didChangeTitleCallback) this.didChangeTitleCallback(title)
+  }
+}

src/title-bar.coffee

@@ -1,34 +0,0 @@
-module.exports =
-class TitleBar
-  constructor: ({@workspace, @themes, @applicationDelegate}) ->
-    @element = document.createElement('div')
-    @element.classList.add('title-bar')
-
-    @titleElement = document.createElement('div')
-    @titleElement.classList.add('title')
-    @element.appendChild(@titleElement)
-
-    @element.addEventListener 'dblclick', @dblclickHandler
-
-    @workspace.onDidChangeActivePaneItem => @updateTitle()
-    @themes.onDidChangeActiveThemes => @updateWindowSheetOffset()
-
-    @updateTitle()
-    @updateWindowSheetOffset()
-
-  dblclickHandler: =>
-    # User preference deciding which action to take on a title bar double-click
-    switch @applicationDelegate.getUserDefault('AppleActionOnDoubleClick', 'string')
-      when 'Minimize'
-        @applicationDelegate.minimizeWindow()
-      when 'Maximize'
-        if @applicationDelegate.isWindowMaximized()
-          @applicationDelegate.unmaximizeWindow()
-        else
-          @applicationDelegate.maximizeWindow()
-
-  updateTitle: ->
-    @titleElement.textContent = document.title
-
-  updateWindowSheetOffset: ->
-    @applicationDelegate.getCurrentWindow().setSheetOffset(@element.offsetHeight)

src/title-bar.js

@@ -0,0 +1,47 @@
+module.exports =
+class TitleBar {
+  constructor ({workspace, themes, applicationDelegate}) {
+    this.dblclickHandler = this.dblclickHandler.bind(this)
+    this.workspace = workspace
+    this.themes = themes
+    this.applicationDelegate = applicationDelegate
+    this.element = document.createElement('div')
+    this.element.classList.add('title-bar')
+
+    this.titleElement = document.createElement('div')
+    this.titleElement.classList.add('title')
+    this.element.appendChild(this.titleElement)
+
+    this.element.addEventListener('dblclick', this.dblclickHandler)
+
+    this.workspace.onDidChangeWindowTitle(() => this.updateTitle())
+    this.themes.onDidChangeActiveThemes(() => this.updateWindowSheetOffset())
+
+    this.updateTitle()
+    this.updateWindowSheetOffset()
+  }
+
+  dblclickHandler () {
+    // User preference deciding which action to take on a title bar double-click
+    switch (this.applicationDelegate.getUserDefault('AppleActionOnDoubleClick', 'string')) {
+      case 'Minimize':
+        this.applicationDelegate.minimizeWindow()
+        break
+      case 'Maximize':
+        if (this.applicationDelegate.isWindowMaximized()) {
+          this.applicationDelegate.unmaximizeWindow()
+        } else {
+          this.applicationDelegate.maximizeWindow()
+        }
+        break
+    }
+  }
+
+  updateTitle () {
+    this.titleElement.textContent = document.title
+  }
+
+  updateWindowSheetOffset () {
+    this.applicationDelegate.getCurrentWindow().setSheetOffset(this.element.offsetHeight)
+  }
+}

src/workspace.js

@@ -587,6 +587,7 @@ module.exports = class Workspace extends Model {
 
     document.title = titleParts.join(' \u2014 ')
     this.applicationDelegate.setRepresentedFilename(representedPath)
+    this.emitter.emit('did-change-window-title')
   }
 
   // On macOS, fades the application window's proxy icon when the current file
@@ -864,6 +865,10 @@ module.exports = class Workspace extends Model {
     return this.emitter.on('did-add-text-editor', callback)
   }
 
+  onDidChangeWindowTitle (callback) {
+    return this.emitter.on('did-change-window-title', callback)
+  }
+
   /*
   Section: Opening
   */