custom-electron-titlebar 4.2.5 → 4.2.7

package/README.md

@@ -7,7 +7,7 @@ This project is a typescript library for electron that allows you to configure a
 [![NPM](https://badgen.net/npm/v/custom-electron-titlebar?label=NPM)](https://npmjs.org/package/custom-electron-titlebar)
 [![Install size](https://badgen.net/packagephobia/install/custom-electron-titlebar?label=Install%20size)](https://packagephobia.com/result?p=custom-electron-titlebar)
 
-[📄 Visit Documentation](https://cet.alextrs.dev)
+[📄 Documentation](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
 
 Standard Title Bar
 
@@ -26,10 +26,16 @@ Custom color
 ![Screenshot 4](screenshots/cet-4.png)
 
 # 📦 Installing
-You can install this package with `npm`.
+You can install this package with `npm`, `pnpm` or `yarn`.
 ```sh
 npm install custom-electron-titlebar
 ```
+```sh
+pnpm add custom-electron-titlebar
+```
+```sh
+yarn add custom-electron-titlebar
+```
 
 # 🛠️ Usage
 The implementation is done as follows:
@@ -46,8 +52,10 @@ function createWindow() {
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
-    titleBarStyle: 'hidden',
     //frame: false, // needed if process.versions.electron < 14
+    titleBarStyle: 'hidden',
+    /* You can use *titleBarOverlay: true* to use the original Windows controls */
+    titleBarOverlay: true,
     webPreferences: {
       sandbox: false,
       preload: path.join(__dirname, 'preload.js')

package/consts.d.ts

@@ -6,9 +6,9 @@ export declare const INACTIVE_FOREGROUND: Color;
 export declare const ACTIVE_FOREGROUND: Color;
 export declare const DEFAULT_ITEM_SELECTOR: Color;
 export declare const IS_MAC_BIGSUR_OR_LATER: boolean;
-export declare const BOTTOM_TITLEBAR_HEIGHT = "60px";
-export declare const TOP_TITLEBAR_HEIGHT_MAC: string;
-export declare const TOP_TITLEBAR_HEIGHT_WIN = "32px";
+export declare const BOTTOM_TITLEBAR_HEIGHT = 60;
+export declare const TOP_TITLEBAR_HEIGHT_MAC: number;
+export declare const TOP_TITLEBAR_HEIGHT_WIN = 30;
 export declare const WINDOW_MIN_WIDTH = 400;
 export declare const WINDOW_MIN_HEIGHT = 270;
 export declare const MENU_MNEMONIC_REGEX: RegExp;
@@ -34,6 +34,7 @@ interface ITitlebarIcons extends IMenuIcons {
     };
 }
 export declare const menuIcons: ITitlebarIcons;
+export declare function getPx(value: number): string;
 /**
  * Handles mnemonics for menu items. Depending on OS:
  * - Windows: Supported via & character (replace && with &)

package/consts.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadWindowIcons = exports.applyFill = exports.parseAccelerator = exports.cleanMnemonic = exports.mnemonicButtonLabel = exports.mnemonicMenuLabel = exports.menuIcons = exports.MENU_ESCAPED_MNEMONIC_REGEX = exports.MENU_MNEMONIC_REGEX = exports.WINDOW_MIN_HEIGHT = exports.WINDOW_MIN_WIDTH = exports.TOP_TITLEBAR_HEIGHT_WIN = exports.TOP_TITLEBAR_HEIGHT_MAC = exports.BOTTOM_TITLEBAR_HEIGHT = exports.IS_MAC_BIGSUR_OR_LATER = exports.DEFAULT_ITEM_SELECTOR = exports.ACTIVE_FOREGROUND = exports.INACTIVE_FOREGROUND = exports.ACTIVE_FOREGROUND_DARK = exports.INACTIVE_FOREGROUND_DARK = void 0;
+exports.loadWindowIcons = exports.applyFill = exports.parseAccelerator = exports.cleanMnemonic = exports.mnemonicButtonLabel = exports.mnemonicMenuLabel = exports.getPx = exports.menuIcons = exports.MENU_ESCAPED_MNEMONIC_REGEX = exports.MENU_MNEMONIC_REGEX = exports.WINDOW_MIN_HEIGHT = exports.WINDOW_MIN_WIDTH = exports.TOP_TITLEBAR_HEIGHT_WIN = exports.TOP_TITLEBAR_HEIGHT_MAC = exports.BOTTOM_TITLEBAR_HEIGHT = exports.IS_MAC_BIGSUR_OR_LATER = exports.DEFAULT_ITEM_SELECTOR = exports.ACTIVE_FOREGROUND = exports.INACTIVE_FOREGROUND = exports.ACTIVE_FOREGROUND_DARK = exports.INACTIVE_FOREGROUND_DARK = void 0;
 const color_1 = require("./base/common/color");
 const platform_1 = require("./base/common/platform");
 exports.INACTIVE_FOREGROUND_DARK = _get__("color_1").Color.fromHex('#222222');
@@ -16,9 +16,9 @@ exports.INACTIVE_FOREGROUND = _get__("color_1").Color.fromHex('#EEEEEE');
 exports.ACTIVE_FOREGROUND = _get__("color_1").Color.fromHex('#FFFFFF');
 exports.DEFAULT_ITEM_SELECTOR = _get__("color_1").Color.fromHex('#0000001F');
 exports.IS_MAC_BIGSUR_OR_LATER = _get__("platform_1").isMacintosh && parseInt(process.getSystemVersion().split('.')[0]) >= 11;
-exports.BOTTOM_TITLEBAR_HEIGHT = '60px';
-exports.TOP_TITLEBAR_HEIGHT_MAC = exports.IS_MAC_BIGSUR_OR_LATER ? '28px' : '22px';
-exports.TOP_TITLEBAR_HEIGHT_WIN = '32px';
+exports.BOTTOM_TITLEBAR_HEIGHT = 60;
+exports.TOP_TITLEBAR_HEIGHT_MAC = exports.IS_MAC_BIGSUR_OR_LATER ? 28 : 22;
+exports.TOP_TITLEBAR_HEIGHT_WIN = 30;
 exports.WINDOW_MIN_WIDTH = 400;
 exports.WINDOW_MIN_HEIGHT = 270;
 exports.MENU_MNEMONIC_REGEX = /\(&([^\s&])\)|(^|[^&])&([^\s&])/;
@@ -47,6 +47,10 @@ exports.menuIcons = {
     close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z"/></svg>'
   }
 };
+function getPx(value) {
+  return `${value}px`;
+}
+exports.getPx = _get__("getPx");
 /**
  * Handles mnemonics for menu items. Depending on OS:
  * - Windows: Supported via & character (replace && with &)
@@ -205,6 +209,8 @@ function _get_original__(variableName) {
       return color_1;
     case "platform_1":
       return platform_1;
+    case "getPx":
+      return getPx;
     case "mnemonicMenuLabel":
       return mnemonicMenuLabel;
     case "mnemonicButtonLabel":

package/main/attach-titlebar-to-window.d.ts

@@ -1,3 +1,3 @@
 import { BrowserWindow } from 'electron';
 declare const _default: (browserWindow: BrowserWindow) => void;
-export = _default;
+export default _default;

package/main/attach-titlebar-to-window.js

@@ -1,11 +1,14 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 /* ---------------------------------------------------------------------------------------------
  *  Copyright (c) AlexTorresDev. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *-------------------------------------------------------------------------------------------- */
 const consts_1 = require("../consts");
-module.exports = browserWindow => {
+exports.default = browserWindow => {
   browserWindow.setMinimumSize(_get__("consts_1").WINDOW_MIN_WIDTH, _get__("consts_1").WINDOW_MIN_HEIGHT);
   browserWindow.on('enter-full-screen', () => {
     browserWindow.webContents.send('window-fullscreen', true);

package/main/setup-titlebar.d.ts

@@ -1,2 +1,2 @@
 declare const _default: () => void;
-export = _default;
+export default _default;

package/main/setup-titlebar.js

@@ -4,22 +4,15 @@
  *  Copyright (c) AlexTorresDev. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *-------------------------------------------------------------------------------------------- */
-function getMenuItemByCommandId(commandId, menu) {
-  if (!menu) return undefined;
-  for (const item of menu.items) {
-    if (item.submenu) {
-      const submenuItem = _get__("getMenuItemByCommandId")(commandId, item.submenu);
-      if (submenuItem) return submenuItem;
-    } else if (item.commandId === commandId) return item;
-  }
-  return undefined;
-}
-module.exports = () => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = () => {
   if (process.type !== 'browser') return;
   const {
     BrowserWindow,
-    nativeImage,
     Menu,
+    MenuItem,
     ipcMain
   } = require('electron');
   // Send menu to renderer title bar process
@@ -27,6 +20,7 @@ module.exports = () => {
   // Handle window events
   ipcMain.on('window-event', (event, eventName) => {
     const window = BrowserWindow.fromWebContents(event.sender);
+    /* eslint-disable indent */
     if (window) {
       switch (eventName) {
         case 'window-minimize':
@@ -60,7 +54,26 @@ module.exports = () => {
       event.returnValue = null;
     }
   });
+  ipcMain.on('update-window-controls', (event, args) => {
+    const window = BrowserWindow.fromWebContents(event.sender);
+    try {
+      if (window) window.setTitleBarOverlay(args);
+      event.returnValue = true;
+    } catch (_) {
+      event.returnValue = false;
+    }
+  });
 };
+function getMenuItemByCommandId(commandId, menu) {
+  if (!menu) return undefined;
+  for (const item of menu.items) {
+    if (item.submenu) {
+      const submenuItem = _get__("getMenuItemByCommandId")(commandId, item.submenu);
+      if (submenuItem) return submenuItem;
+    } else if (item.commandId === commandId) return item;
+  }
+  return undefined;
+}
 function _getGlobalObject() {
   try {
     if (!!global) {

package/menubar/index.js

@@ -510,9 +510,9 @@ class MenuBar extends _get__("lifecycle_1").Disposable {
       const replaceDoubleEscapes = str => str.replace(/&&/g, '&');
       if (escMatch) {
         titleElement.innerText = '';
-        titleElement.append(_get__("strings").ltrim(replaceDoubleEscapes(cleanLabel.substr(0, escMatch.index)), ' '), _get__("$")('mnemonic', {
+        titleElement.append(_get__("strings").ltrim(replaceDoubleEscapes(cleanLabel.substring(0, escMatch.index)), ' '), _get__("$")('mnemonic', {
           'aria-hidden': 'true'
-        }, escMatch[3]), _get__("strings").rtrim(replaceDoubleEscapes(cleanLabel.substr(escMatch.index + escMatch[0].length)), ' '));
+        }, escMatch[3]), _get__("strings").rtrim(replaceDoubleEscapes(cleanLabel.substring(escMatch.index + escMatch[0].length)), ' '));
       } else {
         titleElement.innerText = replaceDoubleEscapes(cleanLabel).trim();
       }

package/menubar/menu/index.js

@@ -13,7 +13,6 @@ const lifecycle_1 = require("../../base/common/lifecycle");
 const item_1 = require("./item");
 const keyCodes_1 = require("../../base/common/keyCodes");
 const keyboardEvent_1 = require("../../base/browser/keyboardEvent");
-const color_1 = require("../../base/common/color");
 const event_1 = require("../../base/common/event");
 const separator_1 = require("./separator");
 const submenu_1 = require("./submenu");
@@ -339,8 +338,7 @@ class CETMenu extends _get__("lifecycle_1").Disposable {
       if (transparency < 0) transparency = 0;
       if (transparency > 1) transparency = 1;
       const rgba = style.backgroundColor?.rgba;
-      const color = new (_get__("color_1").Color)(new (_get__("color_1").RGBA)(rgba.r, rgba.g, rgba.b, 1 - transparency));
-      container.style.backgroundColor = color.toString();
+      container.style.backgroundColor = `rgb(${rgba.r} ${rgba.g} ${rgba.b} / ${1 - transparency})`;
     }
     if (this.items) {
       this.items.forEach(item => {
@@ -467,8 +465,6 @@ function _get_original__(variableName) {
       return separator_1;
     case "item_1":
       return item_1;
-    case "color_1":
-      return color_1;
     case "lifecycle_1":
       return lifecycle_1;
     case "CETMenu":

package/menubar/menubar-options.d.ts

@@ -1,4 +1,3 @@
-import { Menu } from 'electron';
 import { Color } from '../base/common/color';
 export interface MenuBarOptions {
     /**
@@ -15,13 +14,6 @@ export interface MenuBarOptions {
      * **The default is undefined**
      */
     itemBackgroundColor?: Color;
-    /**
-     * @deprecated Use `setupTitlebar` method instead.
-     * The menu to show in the title bar.
-     * You can use `Menu` or not add this option and the menu created in the main process will be taken.
-     * **The default menu is undefined**
-     */
-    menu?: Menu;
     /**
      * The background color of the menu.
      * **The default is automatic**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-electron-titlebar",
-  "version": "4.2.5",
+  "version": "4.2.7",
   "description": "Library for electron that allows you to configure a fully customizable title bar.",
   "types": "./index.d.ts",
   "main": "./index.ts",
@@ -16,9 +16,9 @@
     "./main": "./main/index.js"
   },
   "scripts": {
-    "clean": "rimraf .",
+    "clean": "rimraf dist",
     "build:package": "tsc && tsc-alias",
-    "build:babel": "babel . --out-dir . --extensions \".js\"",
+    "build:babel": "babel dist --out-dir dist --extensions \".js\"",
     "start": "electron example/main.js",
     "dev": "npm run build && npm run start",
     "build": "npm run clean && npm run build:package && npm run build:babel",
@@ -47,23 +47,23 @@
     "electron": ">20.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.22.9",
-    "@babel/core": "7.22.9",
-    "@jest/globals": "29.6.1",
-    "@typescript-eslint/eslint-plugin": "6.1.0",
-    "@typescript-eslint/parser": "6.1.0",
+    "@babel/cli": "7.22.10",
+    "@babel/core": "7.22.10",
+    "@jest/globals": "29.6.2",
+    "@typescript-eslint/eslint-plugin": "6.3.0",
+    "@typescript-eslint/parser": "6.3.0",
     "babel-plugin-import-require-as-string": "1.0.2",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-rewire": "1.2.0",
-    "electron": "25.3.1",
-    "eslint": "8.45.0",
-    "eslint-config-prettier": "8.8.0",
+    "electron": "25.5.0",
+    "eslint": "8.47.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-standard": "17.1.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-n": "16.0.1",
     "eslint-plugin-promise": "6.1.1",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "29.6.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "29.6.2",
     "rimraf": "5.0.1",
     "standard": "17.1.0",
     "ts-jest": "29.1.1",

package/titlebar/index.js

@@ -208,6 +208,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     const minimizable = this.currentOptions.minimizable;
     const maximizable = this.currentOptions.maximizable;
     const closeable = this.currentOptions.closeable;
+    this.onDidChangeMaximized(_get__("electron_1").ipcRenderer.sendSync('window-event', 'window-is-maximized'));
     _get__("electron_1").ipcRenderer.on('window-maximize', (_, isMaximized) => this.onDidChangeMaximized(isMaximized));
     _get__("electron_1").ipcRenderer.on('window-fullscreen', (_, isFullScreen) => this.onWindowFullScreen(isFullScreen));
     _get__("electron_1").ipcRenderer.on('window-focus', (_, isFocused) => this.onWindowFocus(isFocused));
@@ -258,7 +259,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     const maximize = this.controls.maximize;
     if (maximize) {
       maximize.title = isMaximized ? this.currentOptions.tooltips?.restoreDown : this.currentOptions.tooltips?.maximize;
-      maximize.innerHTML = isMaximized ? this.platformIcons.restore : this.platformIcons.maximize;
+      maximize.innerHTML = isMaximized ? this.platformIcons?.restore : this.platformIcons?.maximize;
     }
     if (this.resizer) {
       if (isMaximized) (0, _get__("dom_1").hide)(this.resizer.top, this.resizer.left);else (0, _get__("dom_1").show)(this.resizer.top, this.resizer.left);
@@ -284,7 +285,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     }
     const backgroundColor = this.isInactive ? this.currentOptions.backgroundColor?.lighten(0.12) : this.currentOptions.backgroundColor;
     if (backgroundColor) {
-      this.titlebar.style.backgroundColor = backgroundColor.toString();
+      this.titlebar.style.backgroundColor = backgroundColor?.toString();
     }
     let foregroundColor;
     if (backgroundColor?.isLighter()) {
@@ -294,16 +295,26 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
       (0, _get__("dom_1").removeClass)(this.titlebar, 'light');
       foregroundColor = this.isInactive ? _get__("consts_1").INACTIVE_FOREGROUND : _get__("consts_1").ACTIVE_FOREGROUND;
     }
-    this.titlebar.style.color = foregroundColor.toString();
+    this.titlebar.style.color = foregroundColor?.toString();
+    const updatedWindowControls = _get__("electron_1").ipcRenderer.sendSync('update-window-controls', {
+      color: backgroundColor?.toString(),
+      symbolColor: foregroundColor?.toString(),
+      height: _get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN
+    });
+    if (updatedWindowControls) {
+      (0, _get__("dom_1").hide)(this.controlsContainer);
+    } else {
+      (0, _get__("dom_1").show)(this.controlsContainer);
+    }
     if (this.menuBar) {
       let fgColor;
-      const backgroundColor = this.currentOptions.menuBarBackgroundColor ?? this.currentOptions.backgroundColor?.darken(0.12);
+      const backgroundColor = this.currentOptions.menuBarBackgroundColor || this.currentOptions.backgroundColor.darken(0.12);
       const foregroundColor = backgroundColor?.isLighter() ? _get__("consts_1").INACTIVE_FOREGROUND_DARK : _get__("consts_1").INACTIVE_FOREGROUND;
-      const bgColor = !this.currentOptions.itemBackgroundColor || this.currentOptions.itemBackgroundColor.equals(backgroundColor) ? _get__("consts_1").DEFAULT_ITEM_SELECTOR : this.currentOptions.itemBackgroundColor;
-      if (bgColor.equals(_get__("consts_1").DEFAULT_ITEM_SELECTOR)) {
+      const bgColor = this.currentOptions.itemBackgroundColor && !this.currentOptions.itemBackgroundColor.equals(backgroundColor) ? this.currentOptions.itemBackgroundColor : _get__("consts_1").DEFAULT_ITEM_SELECTOR;
+      if (bgColor?.equals(_get__("consts_1").DEFAULT_ITEM_SELECTOR)) {
         fgColor = backgroundColor?.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
       } else {
-        fgColor = bgColor.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
+        fgColor = bgColor?.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
       }
       this.menuBar.setStyles({
         backgroundColor,
@@ -337,6 +348,8 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
    * @param fullscreen Fullscreen state of the window
    */
   onWindowFullScreen(fullscreen) {
+    const height = _get__("platform_1").isMacintosh ? _get__("consts_1").TOP_TITLEBAR_HEIGHT_MAC : _get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN;
+    const hasShadow = this.currentOptions.shadow;
     if (!_get__("platform_1").isMacintosh) {
       if (fullscreen) {
         (0, _get__("dom_1").hide)(this.titlebar);
@@ -344,10 +357,10 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
       } else {
         (0, _get__("dom_1").show)(this.titlebar);
         if (this.currentOptions.menuPosition === 'bottom') {
-          this.container.style.top = _get__("consts_1").BOTTOM_TITLEBAR_HEIGHT;
-          this.controlsContainer.style.height = _get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN;
+          this.container.style.top = (0, _get__("consts_1").getPx)(_get__("consts_1").BOTTOM_TITLEBAR_HEIGHT);
+          this.controlsContainer.style.height = (0, _get__("consts_1").getPx)(_get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN);
         } else {
-          this.container.style.top = _get__("platform_1").isMacintosh ? _get__("consts_1").TOP_TITLEBAR_HEIGHT_MAC : _get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN;
+          this.container.style.top = (0, _get__("consts_1").getPx)(height + (hasShadow ? 1 : 0));
         }
       }
     }
@@ -399,13 +412,13 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
       (0, _get__("dom_1").removeClass)(this.title, 'cet-title-right');
       (0, _get__("dom_1").removeClass)(this.title, 'cet-title-center');
       if (menuPosition !== 'bottom') {
-        /* addDisposableListener(window, 'resize', () => {
-            if (window.innerWidth >= 1188) {
-                addClass(this.title, 'cet-title-center')
-            } else {
-                removeClass(this.title, 'cet-title-center')
-            }
-        }) */
+        (0, _get__("dom_1").addDisposableListener)(window, 'resize', () => {
+          if (window.innerWidth >= 1188) {
+            (0, _get__("dom_1").addClass)(this.title, 'cet-title-center');
+          } else {
+            (0, _get__("dom_1").removeClass)(this.title, 'cet-title-center');
+          }
+        });
         (0, _get__("dom_1").addClass)(this.title, 'cet-title-center');
       }
       if (!_get__("platform_1").isMacintosh && order === 'first-buttons') {
@@ -420,6 +433,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
    * @param backgroundColor The color for the background
    */
   updateBackground(backgroundColor) {
+    if (typeof backgroundColor === 'string') backgroundColor = _get__("color_1").Color.fromHex(backgroundColor);
     this.currentOptions.backgroundColor = backgroundColor;
     this.updateStyles();
     return this;
@@ -429,6 +443,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
    * @param itemBGColor The color for the item background
    */
   updateItemBGColor(itemBGColor) {
+    if (typeof itemBGColor === 'string') itemBGColor = _get__("color_1").Color.fromHex(itemBGColor);
     this.currentOptions.itemBackgroundColor = itemBGColor;
     this.updateStyles();
     return this;
@@ -449,15 +464,16 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
   updateMenuPosition(menuPosition) {
     const height = _get__("platform_1").isMacintosh ? _get__("consts_1").TOP_TITLEBAR_HEIGHT_MAC : _get__("consts_1").TOP_TITLEBAR_HEIGHT_WIN;
     const onlyRendererMenuBar = this.currentOptions.onlyShowMenuBar;
+    const hasShadow = this.currentOptions.shadow;
     this.currentOptions.menuPosition = menuPosition;
     if (menuPosition === 'left' || onlyRendererMenuBar) {
-      this.titlebar.style.height = height;
-      this.container.style.top = height;
+      this.titlebar.style.height = (0, _get__("consts_1").getPx)(height + (hasShadow ? 1 : 0));
+      this.container.style.top = (0, _get__("consts_1").getPx)(height + (hasShadow ? 1 : 0));
       (0, _get__("dom_1").removeClass)(this.menuBarContainer, 'bottom');
     } else {
-      this.titlebar.style.height = _get__("consts_1").BOTTOM_TITLEBAR_HEIGHT;
-      this.container.style.top = _get__("consts_1").BOTTOM_TITLEBAR_HEIGHT;
-      this.controlsContainer.style.height = height;
+      this.titlebar.style.height = (0, _get__("consts_1").getPx)(_get__("consts_1").BOTTOM_TITLEBAR_HEIGHT);
+      this.container.style.top = (0, _get__("consts_1").getPx)(_get__("consts_1").BOTTOM_TITLEBAR_HEIGHT);
+      this.controlsContainer.style.height = (0, _get__("consts_1").getPx)(height);
       (0, _get__("dom_1").addClass)(this.menuBarContainer, 'bottom');
     }
     return this;

package/titlebar/themebar.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ThemeBar = void 0;
 const lifecycle_1 = require("../base/common/lifecycle");
-const baseTheme = "body {\n  margin: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Titlebar */\n.cet-titlebar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  font-size: 13px;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n  padding: 0 16px;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  zoom: 1;\n  width: 100%;\n  height: 31px;\n  line-height: 31px;\n  z-index: 99999;\n}\n\n.cet-titlebar *,\n.cet-titlebar *:before,\n.cet-titlebar *:after {\n  box-sizing: border-box;\n}\n\n.cet-titlebar.cet-windows,\n.cet-titlebar.cet-linux,\n.cet-titlebar.cet-freebsd {\n  padding: 0;\n  height: 30px;\n  line-height: 30px;\n  justify-content: left;\n  overflow: visible;\n}\n\n/* Inverted */\n.cet-titlebar.cet-inverted {\n  flex-direction: row-reverse;\n}\n\n.cet-titlebar.cet-inverted .cet-menubar,\n.cet-titlebar.cet-inverted .cet-window-controls {\n  flex-direction: row-reverse;\n  margin-left: 20px;\n  margin-right: 0;\n}\n\n/* First buttons */\n.cet-titlebar.cet-first-buttons .cet-window-controls {\n  order: -1;\n  margin: 0 5px 0 0;\n}\n\n.cet-titlebar.cet-inverted .cet-window-controls {\n  margin: 0 5px 0 0;\n}\n\n/* Shadow */\n.cet-titlebar.cet-shadow {\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n}\n\n/* Drag region */\n.cet-drag-region {\n  top: 0;\n  left: 0;\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  -webkit-app-region: drag;\n}\n\n/* Icon */\n.cet-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 30px;\n  z-index: 99;\n  overflow: hidden;\n}\n\n/* Title */\n.cet-title {\n  flex: 0 1 auto;\n  font-size: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  zoom: 1;\n}\n\n/* Title alignment */\n.cet-title.cet-title-left {\n  margin-left: 8px;\n  margin-right: auto;\n}\n\n.cet-title.cet-title-right {\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n.cet-title.cet-title-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.cet-title.cet-bigsur {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Window controls */\n.cet-window-controls {\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  position: relative;\n  z-index: 99;\n  -webkit-app-region: no-drag;\n  height: 30px;\n  font-family: initial !important;\n  margin-left: auto;\n}\n\n.cet-control-icon {\n  width: 46px;\n}\n\n.cet-control-icon:not(.inactive):hover {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.light .cet-control-icon:not(.inactive):hover {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-control-icon.inactive svg {\n  opacity: 0.4;\n}\n\n.cet-control-icon svg {\n  width: 10px;\n  height: -webkit-fill-available;\n  fill: #fff;\n  display: initial !important;\n  vertical-align: unset !important;\n}\n\n.cet-titlebar.light .cet-control-icon svg {\n  fill: #222222 !important;\n}\n\n.cet-control-close:not(.inactive):hover {\n  background-color: rgb(232 17 35 / 90%) !important;\n}\n\n.cet-control-close:not(.inactive):hover svg {\n  fill: #fff !important;\n}\n\n/* Resizer */\n.cet-resizer {\n  -webkit-app-region: no-drag;\n  position: absolute;\n}\n\n.cet-resizer.left {\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 100%;\n}\n\n.cet-resizer.top {\n  top: 0;\n  width: 100%;\n  height: 6px;\n}\n\n/* Container */\n.cet-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: auto;\n  z-index: 1;\n}\n\n/* MenuBar */\n.cet-menubar {\n  display: flex;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-wrap: wrap;\n  margin-right: 20px;\n}\n\n.cet-menubar.bottom {\n  order: 1;\n  width: 100%;\n  padding: 0 5px 5px;\n  margin-right: 0;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button {\n  border-radius: 4px;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button .cet-menubar-menu-title {\n  line-height: 26px;\n}\n\n.cet-menubar .cet-menubar-menu-button {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  height: 100%;\n  cursor: default;\n  zoom: 1;\n  white-space: nowrap;\n  -webkit-app-region: no-drag;\n  outline: 0;\n}\n\n.cet-menubar .cet-menubar-menu-button .cet-menubar-menu-title {\n  font-size: 12px;\n}\n\n.cet-menubar .cet-menubar-menu-button.disabled {\n  opacity: 0.4;\n}\n\n.cet-menubar .cet-menubar-menu-button:not(.disabled):focus,\n.cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):focus,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-menubar-menu-container {\n  position: absolute;\n  display: block;\n  left: 0px;\n  opacity: 1;\n  outline: 0;\n  border: none;\n  text-align: left;\n  margin: 0 auto;\n  margin-left: 0;\n  font-size: inherit;\n  overflow-x: visible;\n  overflow-y: visible;\n  -webkit-overflow-scrolling: touch;\n  justify-content: flex-end;\n  white-space: nowrap;\n  border-radius: 7px;\n  backdrop-filter: blur(5px);\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 99999;\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar {\n  width: 8px;\n  height: 4px;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-track {\n  border: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: rgba(110, 110, 110, 0.2);\n}\n\n.cet-menubar-menu-container:focus {\n  outline: 0;\n}\n\n.cet-menubar-menu-container .cet-action-item {\n  padding: 0;\n  margin: 0;\n  transform: none;\n  display: -ms-flexbox;\n  display: flex;\n  outline: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.active {\n  transform: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.disabled .cet-action-menu-item {\n  opacity: 0.4;\n}\n\n.cet-menubar-menu-container .cet-action-item .cet-submenu {\n  position: absolute;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  display: -ms-flexbox;\n  display: flex;\n  height: 2.231em;\n  margin: 4px 3px;\n  align-items: center;\n  position: relative;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.cet-menubar-menu-container .cet-action-label {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  text-decoration: none;\n  padding: 0 1em;\n  background: none;\n  font-size: 12px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:not(.separator) {\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n  -o-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 2em 0 0.8em;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator {\n  opacity: 0.1;\n  font-size: inherit;\n  width: 100%;\n  border-bottom: 1px solid transparent;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator.text {\n  padding: 0.7em 1em 0.1em 1em;\n  font-weight: bold;\n  opacity: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:hover {\n  color: inherit;\n}\n\n.cet-menubar-menu-container .keybinding,\n.cet-menubar-menu-container .cet-submenu-indicator {\n  display: inline-block;\n  -ms-flex: 2 1 auto;\n  flex: 2 1 auto;\n  padding: 0 2em 0 1em;\n  text-align: right;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator {\n  position: absolute;\n  right: 4px;\n  height: 12px;\n  width: 12px;\n  padding: 0;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator img,\n.cet-menubar-menu-container .cet-menu-item-icon .icon,\n.cet-menubar-menu-container .cet-submenu-indicator svg,\n.cet-menubar-menu-container .cet-menu-item-icon svg {\n  display: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item.checked>.cet-menu-item-icon.checkbox {\n  visibility: visible;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0 0 0 12px;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon.checkbox {\n  visibility: hidden;\n}";
+const baseTheme = "body {\n  margin: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Titlebar */\n.cet-titlebar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  font-size: 13px;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n  padding: 0 16px;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  zoom: 1;\n  width: 100%;\n  height: 31px;\n  line-height: 31px;\n  z-index: 99999;\n}\n\n.cet-titlebar *,\n.cet-titlebar *:before,\n.cet-titlebar *:after {\n  box-sizing: border-box;\n}\n\n.cet-titlebar.cet-windows,\n.cet-titlebar.cet-linux,\n.cet-titlebar.cet-freebsd {\n  padding: 0;\n  height: 30px;\n  line-height: 30px;\n  justify-content: left;\n  overflow: visible;\n}\n\n/* Inverted */\n.cet-titlebar.cet-inverted {\n  flex-direction: row-reverse;\n}\n\n.cet-titlebar.cet-inverted .cet-menubar,\n.cet-titlebar.cet-inverted .cet-window-controls {\n  flex-direction: row-reverse;\n  margin-left: 20px;\n  margin-right: 0;\n}\n\n/* First buttons */\n.cet-titlebar.cet-first-buttons .cet-window-controls {\n  order: -1;\n  margin: 0 5px 0 0;\n}\n\n.cet-titlebar.cet-inverted .cet-window-controls {\n  margin: 0 5px 0 0;\n}\n\n/* Shadow */\n.cet-titlebar.cet-shadow {\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n}\n\n/* Drag region */\n.cet-drag-region {\n  top: 0;\n  left: 0;\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  -webkit-app-region: drag;\n}\n\n/* Icon */\n.cet-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 30px;\n  z-index: 99;\n  overflow: hidden;\n}\n\n/* Title */\n.cet-title {\n  flex: 0 1 auto;\n  font-size: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  zoom: 1;\n}\n\n/* Title alignment */\n.cet-title.cet-title-left {\n  margin-left: 8px;\n  margin-right: auto;\n}\n\n.cet-title.cet-title-right {\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n.cet-title.cet-title-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.cet-title.cet-bigsur {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Window controls */\n.cet-window-controls {\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  position: relative;\n  z-index: 99;\n  -webkit-app-region: no-drag;\n  height: 30px;\n  font-family: initial !important;\n  margin-left: auto;\n}\n\n.cet-control-icon {\n  width: 2.85rem;\n}\n\n.cet-control-icon:not(.inactive):hover {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.light .cet-control-icon:not(.inactive):hover {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-control-icon.inactive svg {\n  opacity: 0.4;\n}\n\n.cet-control-icon svg {\n  width: 10px;\n  height: -webkit-fill-available;\n  fill: #fff;\n  display: initial !important;\n  vertical-align: unset !important;\n}\n\n.cet-titlebar.light .cet-control-icon svg {\n  fill: #222222 !important;\n}\n\n.cet-control-close:not(.inactive):hover {\n  background-color: rgb(232 17 35 / 90%) !important;\n}\n\n.cet-control-close:not(.inactive):hover svg {\n  fill: #fff !important;\n}\n\n/* Resizer */\n.cet-resizer {\n  -webkit-app-region: no-drag;\n  position: absolute;\n}\n\n.cet-resizer.left {\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 100%;\n}\n\n.cet-resizer.top {\n  top: 0;\n  width: 100%;\n  height: 6px;\n}\n\n/* Container */\n.cet-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: auto;\n  z-index: 1;\n}\n\n/* MenuBar */\n.cet-menubar {\n  display: flex;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-wrap: wrap;\n  margin-right: 20px;\n}\n\n.cet-menubar.bottom {\n  order: 1;\n  width: 100%;\n  padding: 0 5px 5px;\n  margin-right: 0;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button {\n  border-radius: 4px;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button .cet-menubar-menu-title {\n  line-height: 26px;\n}\n\n.cet-menubar .cet-menubar-menu-button {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  height: 100%;\n  cursor: default;\n  zoom: 1;\n  white-space: nowrap;\n  -webkit-app-region: no-drag;\n  outline: 0;\n}\n\n.cet-menubar .cet-menubar-menu-button .cet-menubar-menu-title {\n  font-size: 12px;\n}\n\n.cet-menubar .cet-menubar-menu-button.disabled {\n  opacity: 0.4;\n}\n\n.cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-menubar-menu-container {\n  position: absolute;\n  display: block;\n  left: 0px;\n  opacity: 1;\n  outline: 0;\n  border: none;\n  text-align: left;\n  margin: 0 auto;\n  margin-left: 0;\n  font-size: inherit;\n  overflow-x: visible;\n  overflow-y: visible;\n  -webkit-overflow-scrolling: touch;\n  justify-content: flex-end;\n  white-space: nowrap;\n  border-radius: 7px;\n  backdrop-filter: blur(10px);\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 99999;\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar {\n  width: 8px;\n  height: 4px;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-track {\n  border: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: rgba(110, 110, 110, 0.2);\n}\n\n.cet-menubar-menu-container:focus {\n  outline: 0;\n}\n\n.cet-menubar-menu-container .cet-action-item {\n  padding: 0;\n  margin: 0;\n  transform: none;\n  display: -ms-flexbox;\n  display: flex;\n  outline: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.active {\n  transform: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.disabled .cet-action-menu-item {\n  opacity: 0.4;\n}\n\n.cet-menubar-menu-container .cet-action-item .cet-submenu {\n  position: absolute;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  display: -ms-flexbox;\n  display: flex;\n  height: 2.231em;\n  margin: 4px 3px;\n  align-items: center;\n  position: relative;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.cet-menubar-menu-container .cet-action-label {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  text-decoration: none;\n  padding: 0 1em;\n  background: none;\n  font-size: 12px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:not(.separator) {\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n  -o-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 2em 0 0.8em;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator {\n  opacity: 0.1;\n  font-size: inherit;\n  width: 100%;\n  border-bottom: 1px solid transparent;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator.text {\n  padding: 0.7em 1em 0.1em 1em;\n  font-weight: bold;\n  opacity: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:hover {\n  color: inherit;\n}\n\n.cet-menubar-menu-container .keybinding,\n.cet-menubar-menu-container .cet-submenu-indicator {\n  display: inline-block;\n  -ms-flex: 2 1 auto;\n  flex: 2 1 auto;\n  padding: 0 2em 0 1em;\n  text-align: right;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator {\n  position: absolute;\n  right: 4px;\n  height: 12px;\n  width: 12px;\n  padding: 0;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator img,\n.cet-menubar-menu-container .cet-menu-item-icon .icon,\n.cet-menubar-menu-container .cet-submenu-indicator svg,\n.cet-menubar-menu-container .cet-menu-item-icon svg {\n  display: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item.checked>.cet-menu-item-icon.checkbox {\n  visibility: visible;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0 0 0 12px;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon.checkbox {\n  visibility: hidden;\n}";
 const macTheme = "";
 const winTheme = "";
 class ThemingRegistry extends _get__("lifecycle_1").Disposable {