replace OSX window title bar with custom title-bar

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'
@@ -44,6 +45,7 @@ Gutter = require './gutter'
 TextEditorRegistry = require './text-editor-registry'
 AutoUpdateManager = require './auto-update-manager'
 
+TitleBarElement = require './title-bar-element'
 WorkspaceElement = require './workspace-element'
 PanelContainerElement = require './panel-container-element'
 PanelElement = require './panel-element'
@@ -193,6 +195,8 @@ class AtomEnvironment extends Model
       @config, @project, packageManager: @packages, grammarRegistry: @grammars, deserializerManager: @deserializers,
       notificationManager: @notifications, @applicationDelegate, @clipboard, viewRegistry: @views, assert: @assert.bind(this)
     })
+
+    @titleBar = new TitleBar() if process.platform is 'darwin'
     @themes.workspace = @workspace
 
     @textEditors = new TextEditorRegistry
@@ -259,6 +263,8 @@ class AtomEnvironment extends Model
     registerDefaultCommands({commandRegistry: @commands, @config, @commandInstaller, notificationManager: @notifications, @project, @clipboard})
 
   registerDefaultViewProviders: ->
+    @views.addViewProvider TitleBar, (model, env) ->
+      new TitleBarElement().initialize(model, env)
     @views.addViewProvider Workspace, (model, env) ->
       new WorkspaceElement().initialize(model, env)
     @views.addViewProvider PanelContainer, (model, env) ->
@@ -678,6 +684,7 @@ class AtomEnvironment extends Model
         @deserialize(state) if state?
         @deserializeTimings.atom = Date.now() - startTime
 
+        @document.body.appendChild(@views.getView(@titleBar)) if @titleBar
         @document.body.appendChild(@views.getView(@workspace))
         @backgroundStylesheet?.remove()
 

src/main-process/atom-window.coffee

@@ -23,6 +23,7 @@ class AtomWindow
     options =
       show: false
       title: 'Atom'
+      titleBarStyle: 'hidden'
       # Add an opaque backgroundColor (instead of keeping the default
       # transparent one) to prevent subpixel anti-aliasing from being disabled.
       # We believe this is a regression introduced with Electron 0.37.3, and

src/title-bar-element.coffee

@@ -0,0 +1,30 @@
+
+module.exports =
+class TitleBarElement extends HTMLElement
+  initialize: (@model, {@views, @workspace, @project, @config, @styles}) ->
+
+    @classList.add('title-bar')
+
+    @titleElement = document.createElement('div')
+    @titleElement.classList.add('title')
+    @titleElement.textContent = document.title
+    @appendChild @titleElement
+
+    @activeItemSubscription = atom.workspace.onDidChangeActivePaneItem (activeItem) =>
+      @subscribeToActiveTextEditor()
+
+    return this
+
+  subscribeToActiveTextEditor: ->
+    @cursorSubscription?.dispose()
+    @cursorSubscription = @getActiveTextEditor()?.onDidChangeTitle =>
+      @updateTitle()
+    @updateTitle()
+
+  updateTitle: ->
+    @titleElement.textContent = document.title
+
+  getActiveTextEditor: ->
+    atom.workspace.getActiveTextEditor()
+
+module.exports = TitleBarElement = document.registerElement 'atom-title-bar', prototype: TitleBarElement.prototype

src/title-bar.coffee

@@ -0,0 +1,6 @@
+Model = require './model'
+
+module.exports =
+class TitleBar extends Model
+  constructor: (params) ->
+    super

static/atom.less

@@ -17,10 +17,16 @@
 
 // Core components
 @import "cursors";
+@import "bootstrap-overrides";
+@import "badges";
+@import "buttons";
+@import "icons";
+@import "links";
 @import "panels";
 @import "panes";
 @import "syntax";
 @import "text-editor-light";
+@import "title-bar";
 @import "workspace-view";
 
 // Atom UI library

static/title-bar.less

@@ -0,0 +1,54 @@
+@import "./variables/ui-variables";
+
+.title-bar {
+  height: 23px;
+
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue";
+  font-size: @title-bar-text-size;
+  color: @title-bar-text-focused;
+  -webkit-user-select: none;
+
+  padding: 0 10px 0 70px;
+  overflow: hidden;
+
+  .title {
+    flex: 0 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+
+  background-image: linear-gradient(@title-bar-gradient-focused);
+  border-bottom: 1px solid @title-bar-border-color-focused;
+
+  .is-blurred & {
+    color: @title-bar-text-blurred;
+    background-image: linear-gradient(@title-bar-gradient-blurred);
+    border-bottom-color: @title-bar-border-color-blurred;
+  }
+
+  [title-bar-style="combined"] & {
+    display: none;
+    position: absolute;
+  }
+}
+
+[title-bar-style="combined"] .tab-bar {
+  height: 37px;
+  padding-left: 80px;
+  background-image: linear-gradient(@title-bar-gradient-focused);
+
+  .tab {
+    top: 7px;
+    border-radius: 3px 3px 0 0 !important;
+    &:after {
+      border-radius: 3px 3px 0 0 !important;
+  }
+  }
+}

static/variables/ui-variables.less

@@ -79,6 +79,18 @@
 
 @tab-height: 30px;
 
+// TitleBar
+
+@title-bar-text-size: 13px;
+
+@title-bar-gradient-focused: #ededed 0, #ededed 1px, #e7e7e7 2px, #d1d1d1 100%;
+@title-bar-text-focused: #4d4d4d;
+@title-bar-border-color-focused: #afafaf;
+
+@title-bar-gradient-blurred: #fafafa 0px, #f6f6f6 2px, #f6f6f6 100%;
+@title-bar-text-blurred: #d3d3d3;
+@title-bar-border-color-blurred: #d1d1d1;
+
 
 // Other
 

static/workspace-view.less

@@ -1,9 +1,26 @@
 @import "ui-variables";
+@import "octicon-mixins";
+
+@font-face { .octicon-font(); }
+
+html {
+  font-family: @font-family;
+  font-size: @font-size;
+}
+
+html,
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
 
 atom-workspace {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-grow: 1;
   overflow: hidden;
   position: relative;
   color: @text-color;