Transparent window background (desktop-only)

api/CONFIG.md

@@ -192,6 +192,7 @@ pfx |  |  A relative path to the pfx file used for signing.
 
 Key | Default Value | Description
 :--- | :--- | :---
+transparent | false |  Use system window background color.
 height |  |  The initial height of the first window in pixels or as a percentage of the screen.
 width |  |  The initial width of the first window in pixels or as a percentage of the screen.
 max_height | 100% |  Maximum height of the window in pixels or as a percentage of the screen.

api/README.md

@@ -19,7 +19,7 @@ Returns the current window index
 | :---         | :--- | :---        |
 | Not specified | number |  |
 
-## [`createWindow(opts)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L46)
+## [`createWindow(opts)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L47)
 
 Creates a new window and returns an instance of ApplicationWindow.
 
@@ -38,21 +38,22 @@ Creates a new window and returns an instance of ApplicationWindow.
 | opts.resizable | boolean | true | true | whether the window is resizable |
 | opts.frameless | boolean | false | true | whether the window is frameless |
 | opts.utility | boolean | false | true | whether the window is utility (macOS only) |
+| opts.transparent | boolean | false | true | whether the window is transparent |
 | opts.canExit | boolean | false | true | whether the window can exit the app |
 
 | Return Value | Type | Description |
 | :---         | :--- | :---        |
 | Not specified | Promise<ApplicationWindow> |  |
 
-## [`getScreenSize()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L104)
+## [`getScreenSize()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L106)
 
 Returns the current screen size.
 
 | Return Value | Type | Description |
 | :---         | :--- | :---        |
 | Not specified | Promise<{ width: number, height: number  | >} |
 
-## [`getWindows(indices)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L130)
+## [`getWindows(indices)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L132)
 
 Returns the ApplicationWindow instances for the given indices or all windows if no indices are provided.
 
@@ -64,7 +65,7 @@ Returns the ApplicationWindow instances for the given indices or all windows if
 | :---         | :--- | :---        |
 | Not specified | Promise<Object.<number, ApplicationWindow>> |  |
 
-## [`getWindow(index)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L160)
+## [`getWindow(index)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L162)
 
 Returns the ApplicationWindow instance for the given index
 
@@ -76,15 +77,15 @@ Returns the ApplicationWindow instance for the given index
 | :---         | :--- | :---        |
 | Not specified | Promise<ApplicationWindow> | the ApplicationWindow instance or null if the window does not exist |
 
-## [`getCurrentWindow()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L170)
+## [`getCurrentWindow()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L172)
 
 Returns the ApplicationWindow instance for the current window.
 
 | Return Value | Type | Description |
 | :---         | :--- | :---        |
 | Not specified | Promise<ApplicationWindow> |  |
 
-## [`exit(code)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L179)
+## [`exit(code)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L181)
 
 Quits the backend process and then quits the render process, the exit code used is the final exit code to the OS.
 
@@ -96,7 +97,7 @@ Quits the backend process and then quits the render process, the exit code used
 | :---         | :--- | :---        |
 | Not specified | Promise<ipc.Result> |  |
 
-## [`setSystemMenu(options)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L276)
+## [`setSystemMenu(options)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L278)
 
 Set the native menu for the app.
 
@@ -191,7 +192,7 @@ Set the native menu for the app.
 | :---         | :--- | :---        |
 | Not specified | Promise<ipc.Result> |  |
 
-## [`setSystemMenuItemEnabled(value)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L358)
+## [`setSystemMenuItemEnabled(value)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L360)
 
 Set the enabled state of the system menu.
 
@@ -203,23 +204,23 @@ Set the enabled state of the system menu.
 | :---         | :--- | :---        |
 | Not specified | Promise<ipc.Result> |  |
 
-## [runtimeVersion](https://github.com/socketsupply/socket/blob/master/api/application.js#L366)
+## [runtimeVersion](https://github.com/socketsupply/socket/blob/master/api/application.js#L368)
 
 Socket Runtime version.
 
