Adds rounded borders to the top corners for Windows 7.

- Introduces a platformUtil helper
- Top level element uses this helper to add classes for platform and release (Windows only)
- removed OS detection logic in WindowCaptionButtons component
- reworked styles in navigationBar.less

Fixes #4216

Auditors: @bbondy @bridiver

app/common/lib/platformUtil.js

@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use strict'
+
+const os = require('os')
+
+/**
+ * Get list of styles which should be applied to root window div
+ * return array of strings (each being a class name)
+ */
+module.exports.getPlatformStyles = () => {
+  const platform = os.platform()
+  const styleList = ['platform--' + platform]
+
+  switch (platform) {
+    case 'win32':
+      if (/6.1./.test(os.release())) {
+        styleList.push('win7')
+      } else {
+        styleList.push('win10')
+      }
+  }
+
+  return styleList
+}
+
+module.exports.isDarwin = () => {
+  return os.platform() === 'darwin'
+}
+
+module.exports.isWindows = () => {
+  return os.platform() === 'win32'
+}

app/renderer/components/windowCaptionButtons.js

@@ -16,7 +16,6 @@ class WindowCaptionButtons extends ImmutableComponent {
     this.onMinimizeClick = this.onMinimizeClick.bind(this)
     this.onMaximizeClick = this.onMaximizeClick.bind(this)
     this.onCloseClick = this.onCloseClick.bind(this)
-    this.osClass = this.getPlatformCssClass()
   }
 
   get maximizeTitle () {
@@ -25,19 +24,6 @@ class WindowCaptionButtons extends ImmutableComponent {
       : 'windowCaptionButtonMaximize'
   }
 
-  getPlatformCssClass () {
-    switch (os.platform()) {
-      case 'win32':
-        if (/6.1./.test(os.release())) {
-          return 'win7'
-        } else {
-          return 'win10'
-        }
-      default:
-        return 'hidden'
-    }
-  }
-
   onMinimizeClick (e) {
     currentWindow.minimize()
   }
@@ -62,7 +48,7 @@ class WindowCaptionButtons extends ImmutableComponent {
       fullscreen: this.props.windowMaximized,
       windowCaptionButtons: true
     })}>
-      <div className={'container ' + this.osClass}>
+      <div className='container'>
         <button
           className={cx({
             fullscreen: this.props.windowMaximized,

js/components/window.js

@@ -12,7 +12,8 @@ const windowActions = require('../actions/windowActions')
 const Main = require('./main')
 const SiteTags = require('../constants/siteTags')
 const config = require('../constants/config')
-const cx = require('../lib/classSet.js')
+const cx = require('../lib/classSet')
+const { getPlatformStyles } = require('../../app/common/lib/platformUtil')
 
 class Window extends React.Component {
   constructor (props) {
@@ -55,10 +56,10 @@ class Window extends React.Component {
     let classes = {}
     classes['windowContainer'] = true
 
-    // Possible values for process.platform are:
-    // darwin, freebsd, linux, sunos, win32
-    // https://nodejs.org/api/process.html#process_process_platform
-    classes['platform--' + process.platform] = true
+    const platformClasses = getPlatformStyles()
+    platformClasses.forEach((className) => {
+      classes[className] = true
+    })
 
     return <div id='windowContainer' className={cx(classes)} >
       <Main windowState={this.state.immutableData.windowState}