electron/spec-main/fixtures/pages/overlay.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
      :root {
        --fallback-title-bar-height: 40px;
      }

      .draggable {
        app-region: drag;
        /* Pre-fix app-region during standardization process */
        -webkit-app-region: drag;
      }

      .nonDraggable {
        app-region: no-drag;
        /* Pre-fix app-region during standardization process */
        -webkit-app-region: no-drag;
      }


      #titleBarContainer {
        position: absolute;
        top: env(titlebar-area-y, 0);
        height: env(titlebar-area-height, var(--fallback-title-bar-height));
        width: 100%;
      }

      #titleBar {
        position: absolute;
        top: 0;
        display: flex;
        user-select: none;
        height: 100%;
        left: env(titlebar-area-x, 0);
        width: env(titlebar-area-width, 100%);
      }

      #mainContent {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: env(titlebar-area-height, var(--fallback-title-bar-height));
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <script>
      const {ipcRenderer} = require('electron');
      navigator.windowControlsOverlay.ongeometrychange = function() {
        const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
        ipcRenderer.send('geometrychange', {x, y, width, height});
      };
    </script>
    <div id="titleBarContainer">
      <div id="titleBar" class=" draggable">
        <span class="draggable">Title goes here</span>
        <input class="nonDraggable" type="text" placeholder="Search"></input>
      </div>
    </div>
    <div id="mainContent"><!-- The rest of the webpage --></div>
    <script>
      function getCssOverlayProperties() {
        const cssOverlayProps = {};
        const titleBarContainer = document.getElementById('titleBarContainer');
        const titleBar = document.getElementById('titleBar');
        cssOverlayProps.y = titleBarContainer.computedStyleMap().get('top').value;
        cssOverlayProps.height = titleBarContainer.computedStyleMap().get('height').value;
        cssOverlayProps.x = titleBar.computedStyleMap().get('left').value;
        cssOverlayProps.width = titleBar.computedStyleMap().get('width').value;
        return cssOverlayProps;
      }

      function getJSOverlayProperties() {
        const {x, y, width, height} = navigator.windowControlsOverlay.getTitlebarAreaRect();
        return {x, y, width, height};
      }
    </script>
  </body>
</html>