From c5b7b9a3bab2f181878b32afe83cf9c44392d340 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 16 May 2017 00:28:24 +0200
Subject: [PATCH] window focus state, more reliable fullscreen body class

---
 README.md    |  2 +-
 index.js     | 42 +++++++++++++++++++++++++++++++++---------
 package.json |  2 ++
 styles.css   | 42 ++++++++++++++++++++++++++++++++----------
 4 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 807f0f8..50766cf 100644
--- a/README.md
+++ b/README.md
@@ -44,4 +44,4 @@ Install dependencies with `npm install` and hack away. Run the tests using `npm
 
 ## Author
 
-- Matthias Kretschmann ([@kremalicious](https://twitter.com/kremalicious))
+- [Matthias Kretschmann](https://matthiaskretschmann.com) ([@kremalicious](https://twitter.com/kremalicious))
diff --git a/index.js b/index.js
index 4c9fdae..1f41781 100644
--- a/index.js
+++ b/index.js
@@ -33,15 +33,39 @@ exports.getTabsProps = (parentProps, props) => {
     return Object.assign({}, parentProps, props)
 }
 
-// Fullscreen body class
-exports.mapHyperState = (state, map) => {
-    const bodyClasses = document.body.classList
-
-    if (window.innerHeight === screen.height) {
-        bodyClasses.add('fullscreen')
-    } else {
-        bodyClasses.remove('fullscreen')
+// Fullscreen & blur/focus body classes
+module.exports.onWindow = browserWindow => {
+    const enterFullscreen = () => {
+        document.body.classList.add('fullscreen')
     }
 
-    return Object.assign({}, state, map)
+    const leaveFullscreen = () => {
+        document.body.classList.remove('fullscreen')
+    }
+
+    const onBlur = () => {
+        document.body.classList.add('blur')
+    }
+
+    const onFocus = () => {
+        document.body.classList.remove('blur')
+    }
+
+    browserWindow.on('enter-full-screen', () => {
+        browserWindow.webContents.executeJavaScript(`(${enterFullscreen.toString()})();`)
+    })
+
+    browserWindow.on('leave-full-screen', () => {
+        browserWindow.webContents.executeJavaScript(`(${leaveFullscreen.toString()})();`)
+    })
+
+    browserWindow.on('blur', () => {
+        browserWindow.webContents.executeJavaScript(`(${onBlur.toString()})();`)
+    })
+
+    browserWindow.on('focus', () => {
+        browserWindow.webContents.executeJavaScript(`(${onFocus.toString()})();`)
+    })
+
+    return browserWindow
 }
diff --git a/package.json b/package.json
index 71d18e5..b7df7a5 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
     "theme",
     "ui",
     "native",
+    "tabs",
     "mac",
+    "macos",
     "dark",
     "pro"
   ],
diff --git a/styles.css b/styles.css
index 9f4b1c1..27a4c8e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,8 +1,10 @@
 :root {
-    --tab-height: 34px;
-    --tab-gradient: linear-gradient(to bottom, #898989 0%, #676767 100%);
-    --tab-gradient-hover: linear-gradient(to bottom, #777 0%, #595959 100%);
-    --tab-gradient-inactive: linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 100%);
+    --tab-height: 35px;
+    --tab-background: linear-gradient(to bottom, #898989 0%, #676767 100%);
+    --tab-background-hover: linear-gradient(to bottom, #777 0%, #595959 100%);
+    --tab-background-inactive: linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 100%);
+    --tab-background-blur: linear-gradient(to bottom, #606060 0%, #555 100%);
+    --tab-background-blur-active: linear-gradient(to bottom, #666 0%, #595959 100%);
     --tab-border-color: #5e5e5e;
     --tab-text-color: #030303;
     --tab-text-color-inactive: #363636;
@@ -30,13 +32,18 @@
 }
 
 .tabs_nav {
-    background: var(--tab-gradient-inactive);
+    background: var(--tab-background-inactive);
     height: var(--tab-height);
     line-height: var(--tab-height);
 }
 
 .no-tabs .tabs_nav {
-    background: var(--tab-gradient);
+    background: var(--tab-background);
+}
+
+.blur .tabs_nav,
+.no-tabs.blur .tabs_nav {
+    background: var(--tab-background-blur);
 }
 
 .tabs_list {
@@ -48,14 +55,19 @@
 }
 
 .tabs_nav .tab_tab {
-    background: var(--tab-gradient-inactive);
+    background: var(--tab-background-inactive);
     border-left: 1px solid var(--tab-border-color) !important;
     border-bottom: 0;
     transition: background .25s ease-out;
 }
 
 .no-tabs .tabs_nav .tab_tab {
-    background: var(--tab-gradient);
+    background: var(--tab-background);
+}
+
+.blur .tabs_nav .tab_tab,
+.no-tabs.blur .tabs_nav .tab_tab {
+    background: var(--tab-background-blur);
 }
 
 .tabs_nav .tab_text,
@@ -76,6 +88,12 @@
     color: var(--tab-text-color);
 }
 
+.blur .tabs_nav .tabs_title,
+.blur .tabs_nav .tabs_list .tab_active .tab_text {
+    transition: none;
+    color: var(--tab-text-color-inactive);
+}
+
 .tabs_nav .tab_tab.tab_first:not(.tab_active) {
     border-left: 0 !important;
 }
@@ -85,11 +103,15 @@
 }
 
 .tabs_nav .tab_tab:not(.tab_active):hover {
-    background: var(--tab-gradient-hover);
+    background: var(--tab-background-hover);
 }
 
 .tabs_nav .tabs_list .tab_active {
-    background: var(--tab-gradient);
+    background: var(--tab-background);
+}
+
+.blur .tabs_nav .tabs_list .tab_active {
+    background: var(--tab-background-blur-active);
 }
 
 .tabs_nav .tabs_list .tab_active .tab_text {