Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Conversation

codebytere
Copy link
Member

@codebytere codebytere commented Apr 3, 2024

Description of Change

Closes #23665.

This PR enables the Windows Control Overlay API on Linux. To do so, we create a new subclass of FramelessView. This primarily follows logic from upstream's implementation with modifications for our use case and stripped of logic irrelevant to Electron.

cc @bpasero @deepak1556

Todo:

  • Ensure existing WCO tests pass
  • Test with RTL and LTR
  • Test that color can be changed dynamically
  • Test that height can be changed dynamically

Functionality on Wayland will be approached as a follow-up as I don't currently have the requisite hardware to test this.

WCO RTL

Screenshot 2024-04-03 at 9 28 20 PM

WCO LTR

Screenshot 2024-04-03 at 9 29 06 PM

Dynamic WCO Update

Gif Demonstration with the following code:

const { app, BrowserWindow } = require('electron');

async function createWindow () {
  const mainWindow = new BrowserWindow({
    titleBarOverlay: {
      color: '#0000f0',
      symbolColor: '#f54260'
    },
    titleBarStyle: 'hidden'
  });

  await mainWindow.loadURL('data:text/html,<h1>Hello, World!</h1>');

  setTimeout(() => {
    console.log('Setting title bar overlay color!!!');
    mainWindow.setTitleBarOverlay({
      color: '#355E3B',
      symbolColor: '#99aebd',
      height: 40
    });
  }, 3000);
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

wco-update-linux

Checklist

Release Notes

Notes: Enabled the Windows Control Overlay API on Linux.

@electron-cation electron-cation bot added the new-pr 🌱 PR opened recently label Apr 3, 2024
@codebytere codebytere force-pushed the wco-linux branch 5 times, most recently from 7170094 to 8d1d279 Compare April 4, 2024 10:34
@codebytere codebytere added semver/minor backwards-compatible functionality target/28-x-y PR should also be added to the "28-x-y" branch. target/29-x-y PR should also be added to the "29-x-y" branch. target/30-x-y PR should also be added to the "30-x-y" branch. labels Apr 4, 2024
@codebytere codebytere marked this pull request as ready for review April 4, 2024 15:19
Copy link
Member

@erickzhao erickzhao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API LGTM

docs/api/structures/base-window-options.md Outdated Show resolved Hide resolved
Copy link
Member

@jkleinsc jkleinsc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API LGTM

@deepak1556
Copy link
Member

Sorry for the delay here, need some time to verify the changes. I will have an update later this week.

@github-actions github-actions bot added the target/31-x-y PR should also be added to the "31-x-y" branch. label Apr 17, 2024
@ckerr
Copy link
Member

ckerr commented Apr 24, 2024

API LGTM

@codebytere codebytere merged commit 32e5012 into main Jun 27, 2024
@release-clerk
Copy link

release-clerk bot commented Jun 27, 2024

Release Notes Persisted

Enabled the Windows Control Overlay API on Linux.

@trop
Copy link
Contributor

trop bot commented Jun 27, 2024

I have automatically backported this PR to "32-x-y", please check out #42681

@trop trop bot added in-flight/32-x-y and removed target/32-x-y PR should also be added to the "32-x-y" branch. labels Jun 27, 2024
@trop
Copy link
Contributor

trop bot commented Jun 27, 2024

I have automatically backported this PR to "31-x-y", please check out #42682

@trop
Copy link
Contributor

trop bot commented Jun 27, 2024

I have automatically backported this PR to "30-x-y", please check out #42683

@trop trop bot added in-flight/31-x-y in-flight/30-x-y merged/31-x-y PR was merged to the "31-x-y" branch. merged/32-x-y PR was merged to the "32-x-y" branch. merged/30-x-y PR was merged to the "30-x-y" branch. and removed target/31-x-y PR should also be added to the "31-x-y" branch. target/30-x-y PR should also be added to the "30-x-y" branch. in-flight/31-x-y in-flight/32-x-y in-flight/30-x-y labels Jun 27, 2024
@LasseRosenow
Copy link

LasseRosenow commented Aug 13, 2024

Thank you so much for this work!

With this merged on linux we finally get the correct button styling :), but on Fedora by default the maximize and minimize buttons are hidden. Electron does not respect this using Windows Control Overlays.

Is it planned to fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api-review/approved ✅ merged/30-x-y PR was merged to the "30-x-y" branch. merged/31-x-y PR was merged to the "31-x-y" branch. merged/32-x-y PR was merged to the "32-x-y" branch. semver/minor backwards-compatible functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Embed window controls ( - + x ) / traffic lights in the app when running on Linux

7 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.