feat(fullscreen): auto extend size of new output view cell

src/index.ts

@@ -14,6 +14,7 @@ import { TrameJupyterWebSocket } from './websocket';
 import { ContextManager } from './manager';
 import { Registry } from './registry';
 import { getExtensionLocation } from './location';
+import { updateOutputs } from './utils';
 
 /**
  * A notebook widget extension that creates a kernel manager each time a notebook is opened.
@@ -34,7 +35,6 @@ export class WidgetExtension
     context: DocumentRegistry.IContext<INotebookModel>
   ): IDisposable {
     const manager = new ContextManager(context, this._endpoint, this._www);
-
     return manager;
   }
 }
@@ -70,6 +70,9 @@ const plugin: JupyterFrontEndPlugin<void> = {
         });
       }
 
+      // Enable fullscreen output if any
+      updateOutputs();
+
       return {
         createWebSocket: () => {
           return new TrameJupyterWebSocket(childWindow, comm!);

src/utils.ts

@@ -0,0 +1,36 @@
+export function updateOutputs() {
+  const full = document.querySelectorAll<HTMLElement>(
+    '.jp-LinkedOutputView iframe[id^=trame]'
+  );
+  const all = document.querySelectorAll<HTMLElement>('iframe[id^=trame]');
+  const visibleInFullScreen: Record<string, boolean> = {};
+  const moveToFullScreen: Array<HTMLElement> = [];
+
+  for (let i = 0; i < full.length; i++) {
+    const iframe = full[i];
+    visibleInFullScreen[iframe.id] = true;
+    moveToFullScreen.push(iframe);
+  }
+  for (let i = 0; i < all.length; i++) {
+    const iframe = all[i];
+    if (moveToFullScreen.includes(iframe)) {
+      continue;
+    }
+    if (visibleInFullScreen[iframe.id]) {
+      iframe.style.display = 'none';
+    } else {
+      iframe.style.display = 'block';
+    }
+  }
+  for (let i = 0; i < moveToFullScreen.length; i++) {
+    const iframe = moveToFullScreen[i];
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    if (iframe?.parentElement) {
+      iframe.parentElement.style.padding = '0';
+    }
+    if (iframe?.parentElement?.parentElement) {
+      iframe.parentElement.parentElement.style.height = '100%';
+    }
+  }
+}

src/websocket.ts

@@ -5,8 +5,8 @@ type WebsocketMessage<T> = { data: T };
 
 function toBuffer(msgpack: any) {
   if (msgpack.buffer) {
-    if (msgpack.buffer.byteLength != msgpack.length) {
-      console.warn("toBuffer: deep copy")
+    if (msgpack.buffer.byteLength !== msgpack.length) {
+      console.warn('toBuffer: deep copy');
       const tmp = new Uint8Array(msgpack.length);
       tmp.set(msgpack);
       return tmp.buffer;