-## [debug](https://github.com/socketsupply/socket/blob/master/api/application.js#L372)
+## [debug](https://github.com/socketsupply/socket/blob/master/api/application.js#L374)
 
 Runtime debug flag.
 
-## [config](https://github.com/socketsupply/socket/blob/master/api/application.js#L378)
+## [config](https://github.com/socketsupply/socket/blob/master/api/application.js#L380)
 
 Application configuration.
 
-## [backend](https://github.com/socketsupply/socket/blob/master/api/application.js#L383)
+## [backend](https://github.com/socketsupply/socket/blob/master/api/application.js#L385)
 
 The application's backend instance.
 
-### [`open(opts)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L389)
+### [`open(opts)`](https://github.com/socketsupply/socket/blob/master/api/application.js#L391)
 
 
 
@@ -232,7 +233,7 @@ The application's backend instance.
 | :---         | :--- | :---        |
 | Not specified | Promise<ipc.Result> |  |
 
-### [`close()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L397)
+### [`close()`](https://github.com/socketsupply/socket/blob/master/api/application.js#L399)
 
 
 

api/application.js

@@ -40,6 +40,7 @@ export function getCurrentWindowIndex () {
  * @param {boolean=} [opts.resizable=true] - whether the window is resizable
  * @param {boolean=} [opts.frameless=false] - whether the window is frameless
  * @param {boolean=} [opts.utility=false] - whether the window is utility (macOS only)
+ * @param {boolean=} [opts.transparent=false] - whether the window is transparent
  * @param {boolean=} [opts.canExit=false] - whether the window can exit the app
  * @return {Promise<ApplicationWindow>}
  */
@@ -57,6 +58,7 @@ export async function createWindow (opts) {
     resizable: opts.resizable ?? true,
     frameless: opts.frameless ?? false,
     utility: opts.utility ?? false,
+    transparent: opts.transparent ?? false,
     canExit: opts.canExit ?? false,
     minWidth: opts.minWidth ?? 0,
     minHeight: opts.minHeight ?? 0,

api/index.d.ts

@@ -3987,6 +3987,7 @@ declare module "socket:application" {
      * @param {boolean=} [opts.resizable=true] - whether the window is resizable
      * @param {boolean=} [opts.frameless=false] - whether the window is frameless
      * @param {boolean=} [opts.utility=false] - whether the window is utility (macOS only)
+     * @param {boolean=} [opts.transparent=false] - whether the window is transparent
      * @param {boolean=} [opts.canExit=false] - whether the window can exit the app
      * @return {Promise<ApplicationWindow>}
      */
@@ -4003,6 +4004,7 @@ declare module "socket:application" {
         resizable?: boolean | undefined;
         frameless?: boolean | undefined;
         utility?: boolean | undefined;
+        transparent?: boolean | undefined;
         canExit?: boolean | undefined;
     }): Promise<ApplicationWindow>;
     /**

src/android/window.cc

@@ -44,6 +44,8 @@ namespace SSC::android {
     const auto argv = this->config["ssc_argv"];
 
     options.headless = this->config["build_headless"] == "true";
+    // TODO: not implemented yet on mobile
+    // options.transparent = this->config["build_transparent"] == "true";
     options.debug = isDebugEnabled() ? true : false;
     options.env = stream.str();
     options.cwd = rootDirectory.str();

src/cli/templates.hh

@@ -1909,6 +1909,10 @@ logo = "src/icons/icon.png"
 
 [window]
 
+; Use system window background color.
+; default value: false
+transparent = false
+
 ; The initial height of the first window in pixels or as a percentage of the screen.
 height = 50%
 

src/desktop/main.cc

@@ -952,6 +952,7 @@ MAIN {
       options.resizable = message.get("resizable") == "true" ? true : false;
       options.frameless = message.get("frameless") == "true" ? true : false;
       options.utility = message.get("utility") == "true" ? true : false;
+      options.transparent = message.get("transparent") == "true" ? true : false;
       options.debug = message.get("debug") == "true" ? true : false;
       options.index = targetWindowIndex;
 
@@ -1355,6 +1356,7 @@ MAIN {
     .defaultMaxWidth = app.appData["window_max_width"],
     .defaultMaxHeight = app.appData["window_max_height"],
     .headless = isHeadless,
+    .transparent = app.appData["window_transparent"] == "true" ? true : false,
     .isTest = isTest,
     .argv = argvArray.str(),
     .cwd = cwd,
@@ -1366,7 +1368,8 @@ MAIN {
   auto defaultWindow = windowManager.createDefaultWindow(WindowOptions {
     .resizable = app.appData["window_resizable"] == "false" ? false : true,
     .frameless = app.appData["window_frameless"] == "true" ? true : false,
-    .utility = app.appData["window_utility"] == "true" ? true : false
+    .utility = app.appData["window_utility"] == "true" ? true : false,
+    .transparent = app.appData["window_transparent"] == "true" ? true : false
   });
 
   defaultWindow->show(EMPTY_SEQ);

src/window/apple.mm

@@ -905,10 +905,13 @@ -                       (void) webView: (WKWebView*) webView
       ];
     }
 
-    /* [webview
-      setValue: [NSNumber numberWithBool: YES]
-        forKey: @"drawsTransparentBackground"
-    ]; */
+    if (opts.transparent) {
+      [webview setValue: [NSNumber numberWithBool: YES] forKey: @"drawsTransparentBackground"];
+    }
+
+    // set transparent background to WKWebView
+    // [webview setValue: [NSColor clearColor] forKey: @"backgroundColor"];
+    // [webview setOpaque: NO];
 
     // [webview registerForDraggedTypes:
     //  [NSArray arrayWithObject:NSPasteboardTypeFileURL]];

src/window/options.hh

@@ -8,6 +8,7 @@ namespace SSC {
     bool resizable = true;
     bool frameless = false;
     bool utility = false;
+    bool transparent = false;
     bool canExit = false;
     float width = 0;
     float height = 0;
@@ -20,6 +21,7 @@ namespace SSC {
     int port = 0;
     bool isTest = false;
     bool headless = false;
+
     String cwd = "";
     String title = "";
     String url = "data:text/html,<html>";

src/window/win.cc

@@ -1224,7 +1224,7 @@ namespace SSC {
                   webview->add_WebMessageReceived(
                     Microsoft::WRL::Callback<IRecHandler>([&](ICoreWebView2* webview, IArgs* args) -> HRESULT {
                       LPWSTR messageRaw;
-                      args->TryGetWebMessageAsString(&messageRaw);                      
+                      args->TryGetWebMessageAsString(&messageRaw);
                       SSC::WString message_w(messageRaw);
                       CoTaskMemFree(messageRaw);
                       if (onMessage != nullptr) {
@@ -1422,7 +1422,7 @@ namespace SSC {
   }
 
   void Window::exit (int code) {
-    if (this->onExit != nullptr) 
+    if (this->onExit != nullptr)
     {
       std::cerr << "WARNING: Window#" << index << " exiting with code " << code << std::endl;
       this->onExit(code);

src/window/window.hh

@@ -261,6 +261,7 @@ namespace SSC {
     String defaultMaxWidth = "100%";
     String defaultMaxHeight = "100%";
     bool headless = false;
+    bool transparent = false;
     bool isTest;
     String argv = "";
     String cwd = "";
@@ -425,6 +426,7 @@ namespace SSC {
         this->options.appData = configuration.appData;
         this->options.onExit = configuration.onExit;
         this->options.headless = configuration.headless;
+        this->options.transparent = configuration.transparent;
         this->options.isTest = configuration.isTest;
         this->options.argv = configuration.argv;
         this->options.cwd = configuration.cwd;
@@ -586,6 +588,7 @@ namespace SSC {
           .resizable = opts.resizable,
           .frameless = opts.frameless,
           .utility = opts.utility,
+          .transparent = opts.transparent,
           .canExit = opts.canExit,
           .width = width,
           .height = height,
@@ -628,6 +631,7 @@ namespace SSC {
           .resizable = opts.resizable,
           .frameless = opts.frameless,
           .utility = opts.utility,
+          .transparent = opts.transparent,
           .canExit = true,
           .width = opts.width,
           .height = opts.height,