Merge pull request #12295 from atom/ns-custom-window-title-bar

Continued: replace OSX window title bar with custom title-bar

spec/title-bar-spec.coffee

@@ -0,0 +1,29 @@
+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/window-event-handler-spec.coffee

@@ -206,6 +206,7 @@ describe "WindowEventHandler", ->
       webContentsSpy = jasmine.createSpyObj("webContents", ["copy", "paste"])
       spyOn(atom.applicationDelegate, "getCurrentWindow").andReturn({
         webContents: webContentsSpy
+        on: ->
       })
 
       nativeKeyBindingsInput = document.createElement("input")

src/atom-environment.coffee

@@ -31,6 +31,7 @@ ContextMenuManager = require './context-menu-manager'
 CommandInstaller = require './command-installer'
 Clipboard = require './clipboard'
 Project = require './project'
+TitleBar = require './title-bar'
 Workspace = require './workspace'
 PanelContainer = require './panel-container'
 Panel = require './panel'
@@ -193,6 +194,7 @@ class AtomEnvironment extends Model
       @config, @project, packageManager: @packages, grammarRegistry: @grammars, deserializerManager: @deserializers,
       notificationManager: @notifications, @applicationDelegate, @clipboard, viewRegistry: @views, assert: @assert.bind(this)
     })
+
     @themes.workspace = @workspace
 
     @textEditors = new TextEditorRegistry
@@ -550,10 +552,6 @@ class AtomEnvironment extends Model
   # Extended: Set the full screen state of the current window.
   setFullScreen: (fullScreen=false) ->
     @applicationDelegate.setWindowFullScreen(fullScreen)
-    if fullScreen
-      @document.body.classList.add("fullscreen")
-    else
-      @document.body.classList.remove("fullscreen")
 
   # Extended: Toggle the full screen state of the current window.
   toggleFullScreen: ->
@@ -679,6 +677,9 @@ class AtomEnvironment extends Model
         @deserialize(state) if state?
         @deserializeTimings.atom = Date.now() - startTime
 
+        if process.platform is 'darwin' and @config.get('core.useCustomTitleBar')
+          @workspace.addHeaderPanel({item: new TitleBar({@workspace, @themes, @applicationDelegate})})
+
         @document.body.appendChild(@views.getView(@workspace))
         @backgroundStylesheet?.remove()
 

src/config-schema.coffee

@@ -266,3 +266,9 @@ if process.platform in ['win32', 'linux']
     type: 'boolean'
     default: false
     description: 'Automatically hide the menu bar and toggle it by pressing Alt. This is only supported on Windows & Linux.'
+
+if process.platform is 'darwin'
+  module.exports.core.properties.useCustomTitleBar =
+    type: 'boolean'
+    default: false
+    description: 'Use custom, theme-aware title-bar.<br />Note: Note: This currently does not include a proxy icon.<br />This setting will require a relaunch of Atom to take effect.'

src/main-process/atom-application.coffee

@@ -76,6 +76,8 @@ class AtomApplication
     @config.setSchema null, {type: 'object', properties: _.clone(require('../config-schema'))}
     @config.load()
 
+    @config.onDidChange 'core.useCustomTitleBar', @promptForRelaunch
+
     @autoUpdateManager = new AutoUpdateManager(@version, options.test, @resourcePath, @config)
     @applicationMenu = new ApplicationMenu(@version, @autoUpdateManager)
     @atomProtocolHandler = new AtomProtocolHandler(@resourcePath, @safeMode)
@@ -87,6 +89,7 @@ class AtomApplication
     @setupDockMenu()
     @storageFolder = new StorageFolder(process.env.ATOM_HOME)
 
+
     if options.pathsToOpen?.length > 0 or options.urlsToOpen?.length > 0 or options.test
       @openWithOptions(options)
     else
@@ -706,3 +709,15 @@ class AtomApplication
       openOptions.defaultPath = path
 
     dialog.showOpenDialog(parentWindow, openOptions, callback)
+
+  promptForRelaunch: ->
+    chosen = dialog.showMessageBox BrowserWindow.getFocusedWindow(),
+      type: 'warning'
+      title: 'Relaunch required'
+      message: "You will need to relaunch Atom for this change to take effect."
+      buttons: ['Quit Atom', 'Cancel']
+    if chosen is 0
+      # once we're using electron v.1.2.2
+      # app.relaunch()
+      app.quit()
+

