Maximize window state will show a gap on top

Description

When I maximize the window, there is a gap above the fake title bar. Apply to:

• dragging title bar,
• clicking on maximize button,
• using hotkey Win + Up
• double clicking on title bar

Version

• GitHub Desktop: 1.2.6
• Operating system: 10.0.17134.112 x64

Steps to Reproduce

1. Open GitHub in normal window state
2. Maximize the window. The issue occurs.
3. Restore window state to normal
4. Maximize the window again, there is no issue.
5. Keep repeating this, the issue will happen again.

Expected Behavior

There is no gap on top of the window

Actual Behavior

There is a gap which is title bar location on top of window

Additional Information

[shiftkey]

@j-f1 it does not (I expect all the window to be tinted blue here)

Adding electron to indicate this might be a framework issue to dig into.

[shiftkey]

After digging into this a bit further I think this is a problem with how Electron handles the events. Maybe this has been fixed, but here’s my setup so far:

• make these changes to master

diff --git a/app/src/lib/stores/app-store.ts b/app/src/lib/stores/app-store.ts
index 8adcaa199..fa1963aed 100644
--- a/app/src/lib/stores/app-store.ts
+++ b/app/src/lib/stores/app-store.ts
@@ -315,7 +315,8 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private wireupIpcEventHandlers(window: Electron.BrowserWindow) {
     ipcRenderer.on(
       'window-state-changed',
-      (event: Electron.IpcMessageEvent, args: any[]) => {
+      (event: Electron.IpcMessageEvent, state: WindowState) => {
+        log.warn(`window-state-changed: ${state}`)
         this.windowState = getWindowState(window)
         this.emitUpdate()
       }
diff --git a/app/src/ui/index.tsx b/app/src/ui/index.tsx
index ad88a9b79..3c6e59865 100644
--- a/app/src/ui/index.tsx
+++ b/app/src/ui/index.tsx
@@ -151,7 +151,34 @@ dispatcher.registerErrorHandler(missingRepositoryHandler)
 
 document.body.classList.add(`platform-${process.platform}`)
 
-dispatcher.setAppFocusState(remote.getCurrentWindow().isFocused())
+const currentWindow = remote.getCurrentWindow()
+
+dispatcher.setAppFocusState(currentWindow.isFocused())
+
+window.addEventListener('resize', resizeThrottler, false)
+
+let resizeTimeout: number | null = null
+function resizeThrottler() {
+  // ignore resize events as long as an actualResizeHandler execution is in the queue
+  if (!resizeTimeout) {
+    resizeTimeout = window.setTimeout(function() {
+      resizeTimeout = null
+      actualResizeHandler()
+
+      // The actualResizeHandler will execute at a rate of 15fps
+    }, 66)
+  }
+}
+
+function actualResizeHandler() {
+  if (currentWindow.isMaximized()) {
+    const [x, y] = currentWindow.getPosition()
+    const bounds = currentWindow.getContentBounds()
+    log.warn(
+      `maximized position: [${x}, ${y}] - bounds: ${JSON.stringify(bounds)}`
+    )
+  }
+}
 
 ipcRenderer.on('focus', () => {
   const { selectedState } = appStore.getState()

When you run the app up and switch between maximized and normal state using WinKey + Up Arrow you’ll notice this pattern in the logs:

Note that we’re only listening to these window change events, and I don’t think we’re setting these bounds anywhere.

The next step is to upgrade to Electron 2.0.x and see if it’s been fixed there.