docs: add window customization guide (#31054)

* docs: add window customization guide

* fixes

* Update docs/api/browser-window.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/api/browser-window.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/fiddles/windows/manage-windows/frameless-window/index.html

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* Update docs/tutorial/window-customization.md

Co-authored-by: Mark Lee <[email protected]>

* fix code fence

Co-authored-by: Mark Lee <[email protected]>

Author: erickzhao

docs/api/browser-window.md

@@ -17,10 +17,11 @@ win.loadURL('https://github.com')
 win.loadFile('index.html')
 ```
 
-## Frameless window
+## Window customization
 
-To create a window without chrome, or a transparent window in arbitrary shape,
-you can use the [Frameless Window](frameless-window.md) API.
+The `BrowserWindow` class exposes various ways to modify the look and behavior of
+your app's windows. For more details, see the [Window Customization](../tutorial/window-customization.md)
+tutorial.
 
 ## Showing the window gracefully
 
@@ -184,7 +185,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     `true`.
   * `paintWhenInitiallyHidden` Boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created.  In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`.  Setting this to `false` will cause the `ready-to-show` event to not fire.  Default is `true`.
   * `frame` Boolean (optional) - Specify `false` to create a
-    [Frameless Window](frameless-window.md). Default is `true`.
+    [frameless window](../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
   * `parent` BrowserWindow (optional) - Specify parent window. Default is `null`.
   * `modal` Boolean (optional) - Whether this is a modal window. This only works when the
     window is a child window. Default is `false`.
@@ -206,7 +207,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
   * `darkTheme` Boolean (optional) - Forces using dark theme for the window, only works on
     some GTK+3 desktop environments. Default is `false`.
-  * `transparent` Boolean (optional) - Makes the window [transparent](frameless-window.md#transparent-window).
+  * `transparent` Boolean (optional) - Makes the window [transparent](../tutorial/window-customization.md#create-transparent-windows).
     Default is `false`. On Windows, does not work unless the window is frameless.
   * `type` String (optional) - The type of window, default is normal window. See more about
     this below.

docs/api/frameless-window.md

@@ -59,8 +59,9 @@ <h2>Create a frameless window</h2>
 
           <p>
             For more details, see the
-            <a href="https://electronjs.org/docs/api/frameless-window/">
-              Frameless Window
+            <a href="https://electronjs.org/docs/tutorial/window-customization/">
+              Window Customization
+
             </a>
             documentation.
           </p>

docs/fiddles/windows/manage-windows/frameless-window/index.html

@@ -17,7 +17,7 @@ the dirty area is passed to the `paint` event to be more efficient.
 losses with no benefits.
 * When nothing is happening on a webpage, no frames are generated.
 * An offscreen window is always created as a
-[Frameless Window](../api/frameless-window.md).
+[Frameless Window](../tutorial/window-customization.md)..
 
 ### Rendering Modes