src/main-process/atom-window.coffee

@@ -40,6 +40,9 @@ class AtomWindow
     if process.platform is 'linux'
       options.icon = @constructor.iconPath
 
+    if @shouldHideTitleBar()
+      options.titleBarStyle = 'hidden'
+
     @browserWindow = new BrowserWindow options
     global.atomApplication.addWindow(this)
 
@@ -199,6 +202,11 @@ class AtomWindow
     [width, height] = @browserWindow.getSize()
     {x, y, width, height}
 
+  shouldHideTitleBar: ->
+    not @isSpec and
+    process.platform is 'darwin' and
+    global.atomApplication.config.get('core.useCustomTitleBar')
+
   close: -> @browserWindow.close()
 
   focus: -> @browserWindow.focus()

src/title-bar.coffee

@@ -0,0 +1,21 @@
+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)
+
+    @workspace.onDidChangeActivePaneItem => @updateTitle()
+    @themes.onDidChangeActiveThemes => @updateWindowSheetOffset()
+
+    @updateTitle()
+    @updateWindowSheetOffset()
+
+  updateTitle: ->
+    @titleElement.textContent = document.title
+
+  updateWindowSheetOffset: ->
+    @applicationDelegate.getCurrentWindow().setSheetOffset(@element.offsetHeight)

src/window-event-handler.coffee

@@ -23,6 +23,15 @@ class WindowEventHandler
     @subscriptions.add listen(@document, 'click', 'a', @handleLinkClick)
     @subscriptions.add listen(@document, 'submit', 'form', @handleFormSubmit)
 
+    browserWindow = @applicationDelegate.getCurrentWindow()
+    browserWindow.on 'enter-full-screen', @handleEnterFullScreen
+    @subscriptions.add new Disposable =>
+      browserWindow.removeListener('enter-full-screen', @handleEnterFullScreen)
+
+    browserWindow.on 'leave-full-screen', @handleLeaveFullScreen
+    @subscriptions.add new Disposable =>
+      browserWindow.removeListener('leave-full-screen', @handleLeaveFullScreen)
+
     @subscriptions.add @atomEnvironment.commands.add @window,
       'window:toggle-full-screen': @handleWindowToggleFullScreen
       'window:close': @handleWindowClose
@@ -136,6 +145,12 @@ class WindowEventHandler
     @document.body.classList.add('is-blurred')
     @atomEnvironment.storeWindowDimensions()
 
+  handleEnterFullScreen: =>
+    @document.body.classList.add("fullscreen")
+
+  handleLeaveFullScreen: =>
+    @document.body.classList.remove("fullscreen")
+
   handleWindowBeforeunload: =>
     confirmed = @atomEnvironment.workspace?.confirmClose(windowCloseRequested: true)
     if confirmed and not @reloadRequested and not @atomEnvironment.inSpecMode() and @atomEnvironment.getCurrentWindow().isWebViewFocused()

static/atom.less

@@ -21,6 +21,7 @@
 @import "panes";
 @import "syntax";
 @import "text-editor-light";
+@import "title-bar";
 @import "workspace-view";
 
 // Atom UI library

static/title-bar.less

@@ -0,0 +1,41 @@
+@import "ui-variables";
+
+@title-bar-text-size: 13px;
+@title-bar-height: 23px;
+@title-bar-background-color: @base-background-color;
+@title-bar-border-color: @base-border-color;
+
+body.fullscreen .title-bar {
+  margin-top: -@title-bar-height;
+}
+
+.title-bar {
+  height: @title-bar-height;
+  transition: margin-top 160ms;
+
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: @title-bar-text-size;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+
+  padding: 0 70px;
+  overflow: hidden;
+
+  .title {
+    flex: 0 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  background-color: @title-bar-background-color;
+  border-bottom: 1px solid @title-bar-border-color;
+
+  .is-blurred & {
+    color: @text-color-subtle;
+  }
+}

static/variables/ui-variables.less

@@ -79,7 +79,6 @@
 
 @tab-height: 30px;
 
-
 // Other
 
 @font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;