@opensumi/ide-webview 2.21.13 → 2.22.0

package/src/electron-webview/host-preload.js

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+require('./host-channel');

package/src/electron-webview/plain-preload.js

@@ -0,0 +1,55 @@
+/* istanbul ignore file */
+const { ipcRenderer } = require('electron');
+
+const argv = process.argv;
+
+const urlParams = new URLSearchParams(decodeURIComponent(window.location.search));
+window.id = Number(urlParams.get('windowId'));
+
+let parentWindowWebContentsId;
+let additionalEnv;
+
+argv.forEach((arg) => {
+  if (arg.indexOf('--parentWindowWebContentsId=') === 0) {
+    parentWindowWebContentsId = parseInt(arg.substr('--parentWindowWebContentsId='.length), 10);
+  }
+  if (arg.indexOf('--additionalEnv=') === 0) {
+    additionalEnv = JSON.parse(arg.substr('--additionalEnv='.length));
+  }
+});
+
+let postMessage;
+
+if (parentWindowWebContentsId) {
+  postMessage = (message) => {
+    ipcRenderer.sendTo(parentWindowWebContentsId, 'cross-window-webview-message', {
+      from: window.id,
+      message,
+    });
+  };
+} else {
+  postMessage = (message) => {
+    ipcRenderer.sendToHost('webview-message', message);
+  };
+}
+
+if (additionalEnv) {
+  window.env = Object.assign({}, additionalEnv);
+}
+
+const parent = window.parent;
+
+window.parent = new Proxy(window.parent, {
+  get: (target, p) => {
+    if (p === 'postMessage') {
+      return postMessage;
+    } else {
+      return Reflect.get(target, p);
+    }
+  },
+});
+
+ipcRenderer.on('webview-message', (e, data) => {
+  const messageEvent = new MessageEvent('message', { data, source: parent });
+  window.dispatchEvent(messageEvent);
+});

package/src/index.ts

@@ -0,0 +1 @@
+export * from './browser';

package/src/webview-host/common.ts

@@ -0,0 +1,108 @@
+export const defaultCss = `body {
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-font-family);
+  font-weight: var(--vscode-font-weight);
+  font-size: var(--vscode-font-size);
+  margin: 0;
+  padding: 0 20px;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+a {
+  color: var(--vscode-textLink-foreground);
+}
+
+a:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+code {
+  color: var(--vscode-textPreformat-foreground);
+}
+
+blockquote {
+  background: var(--vscode-textBlockQuote-background);
+  border-color: var(--vscode-textBlockQuote-border);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--vscode-scrollbarSlider-background);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--vscode-scrollbarSlider-activeBackground);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}`;
+
+export interface IWebviewChannel {
+  postMessage: (channel: string, data?: any) => void;
+  onMessage: (channel: string, handler: any) => void;
+  focusIframeOnCreate?: boolean;
+  ready?: Promise<void>;
+  onIframeLoaded?: (iframe: HTMLIFrameElement) => void;
+  fakeLoad: boolean;
+  onKeydown?: (event: KeyboardEvent) => void;
+}
+
+function addslashes(str) {
+  // eslint-disable-next-line no-control-regex
+  return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
+}
+
+export function getVsCodeApiScript(state) {
+  return `
+    const acquireVsCodeApi = (function() {
+      const originalPostMessage = window.parent.postMessage.bind(window.parent);
+      const targetOrigin = '*';
+      let acquired = false;
+
+      let state = ${state ? `JSON.parse("${addslashes(JSON.stringify(state))}")` : undefined};
+
+      return () => {
+        if (acquired) {
+          throw new Error('An instance of the VS Code API has already been acquired');
+        }
+        acquired = true;
+        return Object.freeze({
+          postMessage: function(msg) {
+            return originalPostMessage({ command: 'onmessage', data: msg }, targetOrigin);
+          },
+          setState: function(newState) {
+            state = newState;
+            originalPostMessage({ command: 'do-update-state', data: JSON.parse(JSON.stringify(newState)) }, targetOrigin);
+            return newState;
+          },
+          getState: function() {
+            return state;
+          }
+        });
+      };
+    })();
+    delete window.parent;
+    delete window.top;
+    delete window.frameElement;
+    window.acquireVsCodeApi = acquireVsCodeApi;
+  `;
+}

package/src/webview-host/web-preload.ts

