Add custom-inset title-bar

src/atom-environment.coffee

@@ -698,6 +698,9 @@ class AtomEnvironment extends Model
         if process.platform is 'darwin' and @config.get('core.titleBar') is 'custom'
           @workspace.addHeaderPanel({item: new TitleBar({@workspace, @themes, @applicationDelegate})})
           @document.body.classList.add('custom-title-bar')
+        if process.platform is 'darwin' and @config.get('core.titleBar') is 'custom-inset'
+          @workspace.addHeaderPanel({item: new TitleBar({@workspace, @themes, @applicationDelegate})})
+          @document.body.classList.add('custom-inset-title-bar')
         if process.platform is 'darwin' and @config.get('core.titleBar') is 'hidden'
           @document.body.classList.add('hidden-title-bar')
 

src/config-schema.js

@@ -360,8 +360,8 @@ if (process.platform === 'darwin') {
   configSchema.core.properties.titleBar = {
     type: 'string',
     default: 'native',
-    enum: ['native', 'custom', 'hidden'],
-    description: 'Use a custom, theme-aware title bar or hide the title bar altogether.<br>Note: Switching to a custom or hidden title bar will compromise some functionality.<br>This setting will require a relaunch of Atom to take effect.'
+    enum: ['native', 'custom', 'custom-inset', 'hidden'],
+    description: 'A `custom` title bar adapts to theme colors. Choosing `custom-inset` adds a bit more padding. The title bar can also be completely `hidden`.<br>Note: Switching to a custom or hidden title bar will compromise some functionality.<br>This setting will require a relaunch of Atom to take effect.'
   }
 }
 

src/main-process/atom-window.coffee

@@ -46,9 +46,12 @@ class AtomWindow
     if @shouldAddCustomTitleBar()
       options.titleBarStyle = 'hidden'
 
-    if @shouldHideTitleBar()
+    if @shouldAddCustomInsetTitleBar()
       options.titleBarStyle = 'hidden-inset'
 
+    if @shouldHideTitleBar()
+      options.frame = false
+
     @browserWindow = new BrowserWindow options
     @atomApplication.addWindow(this)
 
@@ -234,6 +237,11 @@ class AtomWindow
     process.platform is 'darwin' and
     @atomApplication.config.get('core.titleBar') is 'custom'
 
+  shouldAddCustomInsetTitleBar: ->
+    not @isSpec and
+    process.platform is 'darwin' and
+    @atomApplication.config.get('core.titleBar') is 'custom-inset'
+
   shouldHideTitleBar: ->
     not @isSpec and
     process.platform is 'darwin' and

static/title-bar.less

@@ -1,33 +1,32 @@
 @import "ui-variables";
 
-// Custom Title Bar -------------------------------
+@title-bar-height:           22px;
+@traffic-lights-width:       68px;
+
+@inset-title-bar-height:     38px;
+@inset-traffic-lights-width: 78px;
 
 @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 -------------------------------
 
 .title-bar {
-  box-sizing: content-box;
-  height: @title-bar-height;
-  transition: margin-top 160ms;
-
-  flex-shrink: 0;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-
+  overflow: hidden;
+  box-sizing: content-box;
   font-size: @title-bar-text-size;
+  background-color: @title-bar-background-color;
+  border-bottom: 1px solid @title-bar-border-color;
+  transition: margin-top 160ms;
   -webkit-user-select: none;
   -webkit-app-region: drag;
 
-  padding: 0 70px;
-  overflow: hidden;
-
   .title {
     flex: 0 1 auto;
     overflow: hidden;
@@ -35,60 +34,63 @@ body.fullscreen .title-bar {
     text-overflow: ellipsis;
   }
 
-  background-color: @title-bar-background-color;
-  border-bottom: 1px solid @title-bar-border-color;
-
   .is-blurred & {
     color: @text-color-subtle;
   }
 }
 
 
-// Hidden Title Bar -------------------------------
+// Custom -------------------------------
 
-@traffic-lights-width: 78px;
-@traffic-lights-height: 38px;
-
-.hidden-title-bar:not(.fullscreen) {
-  atom-panel-container.header:empty + atom-workspace-axis.horizontal atom-panel-container.left {
-    min-width: 78px; // keep some width for traffic lights when tree-view is hidden
-    padding-top: @traffic-lights-height; // add space for traffic lights
-  }
-
-  // Add space for traffic lights in header panels
-  atom-panel.header:first-child {
-    box-sizing: content-box;
-    height: @traffic-lights-height;
+.custom-title-bar {
+  .title-bar {
+    height: @title-bar-height;
     padding-left: @traffic-lights-width;
-    overflow-x: auto;
-    overflow-y: hidden;
+    padding-right: @traffic-lights-width;
   }
 
-  // Enable dragging
+  &.fullscreen .title-bar {
+    margin-top: -@title-bar-height; // hide title bar in fullscreen mode
+  }
+
+  atom-panel.modal {
+    top: @title-bar-height; // Move modals down
+  }
+}
+
+
+// Custom Inset -------------------------------
+
+.custom-inset-title-bar {
+  .title-bar {
+    height: @inset-title-bar-height;
+    padding-left: @inset-traffic-lights-width;
+    padding-right: @inset-traffic-lights-width;
+  }
+
+  &.fullscreen .title-bar {
+    margin-top: -@inset-title-bar-height; // hide title bar in fullscreen mode
+  }
+
+  atom-panel.modal {
+    top: @inset-title-bar-height; // Move modals down
+  }
+}
+
+
+// Hidden -------------------------------
+
+.hidden-title-bar {
   atom-panel-container.left,
   .tree-view,
   .tab-bar,
-  .status-bar,
-  atom-panel.header:first-child {
-    -webkit-app-region: drag;
+  .status-bar {
+    -webkit-app-region: drag; // Enable dragging
   }
 
-  // Disable dragging (on child elements)
   .tree-view > li,
   .tree-view-resize-handle,
   .tab {
-    -webkit-app-region: no-drag;
+    -webkit-app-region: no-drag; // Disable dragging (on child elements)
   }
 }
-
-
-// Modal -------------------------------
-// Prevent traffic lights from overlapping modals
-
-.custom-title-bar atom-panel.modal {
-  top: @title-bar-height;
-}
-
-.hidden-title-bar atom-panel.modal {
-  top: @traffic-lights-height;
-}