Merge pull request #757 from hashicorp/chromeless-window-desktop-option

Add chromeless window option for desktop

addons/api/mirage/scenarios/ipc.js

@@ -120,17 +120,17 @@ export default function initializeMockIPC(server) {
     }
 
     /**
-     * Check for browsers running on mac OS
+     * Check for window chrome on MacOS
      */
-    isMacOS() {
-      return Boolean(window.navigator.userAgent.match(/(macintosh)/i));
+    hasMacOSChrome() {
+      return false;
     }
 
     /**
-     * Check for browsers running on windows OS
+     * Check for OS chrome state
      */
-    isWindowsOS() {
-      return Boolean(window.navigator.userAgent.match(/(windows)/i));
+    showWindowActions() {
+      return true;
     }
 
     /**

ui/desktop/README.md

@@ -89,6 +89,7 @@ These environment variables may be used to customized the build.
 | `APP_UPDATER_LATEST_VERSION_LOCATION` | Location of app release to use for updating client. Can be a filepath or url. |
 | `BYPASS_CLI_SETUP` | Disable download and extraction of cli. For development use only. |
 | `BYPASS_APP_UPDATER` | Disable app updater feature. For development use only. |
+| `DISABLE_WINDOW_CHROME` | Disable window chrome. For internal use only. |
 
 ### Building for Production
 

ui/desktop/app/controllers/application.js

@@ -1,7 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import config from '../config/environment';
-import { computed } from '@ember/object';
 
 export default class ApplicationController extends Controller {
   // =services
@@ -11,17 +10,4 @@ export default class ApplicationController extends Controller {
   // =attributes
 
   notifyTimeout = config.notifyTimeout;
-
-  // =attributes
-
-  /**
-   * Display OS window actions (minimize, fullscreen, close) for
-   * Windows and Linux as OS frame/shell is disable.
-   * Does not apply to MacOS.
-   * @type {boolean}
-   */
-  @computed('isMacOS')
-  get isFrameless() {
-    return !this.isMacOS;
-  }
 }

ui/desktop/app/routes/application.js

@@ -31,10 +31,14 @@ export default class ApplicationRoute extends Route {
   }
 
   /**
-   * Add OS config on controller.
+   * Add window frame config on controller.
    */
   async setupController(controller) {
-    controller.set('isMacOS', await this.ipc.invoke('isMacOS'));
+    controller.set('hasMacOSChrome', await this.ipc.invoke('hasMacOSChrome'));
+    controller.set(
+      'showWindowActions',
+      await this.ipc.invoke('showWindowActions')
+    );
   }
 
   // =actions

ui/desktop/app/templates/application.hbs

@@ -1,14 +1,14 @@
 {{page-title (app-name)}}
 
 <Rose::Layout::Global
-  class='{{if this.isFrameless ' layout-scroll'}}'
+  class='{{if this.showWindowActions ' layout-scroll'}}'
   as |layout|
 >
 
   <layout.header>
     <Rose::Header
       class='{{if (is-loading) ' loading'}}
-        {{if this.isMacOS ' header-cushion'}}'
+        {{if this.hasMacOSChrome ' header-cushion'}}'
       as |header|
     >
       <header.brand @logo='logo-app' @text={{app-name}} />
@@ -19,7 +19,7 @@
       {{/if}}
 
       <header.utilities as |utilities|>
-        {{#if this.isFrameless}}
+        {{#if this.showWindowActions}}
           <Rose::Button
             @iconOnly='flight-icons/svg/x-16'
             @style='warning'

ui/desktop/electron-app/src/index.js

@@ -113,11 +113,19 @@ app.on('ready', async () => {
   }
   Menu.setApplicationMenu(menuTemplate);
 
+  /**
+   * Enable electron OS window frame/chrome for MacOS only.
+   * Disable frame/chrome regardless of OS when
+   * `DISABLE_WINDOW_CHROME=true`.
+   */
+  let showWindowChrome = isMac();
+  if (process.env.DISABLE_WINDOW_CHROME) showWindowChrome = false;
+
   const browserWindowOptions = {
     width: 1280,
     height: 760,
-    titleBarStyle: 'hiddenInset',
-    frame: isMac(),
+    frame: showWindowChrome,
+    titleBarStyle: showWindowChrome ? 'hiddenInset' : 'none',
     webPreferences: {
       partition,
       sandbox: true,

ui/desktop/electron-app/src/ipc/handlers.js

@@ -69,9 +69,22 @@ handle('connect', ({ target_id, token, host_id }) =>
 handle('stop', ({ session_id }) => sessionManager.stopById(session_id));
 
 /**
- * Check for MacOS OS
+ * Check for OS window chrome. Enabled on MacOS only.
+ * Window chrome is disabled regardless of platform for
+ * `DISABLE_WINDOW_CHROME=true`.
  */
-handle('isMacOS', () => isMac());
+handle('hasMacOSChrome', () =>
+  process.env.DISABLE_WINDOW_CHROME ? false : isMac()
+);
+
+/**
+ * Show window actions for non-MacOS platforms.
+ * Window actions are disabled regardless of platform for
+ * `DISABLE_WINDOW_CHROME=true`.
+ */
+handle('showWindowActions', () =>
+  process.env.DISABLE_WINDOW_CHROME ? false : !isMac()
+);
 
 /**
  * Minimize window

ui/desktop/tests/acceptance/application-test.js

@@ -47,21 +47,41 @@ module('Acceptance | origin', function (hooks) {
     sinon.restore();
   });
 
-  test('visiting index on MacOS hides custom window actions', async function (assert) {
+  test('visiting index with chrome disabled hides custom window actions', async function (assert) {
     assert.expect(3);
-    stubs.ipcService.withArgs('isMacOS').returns(true);
+    stubs.ipcService.withArgs('showWindowActions').returns(false);
     await visit(urls.origin);
-    assert.notOk(find('.button-window-close'));
-    assert.notOk(find('.button-window-minimize'));
-    assert.notOk(find('.button-window-fullscreen'));
+    assert.notOk(find('.button-window-close'), 'Window close button');
+    assert.notOk(find('.button-window-minimize'), 'Window minimize button');
+    assert.notOk(find('.button-window-fullscreen'), 'Window fullscreen button');
   });
 
-  test('visiting index on non-MacOS shows custom window actions', async function (assert) {
+  test('visiting index with chrome enabled shows custom window actions', async function (assert) {
     assert.expect(3);
-    stubs.ipcService.withArgs('isMacOS').returns(false);
+    stubs.ipcService.withArgs('showWindowActions').returns(true);
     await visit(urls.origin);
-    assert.ok(find('.button-window-close'));
-    assert.ok(find('.button-window-minimize'));
-    assert.ok(find('.button-window-fullscreen'));
+    assert.ok(find('.button-window-close'), 'Window close button');
+    assert.ok(find('.button-window-minimize'), 'Window minimize button');
+    assert.ok(find('.button-window-fullscreen'), 'Window fullscreen button');
+  });
+
+  test('visiting index with MacOS chrome enabled', async function (assert) {
+    assert.expect(1);
+    stubs.ipcService.withArgs('hasMacOSChrome').returns(true);
+    await visit(urls.origin);
+    assert.ok(
+      find('.rose-header.header-cushion'),
+      'Adds header padding around native window actions'
+    );
+  });
+
+  test('visiting index with MacOS chrome disabled', async function (assert) {
+    assert.expect(1);
+    stubs.ipcService.withArgs('hasMacOSChrome').returns(false);
+    await visit(urls.origin);
+    assert.notOk(
+      find('.rose-header.header-cushion'),
+      'Does not add header padding around native window actions'
+    );
   });
 });

ui/desktop/tests/helpers/window-mock-ipc.js

@@ -17,7 +17,8 @@ class MockIPC {
   }
 
   resetOrigin() {}
-  isMacOS() {}
+  hasMacOSChrome() {}
+  showWindowActions() {}
 }
 
 /**