From c91dfd7cc27b560fd26b9fcc9ccbf4fb36ce67f0 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Tue, 27 Sep 2016 17:52:09 -0700
Subject: [PATCH] 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 https://github.com/brave/browser-laptop/issues/4216

Auditors: @bbondy @bridiver
---
 app/common/lib/platformUtil.js                |  35 +
 .../components/windowCaptionButtons.js        |  16 +-
 js/components/window.js                       |  11 +-
 less/navigationBar.less                       | 603 +++++++++---------
 test/unit/lib/platformUtilTest.js             |  95 +++
 5 files changed, 446 insertions(+), 314 deletions(-)
 create mode 100644 app/common/lib/platformUtil.js
 create mode 100644 test/unit/lib/platformUtilTest.js

diff --git a/app/common/lib/platformUtil.js b/app/common/lib/platformUtil.js
new file mode 100644
index 00000000000..0014dadc006
--- /dev/null
+++ b/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'
+}
diff --git a/app/renderer/components/windowCaptionButtons.js b/app/renderer/components/windowCaptionButtons.js
index 257ac6564ff..9d96c82bfb3 100644
--- a/app/renderer/components/windowCaptionButtons.js
+++ b/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,
diff --git a/js/components/window.js b/js/components/window.js
index a8f7f945bbc..7a848ab0e0d 100644
--- a/js/components/window.js
+++ b/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}
diff --git a/less/navigationBar.less b/less/navigationBar.less
index c4e0e670bff..954976f2357 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -34,7 +34,7 @@
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
 }
 
-// Windows specific fixes
+// Windows specific styles
 .platform--win32 {
   div#window.frameless {
     border: 1px solid #000;
@@ -75,6 +75,314 @@
       }
     }
   }