@@ -0,0 +1,78 @@
+/* istanbul ignore file */
+import { IWebviewChannel } from './common';
+import { WebviewPanelManager } from './webview-manager';
+
+export class WebIframeChannel implements IWebviewChannel {
+  private handlers = new Map();
+  focusIframeOnCreate?: boolean | undefined;
+  ready?: Promise<void> | undefined;
+  fakeLoad = false;
+  private isInDevelopmentMode = false;
+  private id = document!.location!.search!.match(/\bid=([\w-]+)/)![1];
+
+  constructor() {
+    window.addEventListener('message', (e) => {
+      if (e.data && (e.data.command === 'onmessage' || e.data.command === 'do-update-state')) {
+        // Came from inner iframe
+        this.postMessage(e.data.command, e.data.data);
+        return;
+      }
+
+      const channel = e.data.channel;
+      const handler = this.handlers.get(channel);
+      if (handler) {
+        handler(e, e.data.data);
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('no handler for ', e);
+      }
+    });
+
+    this.ready = new Promise<void>(async (resolve) => {
+      // TODO 等待service worker完成  未来资源使用service worker时需要加入
+      resolve();
+    });
+
+    this.onMessage('devtools-opened', () => {
+      this.isInDevelopmentMode = true;
+    });
+  }
+
+  get inDev() {
+    return this.isInDevelopmentMode;
+  }
+
+  postMessage(channel, data?) {
+    if (window.parent !== window) {
+      window.parent.postMessage({ target: this.id, channel, data }, '*');
+    }
+  }
+
+  onMessage(channel, handler) {
+    this.handlers.set(channel, handler);
+  }
+
+  onIframeLoaded(newFrame) {
+    // newFrame.contentWindow.onbeforeunload = () => {
+    //   if (this.isInDevelopmentMode) { // Allow reloads while developing a webview
+    //     this.postMessage('do-reload');
+    //     return false;
+    //   }
+    //   // Block navigation when not in development mode
+    //   console.log('prevented webview navigation');
+    //   return false;
+    // };
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    // 在浏览器上，需要阻止一些默认的keydown快捷键
+    if (event.key === 's' && (event.metaKey || event.ctrlKey)) {
+      // 阻止保存
+      event.preventDefault();
+    }
+  }
+}
+
+/* tslint:disable */
+new WebviewPanelManager(new WebIframeChannel());
+/* tslint:enable */

package/src/webview-host/webview-manager.ts

