feat: embedded mode resizing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chii",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Chrome devtools framework",
   "main": "./server/index.js",
   "bin": {

patches/devtools-frontend/embedded.patch

@@ -5,19 +5,21 @@ Subject: embedded
 
 
 diff --git a/front_end/core/sdk/Connections.ts b/front_end/core/sdk/Connections.ts
-index cfa1ca58f1d45d5034731cae037e91364be9de6e..619ae8cc56e2274a3fbd9b159a669333c37ba9f2 100644
+index cfa1ca58f1d45d5034731cae037e91364be9de6e..6a575078a98de2df5deacd02469b7c038f16696c 100644
 --- a/front_end/core/sdk/Connections.ts
 +++ b/front_end/core/sdk/Connections.ts
-@@ -75,6 +75,29 @@ export class MainConnection implements ProtocolClient.InspectorBackend.Connectio
+@@ -75,6 +75,31 @@ export class MainConnection implements ProtocolClient.InspectorBackend.Connectio
    }
  }
 
 +export class EmbeddedConnection implements ProtocolClient.InspectorBackend.Connection {
 +  onMessage: ((arg0: Object) => void) | null;
-+  constructor() {
++  private targetOrigin: string = '';
++  constructor(targetOrigin: string) {
++    this.targetOrigin = targetOrigin;
 +    this.onMessage = null;
 +    window.addEventListener('message', event => {
-+      if (this.onMessage) {
++      if (event.origin === this.targetOrigin && this.onMessage) {
 +        this.onMessage(event.data);
 +      }
 +    })
@@ -26,7 +28,7 @@ index cfa1ca58f1d45d5034731cae037e91364be9de6e..619ae8cc56e2274a3fbd9b159a669333
 +    this.onMessage = onMessage;
 +  }
 +  sendRawMessage(message: string): void {
-+    window.parent.postMessage(message);
++    window.parent.postMessage(message, this.targetOrigin);
 +  }
 +  setOnDisconnect(onDisconnect: (arg0: string) => void): void {
 +  }
@@ -38,13 +40,13 @@ index cfa1ca58f1d45d5034731cae037e91364be9de6e..619ae8cc56e2274a3fbd9b159a669333
  export class WebSocketConnection implements ProtocolClient.InspectorBackend.Connection {
    #socket: WebSocket|null;
    onMessage: ((arg0: (Object|string)) => void)|null;
-@@ -280,6 +303,10 @@ export async function initMainConnection(
+@@ -280,6 +305,10 @@ export async function initMainConnection(
  function createMainConnection(websocketConnectionLost: () => void): ProtocolClient.InspectorBackend.Connection {
    const wsParam = Root.Runtime.Runtime.queryParam('ws');
    const wssParam = Root.Runtime.Runtime.queryParam('wss');
 +  const embeddedParam = Root.Runtime.Runtime.queryParam('embedded');
-+  if (embeddedParam === 'true') {
-+    return new EmbeddedConnection()
++  if (embeddedParam) {
++    return new EmbeddedConnection(embeddedParam)
 +  }
    if (wsParam || wssParam) {
      const ws = wsParam ? `ws://${wsParam}` : `wss://${wssParam}`;

src/DevtoolsFrame.ts

@@ -0,0 +1,133 @@
+import $ from 'licia/$';
+import chobitsu from 'chobitsu';
+import h from 'licia/h';
+import evalCss from 'licia/evalCss';
+import toStr from 'licia/toStr';
+import toNum from 'licia/toNum';
+
+const $document = $(document as any);
+
+export default class DevtoolsFrame {
+  private targetOrigin: string = '';
+  private container: HTMLDivElement;
+  private $container: $.$;
+  private $draggable: $.$;
+  private height: number;
+  private startY: number = 0;
+  private originHeight: number = 0;
+  constructor(targetOrigin: string) {
+    this.targetOrigin = targetOrigin;
+    this.container = h('div') as HTMLDivElement;
+    this.$container = $(this.container);
+    this.$container.css({
+      position: 'fixed',
+      left: 0,
+      bottom: 0,
+      width: '100%',
+      height: '50%',
+      zIndex: 5000,
+      borderTop: '1px solid #cacdd1',
+    });
+    const draggable = h('div');
+    this.$draggable = $(draggable);
+    this.$draggable.css({
+      position: 'absolute',
+      width: '100%',
+      height: 10,
+      left: 0,
+      top: -8,
+      cursor: 'row-resize',
+    });
+    this.container.appendChild(draggable);
+    evalCss(`
+    html, body {
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+    `);
+    const height = localStorage.getItem('chii-embedded-height');
+    if (height) {
+      this.setHeight(toNum(height));
+    } else {
+      this.setHeight(Math.round(window.innerHeight * 0.5));
+    }
+    this.bindEvent();
+  }
+  setHeight(height: number) {
+    if (height < 100) {
+      height = 100;
+    }
+    if (height > window.innerHeight) {
+      height = window.innerHeight;
+    }
+    this.height = height;
+    localStorage.setItem('chii-embedded-height', toStr(height));
+  }
+  attach() {
+    const { targetOrigin } = this;
+    let protocol = location.protocol;
+    let host = location.host;
+    if (protocol === 'about:') {
+      protocol = window.parent.location.protocol;
+      host = window.parent.location.host;
+    }
+    const frame = document.createElement('iframe');
+    const $frame = $(frame);
+    $frame.css({
+      border: 'none',
+      width: '100%',
+      height: '100%',
+    });
+    frame.src = `${targetOrigin}/front_end/chii_app.html?embedded=${protocol}//${host}`;
+    chobitsu.setOnMessage((message: string) => {
+      frame.contentWindow?.postMessage(message, targetOrigin);
+    });
+    window.addEventListener('message', event => {
+      if (event.origin !== targetOrigin) {
+        return;
+      }
+      chobitsu.sendRawMessage(event.data);
+    });
+
+    this.container.appendChild(frame);
+    document.body.appendChild(this.container);
+    this.resize();
+  }
+  private bindEvent() {
+    window.addEventListener('resize', this.resize);
+    this.$draggable.on('mousedown', this.onResizeStart);
+  }
+  private onResizeStart = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    e = e.origEvent;
+    this.startY = e.clientY;
+    this.originHeight = this.height;
+    this.$draggable.css({
+      height: '100%',
+    });
+    $document.on('mousemove', this.onResizeMove);
+    $document.on('mouseup', this.onResizeEnd);
+  };
+  private onResizeMove = (e: any) => {
+    const deltaY = e.origEvent.clientY - this.startY;
+    this.setHeight(this.originHeight - deltaY);
+    this.resize();
+  };
+  private onResizeEnd = () => {
+    this.$draggable.css({
+      height: 10,
+    });
+    $document.off('mousemove', this.onResizeMove);
+    $document.off('mouseup', this.onResizeEnd);
+  };
+  private resize = () => {
+    const { height } = this;
+    this.$container.css({
+      height,
+    });
+    $(document.body).css({
+      height: window.innerHeight - height,
+    });
+  };
+}

src/target.ts

@@ -5,6 +5,7 @@ import $ from 'licia/$';
 import contain from 'licia/contain';
 import Socket from 'licia/Socket';
 import chobitsu from 'chobitsu';
+import DevtoolsFrame from './DevtoolsFrame';
 
 const sessionStore = safeStorage('session');
 
@@ -96,28 +97,7 @@ if (!embedded) {
     ws.send(message);
   });
 } else {
-  const protocol = location.protocol;
-  const frame = document.createElement('iframe');
-  const $frame = $(frame);
-  $frame.css({
-    border: 'none',
-    position: 'fixed',
-    left: 0,
-    bottom: 0,
-    width: '100%',
-    height: '50%',
-    zIndex: 5000,
-  });
-  frame.src = `${protocol}//${ChiiServerUrl}/front_end/chii_app.html?embedded=true`;
-  document.body.appendChild(frame);
-  const targetOrigin = `${protocol}//${ChiiServerUrl}`;
-  chobitsu.setOnMessage((message: string) => {
-    frame.contentWindow?.postMessage(message, targetOrigin);
-  });
-  window.addEventListener('message', event => {
-    if (event.origin !== targetOrigin) {
-      return;
-    }
-    chobitsu.sendRawMessage(event.data);
-  });
+  const protocol = location.protocol === 'https:' ? 'https:' : 'http:';
+  const devtoolsFrame = new DevtoolsFrame(`${protocol}//${ChiiServerUrl}`);
+  devtoolsFrame.attach();
 }