feat: enable Windows Control Overlay on Linux

[codebytere]

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

WCO LTR

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();
});

Checklist

• PR description included and stakeholders cc'd
• npm test passes
• tests are changed or added
• relevant documentation, tutorials, templates and examples are changed or added
• PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Enabled the Windows Control Overlay API on Linux.

[erickzhao]

API LGTM

[jkleinsc]

API LGTM

[deepak1556]

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

[ckerr]

API LGTM

[deepak1556]

Works great, left feedback on the frame border.

[deepak1556]

This causes a think frame border for resizing outside the client area in window restored mode, also this seems chrome UI specific. Can we remove it ?

[deepak1556]

There is also the issue with theme adjustment with the current implementation,

native titlebar:

custom titlebar:

I believe the issue arises from the class used to draw the caption buttons //ui/views/window/frame_caption_button.h which does not use any gtk api but rather has a generic Chrome specific implementation. On the other hand, ClientFrameViewLinux used for wayland CSD, relies on //ui/gtk/nav_button_provider_gtk which seems to work well across different themes. Is there a reason we cannot reuse ClientFrameViewLinux to support WCO on x11 ?

@ruihe774 since you have been working on this support for wayland, do you have thoughts on the above ? My question is mainly if the window caption container code can be shared between wayland and x11.

[ruihe774]

@ruihe774 since you have been working on this support for wayland, do you have thoughts on the above ? My question is mainly if the window caption container code can be shared between wayland and x11.

Yes. I've also used ClientFrameViewLinux to implement WCO for x11 in 426f5e1. The title of my PR has not updated yet, which is misleading. Sorry for that.

[deepak1556]

Missed that, thanks for clarifying! If that works well for both x11 and wayland then seems like a better route. @codebytere thoughts ?