+
+  // Windows 7 specific styles
+  &.win7 {
+    > div#window.frameless {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+    }
+
+    .windowCaptionButtons {
+      > .container {
+        margin-right: 6px;
+
+        button.captionButton {
+          outline: 0;
+          height: 18px;
+          color: #b1acac;
+          border: 1px solid #adadad;
+          border-top: 0;
+          display: inline-block;
+          background-color: #f5f5f5;
+          box-shadow: inset 1px 1px rgba(255, 255, 255, 0.9);
+          width: 25px;
+
+          &.minimize {
+            width: 28px;
+            border-right: 0px;
+            &:hover {
+              background-color: #fff;
+            }
+            &:active {
+              background-color: #cacacb;
+            }
+            border-radius: 0 0 0 4px;
+
+            .widget {
+              width: 10px;
+              height: 3px;
+              border: 1px solid #838383;
+              background: #fff;
+              display: inline-block;
+              border-radius: 1px;
+            }
+          }
+
+          &.maximize {
+            border-right: 0px;
+            width: 27px;
+            &:hover {
+              background-color: #fff;
+              .widget {
+                .widget2 {
+                  background-color: #fff;
+                }
+              }
+            }
+            &:active {
+              background-color: #cacacb;
+              .widget {
+                .widget2 {
+                  background-color: #cacacb;
+                }
+              }
+            }
+            &.fullscreen {
+              &:hover {
+                background-color: #e5e5e5;
+              }
+              &:active {
+                background-color: #cacacb;
+              }
+              .widget {
+                .widget1 {
+                  width: 8px;
+                  top: 2px;
+                  left: 10px;
+                }
+                .widget2 {
+                  width: 8px;
+                  height: 8px;
+                  top: -5px;
+                  left: 6px;
+                  background: #fff;
+                  border-radius: 1px;
+                }
+                .widget3 {
+                  display: inline-block;
+                  width: 2px;
+                  height: 2px;
+                  border: 1px solid #838383;
+                  background: #fff;
+                  position: relative;
+                  top: -20px;
+                  left: -2px;
+                }
+              }
+            }
+
+            .widget {
+              .widget1 {
+                width: 10px;
+                height: 8px;
+                border: 1px solid #838383;
+                background: #fff;
+                position: relative;
+                top: 2px;
+                left: 7px;
+                border-radius: 1px;
+              }
+              .widget2 {
+                width: 4px;
+                height: 2px;
+                border: 1px solid #838383;
+                background-color: #f5f5f5;
+                position: relative;
+                top: -5px;
+                left: 10px;
+                border-radius: 0;
+              }
+              .widget3 { display: none; }
+              .widget4 { display: none; }
+              .widget5 { display: none; }
+            }
+          }
+
+          &.close {
+            width: 48px;
+            border-radius: 0 0 4px 0;
+            &:hover {
+              background-color: #d9504e;
+            }
+            &:active {
+              background-color: #d7393d;
+            }
+
+            .widget {
+              background: url('../img/windows/close.svg') no-repeat;
+              display: inline-block;
+              height: 12px;
+              width: 12px;
+              position: relative;
+              top: 3px;
+
+              .widget1 { display:none; }
+              .widget2 { display:none; }
+              .widget3 { display:none; }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Windows 10 specific styles
+  &.win10 {
+    .windowCaptionButtons {
+      > .container {
+        button.captionButton {
+          width: 45px;
+          height: 29px;
+          border: 0;
+          background-color: transparent;
+
+          &.fullscreen {
+            height:21px;
+          }
+
+          &.minimize {
+            &:hover {
+              background-color: #e5e5e5;
+            }
+            &:active {
+              background-color: #cacacb;
+            }
+            .widget {
+              width: 10px;
+              height: 1px;
+              background: black;
+              display: inline-block;
+              vertical-align: middle;
+              position: relative;
+              left: -1px;
+            }
+          }
+
+          &.maximize {
+            border-right: 0px;
+            &:hover {
+              background-color: #e5e5e5;
+            }
+            &:active {
+              background-color: #cacacb;
+            }
+            &.fullscreen {
+              &:hover {
+                background-color: #e5e5e5;
+              }
+              &:active {
+                background-color: #cacacb;
+              }
+              .widget {
+                margin-top: 8px;
+                .widget1 { width: 6px; height: 6px; }
+                .widget2 { display: inline-block; }
+                .widget3 {
+                  display: inline-block;
+                  width: 8px;
+                  height: 1px;
+                  background: black;
+                  position: relative;
+                  top: -21px;
+                  left: 1px;
+                }
+                .widget4 {
+                  display: inline-block;
+                  width: 1px;
+                  height: 8px;
+                  background: black;
+                  position: relative;
+                  top: -14px;
+                  left: 0px;
+                }
+                .widget5 {
+                  display: inline-block;
+                  width: 2px;
+                  height: 1px;
+                  background: black;
+                  position: relative;
+                  top: -14px;
+                  left: -2px;
+                }
+              }
+            }
+            .widget {
+              width: 12px;
+              height: 12px;
+              display: inline-block;
+              vertical-align: middle;
+
+              .widget1 {
+                width: 8px;
+                height: 8px;
+                border: 1px solid black;
+                background: none;
+                position: relative;
+              }
+              .widget2 {
+                display: none;
+                width: 1px;
+                height: 2px;
+                background: black;
+                position: relative;
+                top: -20px;
+                left: 2px;
+              }
+              .widget3 { display: none; }
+              .widget4 { display: none; }
+              .widget5 { display: none; }
+            }
+          }
+
+          &.close {
+            &:hover {
+              background-color: #e5182c;
+              .widget {
+                .widget1{ background:white; }
+                .widget2{ background:white; }
+              }
+            }
+            &:active {
+              background-color: #ef717c;
+              .widget {
+                .widget1{ background:white; }
+                .widget2{ background:white; }
+              }
+            }
+            .widget {
+              width: 11px;
+              height: 11px;
+              display: inline-block;
+              vertical-align: middle;
+
+              .widget1 {
+                width: 14px;
+                height: 1px;
+                background: black;
+                display: inline-block;
+                transform: rotate(45deg);
+                position: relative;
+                top: -6px;
+                left: -2px;
+              }
+              .widget2 {
+                width: 14px;
+                height: 1px;
+                background: black;
+                display: inline-block;
+                transform: rotate(315deg);
+                position: relative;
+                top: -6px;
+                left: -16px;
+              }
+              .widget3 { display: none; }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 // Styles had to be reworked to properly position the new caption buttons for Windows
@@ -126,299 +434,6 @@
     flex-grow: 0;
     -webkit-app-region: no-drag;
   }
-
-  .win7 {
-    margin-right: 6px;
-
-    button.captionButton {
-      outline: 0;
-      height: 18px;
-      color: #b1acac;
-      border: 1px solid #adadad;
-      border-top: 0;
-      display: inline-block;
-      background-color: #f5f5f5;
-      box-shadow: inset 1px 1px rgba(255, 255, 255, 0.9);
-      width: 25px;
-
-      &.minimize {
-        width: 28px;
-        border-right: 0px;
-        &:hover {
-          background-color: #fff;
-        }
-        &:active {
-          background-color: #cacacb;
-        }
-        border-radius: 0 0 0 4px;
-
-        .widget {
-          width: 10px;
-          height: 3px;
-          border: 1px solid #838383;
-          background: #fff;
-          display: inline-block;
-          border-radius: 1px;
-        }
-      }
-
-      &.maximize {
-        border-right: 0px;
-        width: 27px;
-        &:hover {
-          background-color: #fff;
-          .widget {
-            .widget2 {
-              background-color: #fff;
-            }
-          }
-        }
-        &:active {
-          background-color: #cacacb;
-          .widget {
-            .widget2 {
-              background-color: #cacacb;
-            }
-          }
-        }
-        &.fullscreen {
-          &:hover {
-            background-color: #e5e5e5;
-          }
-          &:active {
-            background-color: #cacacb;
-          }
-          .widget {
-            .widget1 {
-              width: 8px;
-              top: 2px;
-              left: 10px;
-            }
-            .widget2 {
-              width: 8px;
-              height: 8px;
-              top: -5px;
-              left: 6px;
-              background: #fff;
-              border-radius: 1px;
-            }
-            .widget3 {
-              display: inline-block;
-              width: 2px;
-              height: 2px;
-              border: 1px solid #838383;
-              background: #fff;
-              position: relative;
-              top: -20px;
-              left: -2px;
-            }
-          }
-        }
-
-        .widget {
-          .widget1 {
-            width: 10px;
-            height: 8px;
-            border: 1px solid #838383;
-            background: #fff;
-            position: relative;
-            top: 2px;
-            left: 7px;
-            border-radius: 1px;
-          }
-          .widget2 {
-            width: 4px;
-            height: 2px;
-            border: 1px solid #838383;
-            background-color: #f5f5f5;
-            position: relative;
-            top: -5px;
-            left: 10px;
-            border-radius: 0;
-          }
-          .widget3 { display: none; }
-          .widget4 { display: none; }
-          .widget5 { display: none; }
-        }
-      }
-
-      &.close {
-        width: 48px;
-        border-radius: 0 0 4px 0;
-        &:hover {
-          background-color: #d9504e;
-        }
-        &:active {
-          background-color: #d7393d;
-        }
-
-        .widget {
-          background: url('../img/windows/close.svg') no-repeat;
-          display: inline-block;
-          height: 12px;
-          width: 12px;
-          position: relative;
-          top: 3px;
-
-          .widget1 { display:none; }
-          .widget2 { display:none; }
-          .widget3 { display:none; }
-        }
-      }
-    }
-  }
-
-  .win10 {
-    button.captionButton {
-      width: 45px;
-      height: 29px;
-      border: 0;
-      background-color: transparent;
-
-      &.fullscreen {
-        height:21px;
-      }
-
-      &.minimize {
-        &:hover {
-          background-color: #e5e5e5;
-        }
-        &:active {
-          background-color: #cacacb;
-        }
-        .widget {
-          width: 10px;
-          height: 1px;
-          background: black;
-          display: inline-block;
-          vertical-align: middle;
-          position: relative;
-          left: -1px;
-        }
-      }
-
-      &.maximize {
-        border-right: 0px;
-        &:hover {
-          background-color: #e5e5e5;
-        }
-        &:active {
-          background-color: #cacacb;
-        }
-        &.fullscreen {
-          &:hover {
-            background-color: #e5e5e5;
-          }
-          &:active {
-            background-color: #cacacb;
-          }
-          .widget {
-            margin-top: 8px;
-            .widget1 { width: 6px; height: 6px; }
-            .widget2 { display: inline-block; }
-            .widget3 {
-              display: inline-block;
-              width: 8px;
-              height: 1px;
-              background: black;
-              position: relative;
-              top: -21px;
-              left: 1px;
-            }
-            .widget4 {
-              display: inline-block;
-              width: 1px;
-              height: 8px;
-              background: black;
-              position: relative;
-              top: -14px;
-              left: 0px;
-            }
-            .widget5 {
-              display: inline-block;
-              width: 2px;
-              height: 1px;
-              background: black;
-              position: relative;
-              top: -14px;
-              left: -2px;
-            }
-          }
-        }
-        .widget {
-          width: 12px;
-          height: 12px;
-          display: inline-block;
-          vertical-align: middle;
-
-          .widget1 {
-            width: 8px;
-            height: 8px;
-            border: 1px solid black;
-            background: none;
-            position: relative;
-          }
-          .widget2 {
-            display: none;
-            width: 1px;
-            height: 2px;
-            background: black;
-            position: relative;
-            top: -20px;
-            left: 2px;
-          }
-          .widget3 { display: none; }
-          .widget4 { display: none; }
-          .widget5 { display: none; }
-        }
-      }
-
-      &.close {
-        &:hover {
-          background-color: #e5182c;
-          .widget {
-            .widget1{ background:white; }
-            .widget2{ background:white; }
-          }
-        }
-        &:active {
-          background-color: #ef717c;
-          .widget {
-            .widget1{ background:white; }
-            .widget2{ background:white; }
-          }
-        }
-        .widget {
-          width: 11px;
-          height: 11px;
-          display: inline-block;
-          vertical-align: middle;
-
-          .widget1 {
-            width: 14px;
-            height: 1px;
-            background: black;
-            display: inline-block;
-            transform: rotate(45deg);
-            position: relative;
-            top: -6px;
-            left: -2px;
-          }
-          .widget2 {
-            width: 14px;
-            height: 1px;
-            background: black;
-            display: inline-block;
-            transform: rotate(315deg);
-            position: relative;
-            top: -6px;
-            left: -16px;
-          }
-          .widget3 { display: none; }
-        }
-      }
-    }
-  }
 }
 
 // Menubar (for use w/ slim titlebar)
diff --git a/test/unit/lib/platformUtilTest.js b/test/unit/lib/platformUtilTest.js
new file mode 100644
index 00000000000..5673bdb5b41
--- /dev/null
+++ b/test/unit/lib/platformUtilTest.js
@@ -0,0 +1,95 @@
+/* global describe, it */
+const mockery = require('mockery')
+const assert = require('assert')
+let platformUtil = require('../../../app/common/lib/platformUtil')
+
+require('../braveUnit')
+
+describe('platformUtil', function () {
+  const mockWin7 = {
+    platform: () => 'win32',
+    release: () => '6.1.7601'
+  }
+  const mockWin8 = {
+    platform: () => 'win32',
+    release: () => '6.3.9600'
+  }
+  const mockWin10 = {
+    platform: () => 'win32',
+    release: () => '10.0.10586'
+  }
+  const mockMacOS = {
+    platform: () => 'darwin'
+  }
+
+  // For more details on Mockery, see https://github.com/mfncooper/mockery
+  const loadMocks = (osMock) => {
+    mockery.enable({ warnOnReplace: false, warnOnUnregistered: false, useCleanCache: true })
+    mockery.registerMock('os', osMock)
+    platformUtil = require('../../../app/common/lib/platformUtil')
+  }
+  const unloadMocks = () => {
+    mockery.disable()
+    platformUtil = require('../../../app/common/lib/platformUtil')
+  }
+
+  describe('getPlatformStyles', function () {
+    it('prepends style with platform--', function () {
+      const result = platformUtil.getPlatformStyles()
+      assert.equal(result[0], 'platform--win32')
+    })
+    it('returns the style "win7" for Windows 7', function () {
+      loadMocks(mockWin7)
+
+      const result = platformUtil.getPlatformStyles()
+      assert.equal(result.length, 2)
+      assert.equal(result[1], 'win7')
+
+      unloadMocks()
+    })
+    it('returns the style "win10" for Windows 8', function () {
+      loadMocks(mockWin8)
+
+      const result = platformUtil.getPlatformStyles()
+      assert.equal(result.length, 2)
+      assert.equal(result[1], 'win10')
+
+      unloadMocks()
+    })
+    it('returns the style "win10" for Windows 10', function () {
+      loadMocks(mockWin10)
+
+      const result = platformUtil.getPlatformStyles()
+      assert.equal(result.length, 2)
+      assert.equal(result[1], 'win10')
+
+      unloadMocks()
+    })
+  })
+
+  describe('isDarwin', function () {
+    it('returns true if using macOS', function () {
+      loadMocks(mockMacOS)
+      assert.equal(platformUtil.isDarwin(), true)
+      unloadMocks()
+    })
+    it('returns false if not using macOS', function () {
+      loadMocks(mockWin10)
+      assert.equal(platformUtil.isDarwin(), false)
+      unloadMocks()
+    })
+  })
+
+  describe('isWindows', function () {
+    it('returns true if using Windows', function () {
+      loadMocks(mockWin10)
+      assert.equal(platformUtil.isWindows(), true)
+      unloadMocks()
+    })
+    it('returns false if not using Windows', function () {
+      loadMocks(mockMacOS)
+      assert.equal(platformUtil.isWindows(), false)
+      unloadMocks()
+    })
+  })
+})