Window Interaction Control

Window Drag Region (app-region)

Purpose: When building your own custom title bar, you need to tell the system "this region can be used to drag the window with the mouse" while the button areas should not be draggable. Use the CSS app-region or -webkit-app-region (the two are equivalent, just pick one).

Common pattern: Set the title bar to drag and the buttons on it to no-drag.

.title-bar {
  -webkit-app-region: drag;
  app-region: drag;
}
.title-bar button {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

<div class="title-bar" style="-webkit-app-region: drag; app-region: drag;">
  <h1>My App</h1>
  <div class="title-bar-buttons">
    <button type="button" style="-webkit-app-region: no-drag; app-region: no-drag;">Close</button>
  </div>
</div>

Custom Window Drag Region (jade-region-drag) v2.3

In addition to the CSS -webkit-app-region: drag, v2.3 adds a new dragging mechanism based on HTML custom attributes, used to drag the window and double-click to maximize in frameless / custom title bar windows.

The biggest difference from -webkit-app-region: right-clicking does not bring up the system title bar menu (Restore / Move / Size / Minimize / Maximize / Close). Because with this approach the drag region is always a regular page region (the client area), only a left mouse button press initiates a programmatic window move; a right-click landing on the drag region is just a regular page right-click and does not go through the system title bar.

Attributes

The attributes are boolean attributes: they take effect once present, and their values are ignored (jade-region-drag is equivalent to jade-region-drag="true").

Behavior

• Single-click drag: Hold down the left button in the drag region and drag → moves the window; dragging to a screen edge supports system snapping (Aero Snap); dragging while the window is maximized automatically restores it.
• Double-click: Double-click in the drag region → maximize / restore (toggle).
• Responds only to the left mouse button; right and middle buttons do not trigger it.
• The drag region prevents the default text selection behavior; jade-region-no-drag areas are not affected and can be selected / clicked / focused normally.

Nesting Rules

When determining behavior, the search goes upward from the clicked element to find the nearest ancestor with one of these attributes, and the nearest one wins:

• If the nearest is jade-region-no-drag → no drag (even if there is a jade-region-drag on an outer element).
• If the nearest is jade-region-drag → drag.
• If there is none → no drag.

HTML Example

<!-- The entire title bar is draggable -->
<div class="titlebar" jade-region-drag>
  <span class="title">My App</span>

  <!-- The buttons in the title bar must be clickable, so carve them out -->
  <div class="actions" jade-region-no-drag>
    <button onclick="...">Settings</button>
    <button onclick="...">About</button>
  </div>
</div>

.titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Comparison with -webkit-app-region

The two approaches can coexist on the same page without interfering with each other; choose whichever you need. For scenarios that require "no right-click system menu", use jade-region-drag.

Working with the 2.0 Window Creation API

• Whether to have a system title bar and whether to have a border is determined by WebViewWindowOptions.frame_style (normal / no-titlebar / borderless / title-overlay); do not fill in the removed legacy fields.
• When you need a fully frameless WebView shell, use create_borderless_webview_window, see Window API.

Context Menu Control (jade-allow-contextmenu)

Purpose: Controls per-element whether the context menu is allowed to pop up. When WebViewSettings.allow_right_click is set to 0 (right-clicking globally disabled), this attribute can individually allow it for specific elements.

Basic Usage

<!-- Allow the context menu to pop up -->
<button jade-allow-contextmenu>Right-click me</button>

<!-- Disallow the context menu (default behavior) -->
<button>Right-clicking me does nothing</button>

Notes

• Priority: When the element also has the disabled attribute set, jade-allow-contextmenu does not take effect
• Global setting: When allow_right_click=1 in WebViewSettings (not globally disabled, i.e. right-clicking allowed by default), this attribute is ignored and the context menu can pop up anywhere on the page
• Default behavior: Elements without this attribute do not allow the context menu to pop up by default
• Scope: This attribute only takes effect on the element actually hit by the right-click itself; it does not cover its child elements (unlike jade-region-drag's "container + descendants" semantics)

Dynamic Control

const el = document.getElementById('my-element');
el.setAttribute('jade-allow-contextmenu', '');     // Allow
el.removeAttribute('jade-allow-contextmenu');      // Disallow

Troubleshooting

Drag Region Not Working

• Make sure the attribute name is correct: -webkit-app-region or app-region
• Check that the button areas have no-drag set correctly to avoid nested overrides

Context Menu Not Popping Up

• Check whether the element has the disabled attribute set
• Confirm that WebViewSettings.allow_right_click is 0 (right-clicking globally disabled), otherwise jade-allow-contextmenu is meaningless
• Make sure the jade-allow-contextmenu attribute has been correctly added to the target element