@@ -0,0 +1,368 @@
+import { defaultCss, IWebviewChannel, getVsCodeApiScript } from './common';
+
+export class WebviewPanelManager {
+  private activeTheme = 'default';
+  private styles: { [key: string]: string };
+  private isHandlingScroll = false;
+  private updateId = 0;
+  private firstLoad = true;
+  private loadTimeout;
+  private pendingMessages: any[] = [];
+  private initialScrollProgress: number;
+  private ID: string | undefined;
+
+  constructor(private channel: IWebviewChannel) {
+    document.addEventListener('DOMContentLoaded', this.init.bind(this));
+  }
+
+  private init() {
+    const idMatch = document.location.search.match(/\bid=([\w-]+)/);
+    this.ID = idMatch ? idMatch[1] : undefined;
+    if (!document.body) {
+      return;
+    }
+
+    this.channel.onMessage('styles', (_event, data) => {
+      this.styles = data.styles;
+      this.activeTheme = data.activeTheme;
+
+      const target = this.getActiveFrame();
+      if (!target) {
+        return;
+      }
+
+      if (target.contentDocument) {
+        this.applyStyles(target.contentDocument, target.contentDocument.body);
+      }
+    });
+
+    // propagate focus
+    this.channel.onMessage('focus', () => {
+      const target = this.getActiveFrame();
+      if (target && target.contentWindow) {
+        target.contentWindow.focus();
+      }
+    });
+
+    this.channel.onMessage('content', async (_event, data) => this.setContent(data));
+
+    this.channel.onMessage('message', (_event, data) => {
+      const pending = this.getPendingFrame();
+      if (!pending) {
+        const target = this.getActiveFrame();
+        if (target) {
+          target.contentWindow?.postMessage(data, '*');
+          return;
+        }
+      }
+      this.pendingMessages.push(data);
+    });
+
+    this.trackFocus({
+      onFocus: () => this.channel.postMessage('did-focus'),
+      onBlur: () => this.channel.postMessage('did-blur'),
+    });
+
+    this.channel.postMessage('webview-ready', {});
+  }
+
+  private async setContent(data) {
+    const currentUpdateId = ++this.updateId;
+    await this.channel.ready;
+    if (currentUpdateId !== this.updateId) {
+      return;
+    }
+
+    const options = data.options;
+    const newDocument = this.toContentHtml(data);
+
+    const frame = this.getActiveFrame();
+    const wasFirstLoad = this.firstLoad;
+    // keep current scrollY around and use later
+    let setInitialScrollPosition;
+    if (this.firstLoad) {
+      this.firstLoad = false;
+      setInitialScrollPosition = (body, window) => {
+        if (!isNaN(this.initialScrollProgress)) {
+          if (window.scrollY === 0) {
+            window.scroll(0, body.clientHeight * this.initialScrollProgress);
+          }
+        }
+      };
+    } else {
+      const scrollY = frame && frame.contentDocument && frame.contentDocument.body ? frame.contentWindow?.scrollY : 0;
+      setInitialScrollPosition = (body, window) => {
+        if (window.scrollY === 0) {
+          window.scroll(0, scrollY);
+        }
+      };
+    }
+
+    // Clean up old pending frames and set current one as new one
+    const previousPendingFrame = this.getPendingFrame();
+    if (previousPendingFrame) {
+      previousPendingFrame.setAttribute('id', '');
+      document.body.removeChild(previousPendingFrame);
+    }
+    if (!wasFirstLoad) {
+      this.pendingMessages = [];
+    }
+
+    const newFrame = document.createElement('iframe');
+    newFrame.setAttribute('id', 'pending-frame');
+    newFrame.setAttribute('frameborder', '0');
+    newFrame.setAttribute('allow', 'autoplay; clipboard-read; clipboard-write;');
+
+    const sandboxRules = new Set(['allow-same-origin', 'allow-pointer-lock']);
+    if (options.allowScripts) {
+      sandboxRules.add('allow-scripts');
+      sandboxRules.add('allow-downloads');
+    }
+    if (options.allowForms) {
+      sandboxRules.add('allow-forms');
+    }
+    newFrame.setAttribute('sandbox', Array.from(sandboxRules).join(' '));
+    if (this.channel.fakeLoad) {
+      // 使用service-worker时候
+      newFrame.src = `./fake.html?id=${this.ID}`;
+    }
+    newFrame.style.cssText =
+      'display: block; margin: 0; overflow: hidden; position: absolute; width: 100%; height: 100%; visibility: hidden';
+    document.body.appendChild(newFrame);
+
+    if (!this.channel.fakeLoad) {
+      // write new content onto iframe
+      newFrame.contentDocument?.open();
+    }
+
+    newFrame.contentWindow?.addEventListener('keydown', this.handleInnerKeydown.bind(this));
+
+    newFrame.contentWindow?.addEventListener('DOMContentLoaded', (e) => {
+      if (this.channel.fakeLoad) {
+        newFrame.contentDocument?.open();
+        newFrame.contentDocument?.write(newDocument);
+        newFrame.contentDocument?.close();
+        hookupOnLoadHandlers(newFrame);
+      }
+      const contentDocument: HTMLDocument | undefined = e.target ? (e.target as HTMLDocument) : undefined;
+      if (contentDocument) {
+        this.applyStyles(contentDocument, contentDocument.body);
+      }
+    });
+
+    const onLoad = (contentDocument, contentWindow) => {
+      if (contentDocument && contentDocument.body) {
+        // Workaround for https://github.com/Microsoft/vscode/issues/12865
+        // check new scrollY and reset if neccessary
+        setInitialScrollPosition(contentDocument.body, contentWindow);
+      }
+
+      const newFrame = this.getPendingFrame();
+      if (newFrame && newFrame.contentDocument && newFrame.contentDocument === contentDocument) {
+        const oldActiveFrame = this.getActiveFrame();
+        if (oldActiveFrame) {
+          document.body.removeChild(oldActiveFrame);
+        }
+        // Styles may have changed since we created the element. Make sure we re-style
+        this.applyStyles(newFrame.contentDocument, newFrame.contentDocument.body);
+        newFrame.setAttribute('id', 'active-frame');
+        newFrame.style.visibility = 'visible';
+        if (this.channel.focusIframeOnCreate) {
+          newFrame.contentWindow?.focus();
+        }
+
+        contentWindow.addEventListener('scroll', this.handleInnerScroll.bind(this));
+
+        this.pendingMessages.forEach((data) => {
+          contentWindow.postMessage(data, '*');
+        });
+        this.pendingMessages = [];
+      }
+    };
+
+    /**
+     * @param {HTMLIFrameElement} newFrame
+     */
+    const hookupOnLoadHandlers = (newFrame) => {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
+      this.loadTimeout = setTimeout(() => {
+        clearTimeout(this.loadTimeout);
+        this.loadTimeout = undefined;
+        onLoad(newFrame.contentDocument, newFrame.contentWindow);
+      }, 1000);
+
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const _this = this;
+      newFrame.contentWindow.addEventListener('load', function (this: any, e) {
+        if (_this.loadTimeout) {
+          clearTimeout(_this.loadTimeout);
+          _this.loadTimeout = undefined;
+          onLoad(e.target, this);
+        }
+      });
+
+      // Bubble out link clicks
+      newFrame.contentWindow.addEventListener('click', this.handleInnerClick.bind(this));
+
+      if (this.channel.onIframeLoaded) {
+        this.channel.onIframeLoaded(newFrame);
+      }
+    };
+
+    if (!this.channel.fakeLoad) {
+      hookupOnLoadHandlers(newFrame);
+    }
+
+    if (!this.channel.fakeLoad) {
+      newFrame.contentDocument?.write(newDocument);
+      newFrame.contentDocument?.close();
+    }
+
+    this.channel.postMessage('did-set-content', undefined);
+  }
+
+  private trackFocus({ onFocus, onBlur }): void {
+    const interval = 50;
+    let isFocused = document.hasFocus();
+    setInterval(() => {
+      const isCurrentlyFocused = document.hasFocus();
+      if (isCurrentlyFocused === isFocused) {
+        return;
+      }
+      isFocused = isCurrentlyFocused;
+      if (isCurrentlyFocused) {
+        onFocus();
+      } else {
+        onBlur();
+      }
+    }, interval);
+  }
+
+  private getActiveFrame(): HTMLIFrameElement | undefined {
+    return document.getElementById('active-frame') as HTMLIFrameElement;
+  }
+
+  private getPendingFrame(): HTMLIFrameElement | undefined {
+    return document.getElementById('pending-frame') as HTMLIFrameElement;
+  }
+
+  private get defaultCssRules() {
+    return defaultCss;
+  }
+
+  private applyStyles(document, body) {
+    if (!document) {
+      return;
+    }
+
+    if (body) {
+      body.classList.remove('vscode-light', 'vscode-dark', 'vscode-high-contrast');
+      body.classList.add(this.activeTheme);
+    }
+
+    if (this.styles) {
+      for (const variable of Object.keys(this.styles)) {
+        document.documentElement.style.setProperty(`--${variable}`, this.styles[variable]);
+      }
+    }
+  }
+
+  private handleInnerClick(event: MouseEvent) {
+    if (!event || !event.view || !event.view.document) {
+      return;
+    }
+
+    const baseElement = event.view.document.getElementsByTagName('base')[0];
+    let node = event.target as any;
+    while (node) {
+      if (node.tagName && node.tagName.toLowerCase() === 'a' && node.href) {
+        if (node.getAttribute('href') === '#') {
+          event.view.scrollTo(0, 0);
+        } else if (
+          node.hash &&
+          (node.getAttribute('href') === node.hash || (baseElement && node.href.indexOf(baseElement.href) >= 0))
+        ) {
+          const scrollTarget = event.view.document.getElementById(node.hash.substr(1, node.hash.length - 1));
+          if (scrollTarget) {
+            scrollTarget.scrollIntoView();
+          }
+        } else {
+          this.channel.postMessage('did-click-link', node.href.baseVal || node.href);
+        }
+        event.preventDefault();
+        break;
+      }
+      node = node.parentNode;
+    }
+  }
+
+  private handleInnerKeydown(e) {
+    this.channel.postMessage('did-keydown', {
+      key: e.key,
+      keyCode: e.keyCode,
+      code: e.code,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+    });
+    this.channel.onKeydown && this.channel.onKeydown(e);
+  }
+
+  private handleInnerScroll(event) {
+    if (!event.target || !event.target.body) {
+      return;
+    }
+    if (this.isHandlingScroll) {
+      return;
+    }
+
+    const progress = event.currentTarget.scrollY / event.target.body.clientHeight;
+    if (isNaN(progress)) {
+      return;
+    }
+
+    this.isHandlingScroll = true;
+    window.requestAnimationFrame(() => {
+      try {
+        this.channel.postMessage('did-scroll', progress);
+      } catch (e) {
+        // noop
+      }
+      this.isHandlingScroll = false;
+    });
+  }
+
+  private toContentHtml(data) {
+    const options = data.options;
+    const text = data.contents;
+    const newDocument = new DOMParser().parseFromString(text, 'text/html');
+
+    newDocument.querySelectorAll('a').forEach((a) => {
+      if (!a.title) {
+        a.title = a.getAttribute('href')!;
+      }
+    });
+
+    // apply default script
+    if (options.allowScripts) {
+      const defaultScript = newDocument.createElement('script');
+      defaultScript.textContent = getVsCodeApiScript(data.state);
+      newDocument.head.prepend(defaultScript);
+    }
+
+    // apply default styles
+    const defaultStyles = newDocument.createElement('style');
+    defaultStyles.id = '_defaultStyles';
+    defaultStyles.innerHTML = this.defaultCssRules;
+    newDocument.head.prepend(defaultStyles);
+
+    this.applyStyles(newDocument, newDocument.body);
+
+    // set DOCTYPE for newDocument explicitly as DOMParser.parseFromString strips it off
+    // and DOCTYPE is needed in the iframe to ensure that the user agent stylesheet is correctly overridden
+    return '<!DOCTYPE html>\n' + newDocument.documentElement.outerHTML;
+  }
+}

package/src/webview-host/webview.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Webview Panel Container</title>
+  </head>
+
+  <body style="margin: 0; overflow: hidden; width: 100%; height: 100%"></body>
+</html>