Last active
April 13, 2026 14:40
-
-
Save tarik02/0a3276b19fa0d9912faa039aef8507ee to your computer and use it in GitHub Desktop.
Electron WCO smoke
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| :root { | |
| --fallback-title-bar-height: 40px; | |
| } | |
| .draggable { | |
| app-region: drag; | |
| /* Pre-fix app-region during standardization process */ | |
| -webkit-app-region: drag; | |
| } | |
| .nonDraggable { | |
| app-region: no-drag; | |
| /* Pre-fix app-region during standardization process */ | |
| -webkit-app-region: no-drag; | |
| } | |
| #titleBarContainer { | |
| position: absolute; | |
| top: env(titlebar-area-y, 0); | |
| height: env(titlebar-area-height, var(--fallback-title-bar-height)); | |
| width: 100%; | |
| } | |
| #titleBar { | |
| position: absolute; | |
| top: 0; | |
| display: flex; | |
| user-select: none; | |
| height: 100%; | |
| left: env(titlebar-area-x, 0); | |
| width: env(titlebar-area-width, 100%); | |
| } | |
| #titleBarSizeIndicator { | |
| position: absolute; | |
| top: env(titlebar-area-height, var(--fallback-title-bar-height)); | |
| left: env(titlebar-area-x, 0); | |
| width: env(titlebar-area-width, 100%); | |
| border: 1px solid black; | |
| height: 22px; | |
| } | |
| #mainContent { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: env(titlebar-area-height, var(--fallback-title-bar-height)); | |
| overflow-y: scroll; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const {ipcRenderer} = require('electron'); | |
| navigator.windowControlsOverlay.ongeometrychange = function() { | |
| const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect(); | |
| ipcRenderer.send('geometrychange', {x, y, width, height}); | |
| }; | |
| </script> | |
| <div id="titleBarContainer"> | |
| <div id="titleBar" class=" draggable"> | |
| <span class="draggable">Title goes here</span> | |
| <input class="nonDraggable" type="text" placeholder="Search"></input> | |
| </div> | |
| </div> | |
| <div id="titleBarSizeIndicator"> | |
| Titlebar Size Indicator | |
| </div> | |
| <div id="mainContent"><!-- The rest of the webpage --></div> | |
| <script> | |
| function getCssOverlayProperties() { | |
| const cssOverlayProps = {}; | |
| const titleBarContainer = document.getElementById('titleBarContainer'); | |
| const titleBar = document.getElementById('titleBar'); | |
| cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value; | |
| cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value; | |
| cssOverlayProps.x = titleBar.computedStyleMap().get('left').value; | |
| cssOverlayProps.width = titleBar.computedStyleMap().get('width').value; | |
| return cssOverlayProps; | |
| } | |
| function getJSOverlayProperties() { | |
| const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect(); | |
| return {x, y, width, height}; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { app, BrowserWindow } from 'electron'; | |
| function createWindow() { | |
| const win = new BrowserWindow({ | |
| width: 1200, | |
| height: 800, | |
| titleBarStyle: 'hidden', | |
| titleBarOverlay: { | |
| height: 40 | |
| }, | |
| }); | |
| win.loadFile('index.html'); | |
| } | |
| app.whenReady().then(createWindow); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "wco-smoke", | |
| "scripts": { | |
| "start": "electron main.js" | |
| }, | |
| "dependencies": { | |
| "electron": "^41.2.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment