Merge pull request #332 from FaberVitale/feat/devtools-display-cart-size

[feat][devtools] show cartridge size

Author: aduros

devtools/web/index.html

@@ -28,6 +28,7 @@
           },
           fps: 60,
           storedValue: null,
+          wasmBufferByteLen: 0xffffff,
         };
         window.dispatchEvent(
           new CustomEvent(updateCompletedEventType, {

devtools/web/src/components/devtools/devtools.scss

@@ -136,6 +136,19 @@ $devtools-body-max-height: calc(
   }
 }
 
+.cart-size-wrapper {
+  display: grid;
+  grid-auto-flow: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  grid-gap: 0.25em;
+
+  .size-box {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 .flags-wrapper {
   display: grid;
   grid-template-rows: 1fr 1fr;

devtools/web/src/components/devtools/devtools.ts

@@ -1,22 +1,27 @@
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UpdateController } from '../../controllers/UpdateController';
+import {
+  UpdateController,
+  UpdateControllerState,
+} from '../../controllers/UpdateController';
 import { createCloseDevtoolsEvent } from '../../events/close-devtools';
 import devtoolsCss from './devtools.scss';
 import { withTheme } from '../../styles/commons';
 import {
+  MAX_CART_SIZE,
   SYSTEM_HIDE_GAMEPAD_OVERLAY,
   SYSTEM_PRESERVE_FRAMEBUFFER,
 } from '../../constants';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { bitmask, identity } from '../../utils/functions';
-import { MemoryView } from '../../models/MemoryView';
 
 export const wasm4DevtoolsTagName = 'wasm4-devtools' as const;
 
 const tabs = ['general', 'controls', 'mem', 'info'] as const;
 
+const colorMasks = [bitmask(3), bitmask(7, 3), bitmask(11, 7), bitmask(15, 11)];
+
 /**
  * ### Programmatic usage
  * @example
@@ -62,14 +67,12 @@ export class Wasm4Devtools extends LitElement {
     this._fixedPosition = this._fixedPosition === 'left' ? 'right' : 'left';
   };
 
-  private _renderGeneralView = (memoryView: MemoryView, fps: number) => {
+  private _renderGeneralView = ({
+    memoryView,
+    fps,
+    wasmBufferByteLen,
+  }: UpdateControllerState) => {
     const drawColors = memoryView.drawColors ?? 0;
-    const colorMasks = [
-      bitmask(3),
-      bitmask(7, 3),
-      bitmask(11, 7),
-      bitmask(15, 11),
-    ];
 
     return html`<article>
       <wasm4-palette
@@ -107,6 +110,16 @@ export class Wasm4Devtools extends LitElement {
         <h4>fps</h4>
         <span class="info-box text-primary">${fps}</span>
       </section>
+      <section class="cart-size-wrapper">
+        <h4>cartridge size ${wasmBufferByteLen > MAX_CART_SIZE ? `⚠️` : ''}</h4>
+        <div class="size-box">
+          current
+          <span class="info-box text-primary">${wasmBufferByteLen}B</span>
+        </div>
+        <div class="size-box">
+          limit <span class="info-box text-primary">${MAX_CART_SIZE}B</span>
+        </div>
+      </section>
       <section class="flags-section">
         <h4>system flags</h4>
         <div class="flags-wrapper">
@@ -131,7 +144,7 @@ export class Wasm4Devtools extends LitElement {
     return html` <wasm4-info-view></wasm4-info-view> `;
   };
 
-  private _renderControls = (memoryView: MemoryView, _: number) => {
+  private _renderControls = ({ memoryView }: UpdateControllerState) => {
     return html`<wasm4-controls-view
       .mouseButtons=${memoryView.mouseBtnByte}
       .mouseX=${memoryView.pointerPos.x}
@@ -140,13 +153,13 @@ export class Wasm4Devtools extends LitElement {
     ></wasm4-controls-view>`;
   };
 
-  private _renderMemory = (memoryView: MemoryView, _: number) => {
+  private _renderMemory = ({ memoryView }: UpdateControllerState) => {
     return html`<wasm4-memory-view
       .memoryView=${memoryView}
     ></wasm4-memory-view>`;
   };
 
-  private _renderTab = (memoryView: MemoryView, fps: number) => {
+  private _renderTab = (updateControllerState: UpdateControllerState) => {
     let renderTab;
     switch (this._activeTab) {
       case 'controls':
@@ -162,16 +175,14 @@ export class Wasm4Devtools extends LitElement {
         renderTab = this._renderGeneralView;
     }
 
-    return renderTab.call(this, memoryView, fps);
+    return renderTab.call(this, updateControllerState);
   };
 
   render() {
     if (!this.updateController.state) {
       return null;
     }
 
-    const { memoryView, fps } = this.updateController.state;
-
     const fixedPosBtnLabel = `move ${
       this._fixedPosition === 'left' ? 'right' : 'left'
     }`;
@@ -260,7 +271,7 @@ export class Wasm4Devtools extends LitElement {
                 </li>`
             )}
           </ul>
-          ${this._renderTab(memoryView, fps)}
+          ${this._renderTab(this.updateController.state)}
         </div>
       </div>
     </div>`;

devtools/web/src/constants.ts

@@ -35,6 +35,8 @@ export const MOUSE_MIDDLE = 4;
 export const SYSTEM_PRESERVE_FRAMEBUFFER = 1;
 export const SYSTEM_HIDE_GAMEPAD_OVERLAY = 2;
 
+export const MAX_CART_SIZE = 0xffff;
+
 interface Range {
   offset: number;
   len: number;

devtools/web/src/controllers/UpdateController.ts

@@ -5,10 +5,11 @@ import {
 } from '../events/update-completed';
 import { MemoryView } from '../models/MemoryView';
 
-interface UpdateControllerState {
+export interface UpdateControllerState {
   memoryView: MemoryView;
   storedValue: string | null;
   fps: number;
+  wasmBufferByteLen: number;
 }
 
 /**
@@ -30,6 +31,7 @@ export class UpdateController implements ReactiveController {
         memoryView: detail.memory,
         storedValue: detail.storedValue ?? null,
         fps: detail.fps,
+        wasmBufferByteLen: detail.wasmBufferByteLen,
       };
 
       this.state = nextState;

devtools/web/src/devtools-manager.ts

@@ -42,6 +42,11 @@ class BufferedRuntimeData implements BufferedData {
   };
 }
 
+interface RuntimeInfo {
+  data: DataView;
+  wasmBufferByteLen: number;
+}
+
 export class DevtoolsManager {
   /**
    * @private
@@ -56,11 +61,18 @@ export class DevtoolsManager {
   /**
    * Notifies the devtools that the web runtime has completed an update.
    */
-  updateCompleted = (dataView: DataView, deltaFrame: number) => {
+  updateCompleted = <Info extends RuntimeInfo>(
+    runtimeInfo: Info,
+    deltaFrame: number
+  ) => {
     if (this._enabled) {
       const fps = Math.floor(1_000 / deltaFrame);
-      this._bufferedData.update(dataView);
-      this._notifyUpdateCompleted(dataView, fps);
+      this._bufferedData.update(runtimeInfo.data);
+      this._notifyUpdateCompleted(
+        runtimeInfo.data,
+        runtimeInfo.wasmBufferByteLen,
+        fps
+      );
     }
   };
 
@@ -87,9 +99,14 @@ export class DevtoolsManager {
   };
 
   private _notifyUpdateCompleted = throttle(
-    (dataView: DataView, fps: number) => {
+    (dataView: DataView, wasmBufferByteLen: number, fps: number) => {
       window.dispatchEvent(
-        createUpdateCompletedEvent(dataView, fps, this._bufferedData.flush())
+        createUpdateCompletedEvent({
+          dataView,
+          wasmBufferByteLen,
+          fps,
+          bufferedData: this._bufferedData.flush(),
+        })
       );
     },
     200

devtools/web/src/events/update-completed.ts

@@ -5,6 +5,7 @@ export const updateCompletedEventType = 'wasm4-update-completed';
 export interface UpdateCompletedDetails {
   memory: MemoryView;
   fps: number;
+  wasmBufferByteLen: number;
   storedValue: string | null;
 }
 
@@ -24,6 +25,13 @@ function getStoredValue(): string | null {
   }
 }
 
+export interface UpdateCompletedData {
+  dataView: DataView;
+  fps: number;
+  bufferedData: BufferedMemoryData;
+  wasmBufferByteLen: number;
+}
+
 /**
  * An event that is meant to be triggered after a `runtime.update` that provides
  * infos regarding the console runtime.
@@ -34,16 +42,15 @@ function getStoredValue(): string | null {
  * @returns
  */
 export function createUpdateCompletedEvent(
-  dataView: DataView,
-  fps: number,
-  bufferedData: BufferedMemoryData,
+  { dataView, fps, bufferedData, wasmBufferByteLen }: UpdateCompletedData,
   eventInit: EventInit = { bubbles: true }
 ): Wasm4UpdateCompletedEvent {
   return new CustomEvent(updateCompletedEventType, {
     ...eventInit,
     detail: {
       memory: new MemoryView(dataView, bufferedData),
       fps,
+      wasmBufferByteLen,
       storedValue: getStoredValue(),
     },
   });

devtools/web/src/styles/theme.scss

@@ -65,6 +65,10 @@ $theme: (
   opacity: 0.4;
 }
 
+.display-block {
+  display: block !important;
+}
+
 .info-box {
   text-align: center;
   padding: 0.2em 0.4em;

runtimes/web/src/index.js

@@ -498,7 +498,7 @@ async function loadCartWasm () {
                 ? "none" : "";
 
             if (DEVELOPER_BUILD) {
-                devtoolsManager.updateCompleted(runtime.data, deltaTime);
+                devtoolsManager.updateCompleted(runtime, deltaTime);
             }
         }
 

runtimes/web/src/runtime.js

@@ -29,6 +29,7 @@ export class Runtime {
         this.reset();
 
         this.pauseState = 0;
+        this.wasmBufferByteLen = 0;
     }
 
     setMouse (x, y, buttons) {
@@ -103,6 +104,8 @@ export class Runtime {
 
     async load (wasmBuffer) {
         const limit = 0xffff;
+        this.wasmBufferByteLen = wasmBuffer.byteLength;
+
         if (wasmBuffer.byteLength > limit) {
             if (DEVELOPER_BUILD) {
                 if (!this.warnedFileSize) {