From dc4e54a94b7528416cf58eb88d0ae7f750a28e55 Mon Sep 17 00:00:00 2001
From: Sam Clegg <sbc@chromium.org>
Date: Wed, 21 Feb 2024 15:40:15 -0800
Subject: [PATCH] Cleanup cpuprofiler.js. NFC (#21387)

- Use mathod syntax
- Cleanup long line
---
 src/cpuprofiler.js | 192 ++++++++++++++++++++++++++++++---------------
 1 file changed, 129 insertions(+), 63 deletions(-)

diff --git a/src/cpuprofiler.js b/src/cpuprofiler.js
index f8f919431afe..f55ebec78df3 100644
--- a/src/cpuprofiler.js
+++ b/src/cpuprofiler.js
@@ -4,12 +4,16 @@
  * SPDX-License-Identifier: MIT
  */
 
-// cpuprofiler.js is an interactive CPU execution profiler which measures the time spent in executing code that utilizes requestAnimationFrame(), setTimeout() and/or setInterval() handlers to run.
-// Visit https://github.com/emscripten-core/emscripten for the latest version.
-
-// performance.now() might get faked later (this is done in the openwebgames.com test harness), so save the real one for cpu profiler.
-// However, in Safari, assigning to the performance object will mysteriously vanish in other imported .js <script>, so for that, replace
-// the whole object. That doesn't work for Chrome in turn, so need to resort to user agent sniffing.. (sad :/)
+// cpuprofiler.js is an interactive CPU execution profiler which measures the
+// time spent in executing code that utilizes requestAnimationFrame(),
+// setTimeout() and/or setInterval() handlers to run.
+
+// performance.now() might get faked later (this is done in the openwebgames.com
+// test harness), so save the real one for cpu profiler.
+// However, in Safari, assigning to the performance object will mysteriously
+// vanish in other imported .js <script>, so for that, replace the whole object.
+// That doesn't work for Chrome in turn, so need to resort to user agent
+// sniffing.. (sad :/)
 if (!performance.realNow) {
   var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   if (isSafari) {
@@ -27,26 +31,35 @@ var emscriptenCpuProfiler = {
   // UI update interval in milliseconds.
   uiUpdateInterval: 1,
 
-  // Specifies the pixel column where the previous UI update finished at. (current "draw cursor" position next draw will resume from)
+  // Specifies the pixel column where the previous UI update finished at.
+  // (current "draw cursor" position next draw will resume from)
   lastUiUpdateEndX: 0,
 
-  // An array which stores samples of msec durations spent in the emscripten main loop (emscripten_set_main_loop).
-  // Carries # samples equal to the pixel width of the profiler display window, and old samples are erased in a rolling window fashion.
+  // An array which stores samples of msec durations spent in the emscripten
+  // main loop (emscripten_set_main_loop).
+  // Carries # samples equal to the pixel width of the profiler display window,
+  // and old samples are erased in a rolling window fashion.
   timeSpentInMainloop: [],
 
-  // Similar to 'timeSpentInMainloop', except this stores msec durations outside the emscripten main loop callback. (either idle CPU time, browser processing, or something else)
+  // Similar to 'timeSpentInMainloop', except this stores msec durations outside
+  // the emscripten main loop callback. (either idle CPU time, browser
+  // processing, or something else)
   timeSpentOutsideMainloop: [],
 
-  // Specifies the sample coordinate into the timeSpentIn/OutsideMainloop arrays that is currently being populated.
+  // Specifies the sample coordinate into the timeSpentIn/OutsideMainloop arrays
+  // that is currently being populated.
   currentHistogramX: 0,
 
-  // Wallclock time denoting when the currently executing main loop callback tick began.
+  // Wallclock time denoting when the currently executing main loop callback
+  // tick began.
   currentFrameStartTime: 0,
 
-  // Wallclock time denoting when the previously executing main loop was finished.
+  // Wallclock time denoting when the previously executing main loop was
+  // finished.
   previousFrameEndTime: 0,
 
-  // The total time spent in a frame can be further subdivided down into 'sections'. This array stores info structures representing each section.
+  // The total time spent in a frame can be further subdivided down into
+  // 'sections'. This array stores info structures representing each section.
   sections: [],
 
   // The 2D canvas DOM element to which the CPU profiler graph is rendered to.
@@ -55,7 +68,9 @@ var emscriptenCpuProfiler = {
   // The 2D drawing context on the canvas.
   drawContext: null,
 
-  // How many milliseconds in total to fit vertically into the displayed CPU profiler window? Frametimes longer than this are out the graph and not visible.
+  // How many milliseconds in total to fit vertically into the displayed CPU
+  // profiler window? Frametimes longer than this are out the graph and not
+  // visible.
   verticalTimeScale: 40,
 
   // History of wallclock times of N most recent frame times. Used to estimate current FPS.
@@ -68,18 +83,23 @@ var emscriptenCpuProfiler = {
 
   fpsCounterUpdateInterval: 2000, // msecs
 
-  insideMainLoopRecursionCounter: 0, // Used to detect recursive entries to the main loop, which can happen in certain complex cases, e.g. if not using rAF to tick rendering to the canvas.
+  // Used to detect recursive entries to the main loop, which can happen in
+  // certain complex cases, e.g. if not using rAF to tick rendering to the
+  // canvas.
+  insideMainLoopRecursionCounter: 0,
 
-  // fpsCounter() is called once per frame to record an executed frame time, and to periodically update the FPS counter display.
-  fpsCounter: function fpsCounter() {
+  // fpsCounter() is called once per frame to record an executed frame time, and
+  // to periodically update the FPS counter display.
+  fpsCounter() {
     // Record the new frame time sample, and prune the history to K most recent frames.
     var now = performance.realNow();
-    if (this.fpsCounterTicks.length < this.fpsCounterNumMostRecentFrames) this.fpsCounterTicks.push(now);
-    else {
+    if (this.fpsCounterTicks.length < this.fpsCounterNumMostRecentFrames) {
+      this.fpsCounterTicks.push(now);
+    } else {
       for (var i = 0; i < this.fpsCounterTicks.length-1; ++i) this.fpsCounterTicks[i] = this.fpsCounterTicks[i+1];
       this.fpsCounterTicks[this.fpsCounterTicks.length-1] = now;
     }
-  
+
     if (now - this.fpsCounterLastPrint > this.fpsCounterUpdateInterval) {
       var fps = ((this.fpsCounterTicks.length - 1) * 1000.0 / (this.fpsCounterTicks[this.fpsCounterTicks.length - 1] - this.fpsCounterTicks[0]));
       var totalDt = 0;
@@ -145,8 +165,10 @@ var emscriptenCpuProfiler = {
   },
 
   // Creates a new section. Call once at startup.
-  createSection: function createSection(number, name, drawColor, traceable) {
-    while (this.sections.length <= number) this.sections.push(null); // Keep an array structure.
+  createSection(number, name, drawColor, traceable) {
+    while (this.sections.length <= number) {
+      this.sections.push(null); // Keep an array structure.
+    }
     var sect = this.sections[number];
     sect ||= {
       count: 0,
@@ -182,7 +204,7 @@ var emscriptenCpuProfiler = {
   },
 
   // Call at runtime whenever the code execution enter a given profiling section.
-  enterSection: function enterSection(sectionNumber) {
+  enterSection(sectionNumber) {
     var sect = this.sections[sectionNumber];
     // Handle recursive entering without getting confused (subsequent re-entering is ignored)
     ++sect.count;
@@ -191,7 +213,7 @@ var emscriptenCpuProfiler = {
 
   // Call at runtime when the code execution exits the given profiling section.
   // Be sure to match each startSection(x) call with a call to endSection(x).
-  endSection: function endSection(sectionNumber) {
+  endSection(sectionNumber) {
     var sect = this.sections[sectionNumber];
     --sect.count;
     if (sect.count == 0) {
@@ -207,16 +229,19 @@ var emscriptenCpuProfiler = {
           fn = fn.trim();
           cs += '"' + fn + '"';
         }
-        
+
         console.error('Trace: at t=' + performance.realNow().toFixed(1) + ', section "' + sect.name + '" called via ' + cs + ' took ' + timeInSection.toFixed(2) + ' msecs!');
       }
-      if (this.insideMainLoopRecursionCounter) sect.accumulatedTimeInsideMainLoop += timeInSection;
-      else sect.accumulatedTimeOutsideMainLoop += timeInSection;
+      if (this.insideMainLoopRecursionCounter) {
+        sect.accumulatedTimeInsideMainLoop += timeInSection;
+      } else {
+        sect.accumulatedTimeOutsideMainLoop += timeInSection;
+      }
     }
   },
 
   // Called in the beginning of each main loop frame tick.
-  frameStart: function frameStart() {
+  frameStart() {
     this.insideMainLoopRecursionCounter++;
     if (this.insideMainLoopRecursionCounter == 1) {
       this.currentFrameStartTime = performance.realNow();
@@ -225,7 +250,7 @@ var emscriptenCpuProfiler = {
   },
 
   // Called in the end of each main loop frame tick.
-  frameEnd: function frameEnd() {
+  frameEnd() {
     this.insideMainLoopRecursionCounter--;
     if (this.insideMainLoopRecursionCounter != 0) return;
 
@@ -238,7 +263,7 @@ var emscriptenCpuProfiler = {
       sect.accumulatedTimeInsideMainLoop = 0;
       sect.accumulatedTimeOutsideMainLoop = 0;
     }
-    
+
     var t = performance.realNow();
     var cpuMainLoopDuration = t - this.currentFrameStartTime;
     var durationBetweenFrameUpdates = t - this.previousFrameEndTime;
@@ -268,19 +293,41 @@ var emscriptenCpuProfiler = {
   colorSetIntervalSection: '#FF0000',
   colorSetTimeoutSection: '#00FF00',
 
-  hotGLFunctions: ['activeTexture', 'bindBuffer', 'bindFramebuffer', 'bindTexture', 'blendColor', 'blendEquation', 'blendEquationSeparate', 'blendFunc', 'blendFuncSeparate', 'bufferSubData', 'clear', 'clearColor', 'clearDepth', 'clearStencil', 'colorMask', 'compressedTexSubImage2D', 'copyTexSubImage2D', 'cullFace', 'depthFunc', 'depthMask', 'depthRange', 'disable', 'disableVertexAttribArray', 'drawArrays', 'drawArraysInstanced', 'drawElements', 'drawElementsInstanced', 'enable', 'enableVertexAttribArray', 'frontFace', 'lineWidth', 'pixelStorei', 'polygonOffset', 'sampleCoverage', 'scissor', 'stencilFunc', 'stencilFuncSeparate', 'stencilMask', 'stencilMaskSeparate', 'stencilOp', 'stencilOpSeparate', 'texSubImage2D', 'useProgram', 'viewport', 'beginQuery', 'endQuery', 'bindVertexArray', 'drawBuffers', 'copyBufferSubData', 'blitFramebuffer', 'invalidateFramebuffer', 'invalidateSubFramebuffer', 'readBuffer', 'texSubImage3D', 'copyTexSubImage3D', 'compressedTexSubImage3D', 'vertexAttribDivisor', 'drawRangeElements', 'clearBufferiv', 'clearBufferuiv', 'clearBufferfv', 'clearBufferfi', 'bindSampler', 'bindTransformFeedback', 'beginTransformFeedback', 'endTransformFeedback', 'transformFeedbackVaryings', 'pauseTransformFeedback', 'resumeTransformFeedback', 'bindBufferBase', 'bindBufferRange', 'uniformBlockBinding'],
+  hotGLFunctions: ['activeTexture', 'bindBuffer', 'bindFramebuffer',
+    'bindTexture', 'blendColor', 'blendEquation', 'blendEquationSeparate',
+    'blendFunc', 'blendFuncSeparate', 'bufferSubData', 'clear', 'clearColor',
+    'clearDepth', 'clearStencil', 'colorMask', 'compressedTexSubImage2D',
+    'copyTexSubImage2D', 'cullFace', 'depthFunc', 'depthMask', 'depthRange',
+    'disable', 'disableVertexAttribArray', 'drawArrays', 'drawArraysInstanced',
+    'drawElements', 'drawElementsInstanced', 'enable',
+    'enableVertexAttribArray', 'frontFace', 'lineWidth', 'pixelStorei',
+    'polygonOffset', 'sampleCoverage', 'scissor', 'stencilFunc',
+    'stencilFuncSeparate', 'stencilMask', 'stencilMaskSeparate', 'stencilOp',
+    'stencilOpSeparate', 'texSubImage2D', 'useProgram', 'viewport',
+    'beginQuery', 'endQuery', 'bindVertexArray', 'drawBuffers',
+    'copyBufferSubData', 'blitFramebuffer', 'invalidateFramebuffer',
+    'invalidateSubFramebuffer', 'readBuffer', 'texSubImage3D',
+    'copyTexSubImage3D', 'compressedTexSubImage3D', 'vertexAttribDivisor',
+    'drawRangeElements', 'clearBufferiv', 'clearBufferuiv', 'clearBufferfv',
+    'clearBufferfi', 'bindSampler', 'bindTransformFeedback',
+    'beginTransformFeedback', 'endTransformFeedback',
+    'transformFeedbackVaryings', 'pauseTransformFeedback',
+    'resumeTransformFeedback', 'bindBufferBase', 'bindBufferRange',
+    'uniformBlockBinding'],
 
   hookedWebGLContexts: [],
   logWebGLCallsSlowerThan: Infinity,
 
-  toggleHelpTextVisible: () => {
+  toggleHelpTextVisible() {
     var help = document.getElementById('cpuprofiler_help_text');
     if (help.style) help.style.display = (help.style.display == 'none') ? 'block' : 'none';
   },
 
   // Installs the startup hooks and periodic UI update timer.
-  initialize: function initialize() {
-    // Hook into requestAnimationFrame function to grab animation even if application did not use emscripten_set_main_loop() to drive animation, but e.g. used its own function that performs requestAnimationFrame().
+  initialize() {
+    // Hook into requestAnimationFrame function to grab animation even if
+    // application did not use emscripten_set_main_loop() to drive animation,
+    // but e.g. used its own function that performs requestAnimationFrame().
     if (!window.realRequestAnimationFrame) {
       window.realRequestAnimationFrame = window.requestAnimationFrame;
       window.requestAnimationFrame = (cb) => {
@@ -293,8 +340,9 @@ var emscriptenCpuProfiler = {
       }
     }
 
-    // Create the UI display if it doesn't yet exist. If you want to customize the location/style of the cpuprofiler UI,
-    // you can manually create this beforehand.
+    // Create the UI display if it doesn't yet exist. If you want to customize
+    // the location/style of the cpuprofiler UI, you can manually create this
+    // beforehand.
     var cpuprofiler = document.getElementById('cpuprofiler');
     if (!cpuprofiler) {
       var css = '.colorbox { border: solid 1px black; margin-left: 10px; margin-right: 3px; display: inline-block; width: 20px; height: 10px; }  .hastooltip:hover .tooltip { display: block; } .tooltip { display: none; background: #FFFFFF; margin-left: 28px; padding: 5px; position: absolute; z-index: 1000; width:200px; } .hastooltip { margin:0px; }';
@@ -303,12 +351,15 @@ var emscriptenCpuProfiler = {
       style.appendChild(document.createTextNode(css));
       document.head.appendChild(style);
 
-      var div = document.getElementById('cpuprofiler_container'); // Users can provide a container element where to place this if desired.
+      // Users can provide a container element where to place this if desired.
+      var div = document.getElementById('cpuprofiler_container');
       if (!div) {
         div = document.createElement("div");
         document.body.appendChild(div);
 
-        // It is common to set 'overflow: hidden;' on canvas pages that do WebGL. When CpuProfiler is being used, there will be a long block of text on the page, so force-enable scrolling.
+        // It is common to set 'overflow: hidden;' on canvas pages that do
+        // WebGL. When CpuProfiler is being used, there will be a long block of
+        // text on the page, so force-enable scrolling.
         document.body.style.overflow = '';
       }
       var helpText = "<div style='margin-left: 10px;'>Color Legend:";
@@ -346,12 +397,18 @@ var emscriptenCpuProfiler = {
       helpText += "</div>";
 
       div.innerHTML = "<div style='color: black; border: 2px solid black; padding: 2px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; margin-top: 5px; background-color: #F0F0FF;'><span style='margin-left: 10px;'><b>Cpu Profiler</b><sup style='cursor: pointer;' onclick='emscriptenCpuProfiler.toggleHelpTextVisible();'>[?]</sup></span> <button style='display:inline; border: solid 1px #ADADAD; margin: 2px; background-color: #E1E1E1;' onclick='noExitRuntime=false;Module.exit();'>Halt</button><button id='toggle_webgl_profile' style='display:inline; border: solid 1px #ADADAD; margin: 2px;  background-color: #E1E1E1;' onclick='emscriptenCpuProfiler.toggleHookWebGL()'>Profile WebGL</button><button id='toggle_webgl_trace' style='display:inline; border: solid 1px #ADADAD; margin: 2px;  background-color: #E1E1E1;' onclick='emscriptenCpuProfiler.toggleTraceWebGL()'>Trace Calls</button> slower than <input id='trace_limit' oninput='emscriptenCpuProfiler.disableTraceWebGL();' style='width:40px;' value='100'></input> msecs. <span id='fpsResult' style='margin-left: 5px;'></span><canvas style='border: 1px solid black; margin-left:auto; margin-right:auto; display: block;' id='cpuprofiler_canvas' width='800px' height='200'></canvas><div id='cpuprofiler'></div>" + helpText;
-      document.getElementById('trace_limit').onkeydown = (e) => { if (e.which == 13 || e.keycode == 13) emscriptenCpuProfiler.enableTraceWebGL(); else emscriptenCpuProfiler.disableTraceWebGL(); };
+      document.getElementById('trace_limit').onkeydown = (e) => {
+        if (e.which == 13 || e.keycode == 13) {
+          emscriptenCpuProfiler.enableTraceWebGL();
+        } else {
+          emscriptenCpuProfiler.disableTraceWebGL();
+        }
+      };
       cpuprofiler = document.getElementById('cpuprofiler');
 
       if (location.search.includes('expandhelp')) this.toggleHelpTextVisible();
     }
-    
+
     this.canvas = document.getElementById('cpuprofiler_canvas');
     this.canvas.width = document.documentElement.clientWidth - 32;
     this.drawContext = this.canvas.getContext('2d');
@@ -392,12 +449,12 @@ var emscriptenCpuProfiler = {
     Module['postMainLoop'] = () => emscriptenCpuProfiler.frameEnd();
   },
 
-  drawHorizontalLine: function drawHorizontalLine(startX, endX, pixelThickness, msecs) {
+  drawHorizontalLine(startX, endX, pixelThickness, msecs) {
     var height = msecs * this.canvas.height / this.verticalTimeScale;
     this.drawContext.fillRect(startX,this.canvas.height - height, endX - startX, pixelThickness);
   },
 
-  clearUi: function clearUi(startX, endX) {  
+  clearUi(startX, endX) {
     // Background clear
     this.drawContext.fillStyle = this.colorBackground;
     this.drawContext.fillRect(startX, 0, endX - startX, this.canvas.height);
@@ -408,7 +465,7 @@ var emscriptenCpuProfiler = {
     this.drawHorizontalLine(startX, endX, 1, 33.3333333);
   },
 
-  drawGraphLabels: function drawGraphLabels() {
+  drawGraphLabels() {
     this.drawContext.fillStyle = this.colorTextLabel;
     this.drawContext.font = "bold 10px Arial";
     this.drawContext.textAlign = "right";
@@ -416,7 +473,7 @@ var emscriptenCpuProfiler = {
     this.drawContext.fillText("33.33... ms", this.canvas.width - 3, this.canvas.height - 33.3333 * this.canvas.height / this.verticalTimeScale - 3);
   },
 
-  drawBar: function drawBar(x) {
+  drawBar(x) {
     var timeSpentInSectionsInsideMainLoop = 0;
     for (var i = 0; i < this.sections.length; ++i) {
       var sect = this.sections[i];
@@ -447,9 +504,10 @@ var emscriptenCpuProfiler = {
     this.drawContext.fillRect(x, y, 1, h);
   },
 
-  // Main UI update/redraw entry point. Drawing occurs incrementally to touch as few pixels as possible and to cause the least impact to the overall performance
-  // while profiling.
-  updateUi: function updateUi(startX, endX) {  
+  // Main UI update/redraw entry point. Drawing occurs incrementally to touch as
+  // few pixels as possible and to cause the least impact to the overall
+  // performance while profiling.
+  updateUi(startX, endX) {
     // Poll whether user as changed the browser window, and if so, resize the profiler window and redraw it.
     if (this.canvas.width != document.documentElement.clientWidth - 32) {
       this.canvas.width = document.documentElement.clientWidth - 32;
@@ -469,8 +527,10 @@ var emscriptenCpuProfiler = {
       startX = 0; // Full redraw all columns.
     }
 
-    // Also poll to autodetect if there is an Emscripten GL canvas available that we could hook into. This is a bit clumsy, but there's no good location to get an event after GL context has been created, so
-    // need to resort to polling.
+    // Also poll to autodetect if there is an Emscripten GL canvas available
+    // that we could hook into. This is a bit clumsy, but there's no good
+    // location to get an event after GL context has been created, so need to
+    // resort to polling.
     if (location.search.includes('webglprofiler') && !this.automaticallyHookedWebGLProfiler) {
       this.hookWebGL();
       if (location.search.includes('tracegl')) {
@@ -500,8 +560,9 @@ var emscriptenCpuProfiler = {
     for (var x = startX; x < endX; ++x) this.drawBar(x);
   },
 
-  // Work around Microsoft Edge bug where webGLContext.function.length always returns 0.
-  webGLFunctionLength: function(f) {
+  // Work around Microsoft Edge bug where webGLContext.function.length always
+  // returns 0.
+  webGLFunctionLength(f) {
     var l0 = ['getContextAttributes','isContextLost','getSupportedExtensions','createBuffer','createFramebuffer','createProgram','createRenderbuffer','createTexture','finish','flush','getError', 'createVertexArray', 'createQuery', 'createSampler', 'createTransformFeedback', 'endTransformFeedback', 'pauseTransformFeedback', 'resumeTransformFeedback', 'makeXRCompatible'];
     var l1 = ['getExtension','activeTexture','blendEquation','checkFramebufferStatus','clear','clearDepth','clearStencil','compileShader','createShader','cullFace','deleteBuffer','deleteFramebuffer','deleteProgram','deleteRenderbuffer','deleteShader','deleteTexture','depthFunc','depthMask','disable','disableVertexAttribArray','enable','enableVertexAttribArray','frontFace','generateMipmap','getAttachedShaders','getParameter','getProgramInfoLog','getShaderInfoLog','getShaderSource','isBuffer','isEnabled','isFramebuffer','isProgram','isRenderbuffer','isShader','isTexture','lineWidth','linkProgram','stencilMask','useProgram','validateProgram', 'deleteQuery', 'isQuery', 'deleteVertexArray', 'bindVertexArray', 'isVertexArray', 'drawBuffers', 'readBuffer', 'endQuery', 'deleteSampler', 'isSampler', 'isSync', 'deleteSync', 'deleteTransformFeedback', 'isTransformFeedback', 'beginTransformFeedback'];
     var l2 = ['attachShader','bindBuffer','bindFramebuffer','bindRenderbuffer','bindTexture','blendEquationSeparate','blendFunc','depthRange','detachShader','getActiveAttrib','getActiveUniform','getAttribLocation','getBufferParameter','getProgramParameter','getRenderbufferParameter','getShaderParameter','getShaderPrecisionFormat','getTexParameter','getUniform','getUniformLocation','getVertexAttrib','getVertexAttribOffset','hint','pixelStorei','polygonOffset','sampleCoverage','shaderSource','stencilMaskSeparate','uniform1f','uniform1fv','uniform1i','uniform1iv','uniform2fv','uniform2iv','uniform3fv','uniform3iv','uniform4fv','uniform4iv','vertexAttrib1f','vertexAttrib1fv','vertexAttrib2fv','vertexAttrib3fv','vertexAttrib4fv', 'vertexAttribDivisor', 'beginQuery', 'invalidateFramebuffer', 'getFragDataLocation', 'uniform1ui', 'uniform1uiv', 'uniform2uiv', 'uniform3uiv', 'uniform4uiv', 'vertexAttribI4iv', 'vertexAttribI4uiv', 'getQuery', 'getQueryParameter', 'bindSampler', 'getSamplerParameter', 'fenceSync', 'getSyncParameter', 'bindTransformFeedback', 'getTransformFeedbackVarying', 'getIndexedParameter', 'getUniformIndices', 'getUniformBlockIndex', 'getActiveUniformBlockName'];
@@ -529,30 +590,30 @@ var emscriptenCpuProfiler = {
     console.warn('Unexpected WebGL function ' + f);
   },
 
-  detectWebGLContext: function() {
+  detectWebGLContext() {
     if (Module['canvas']?.GLctxObject?.GLctx) return Module['canvas'].GLctxObject.GLctx;
     else if (typeof GLctx != 'undefined') return GLctx;
     else if (Module.ctx) return Module.ctx;
     return null;
   },
 
-  toggleHookWebGL: function(glCtx) {
+  toggleHookWebGL(glCtx) {
     glCtx ||= this.detectWebGLContext();
     if (this.hookedWebGLContexts.includes(glCtx)) this.unhookWebGL(glCtx);
     else this.hookWebGL(glCtx);
   },
 
-  enableTraceWebGL: function() {
+  enableTraceWebGL() {
     document.getElementById("toggle_webgl_trace").style.background = '#00FF00';
     this.logWebGLCallsSlowerThan = parseInt(document.getElementById('trace_limit').value, undefined /* https://github.com/google/closure-compiler/issues/3230 / https://github.com/google/closure-compiler/issues/3548 */);
   },
 
-  disableTraceWebGL: function() {
+  disableTraceWebGL() {
     document.getElementById("toggle_webgl_trace").style.background = '#E1E1E1';
     this.logWebGLCallsSlowerThan = Infinity;
   },
 
-  toggleTraceWebGL: function() {
+  toggleTraceWebGL() {
     if (this.logWebGLCallsSlowerThan == Infinity) {
       this.enableTraceWebGL();
     } else {
@@ -560,7 +621,7 @@ var emscriptenCpuProfiler = {
     }
   },
 
-  unhookWebGL: function(glCtx) {
+  unhookWebGL(glCtx) {
     glCtx ||= this.detectWebGLContext();
     if (!glCtx.cpuprofilerAlreadyHooked) return;
     glCtx.cpuprofilerAlreadyHooked = false;
@@ -575,7 +636,7 @@ var emscriptenCpuProfiler = {
     }
   },
 
-  hookWebGLFunction: function(f, glCtx) {
+  hookWebGLFunction(f, glCtx) {
     var section = (this.hotGLFunctions.includes(f) || f.startsWith('uniform') || f.startsWith('vertexAttrib')) ? 0 : 1;
     var realf = 'real_' + f;
     glCtx[realf] = glCtx[f];
@@ -598,7 +659,7 @@ var emscriptenCpuProfiler = {
     }
   },
 
-  hookWebGL: function(glCtx) {
+  hookWebGL(glCtx) {
     glCtx ||= this.detectWebGLContext();
     if (!glCtx) return;
     if (!((typeof WebGLRenderingContext != 'undefined' && glCtx instanceof WebGLRenderingContext)
@@ -612,8 +673,11 @@ var emscriptenCpuProfiler = {
     this.hookedWebGLContexts.push(glCtx);
     document.getElementById("toggle_webgl_profile").style.background = '#00FF00';
 
-    // Hot GL functions are ones that you'd expect to find during render loops (render calls, dynamic resource uploads), cold GL functions are load time functions (shader compilation, texture/mesh creation)
-    // Distinguishing between these two allows pinpointing locations of troublesome GL usage that might cause performance issues.
+    // Hot GL functions are ones that you'd expect to find during render loops
+    // (render calls, dynamic resource uploads), cold GL functions are load time
+    // functions (shader compilation, texture/mesh creation)
+    // Distinguishing between these two allows pinpointing locations of
+    // troublesome GL usage that might cause performance issues.
     this.createSection(0, 'Hot GL', this.colorHotGLFunction, /*traceable=*/true);
     this.createSection(1, 'Cold GL', this.colorColdGLFunction, /*traceable=*/true);
     for (var f in glCtx) {
@@ -688,7 +752,9 @@ setTimeout = (fn, delay) => {
 }
 
 // Backwards compatibility with previously compiled code. Don't call this anymore!
-function cpuprofiler_add_hooks() { emscriptenCpuProfiler.initialize(); }
+function cpuprofiler_add_hooks() {
+  emscriptenCpuProfiler.initialize();
+}
 
 if (typeof document != 'undefined') {
   emscriptenCpuProfiler.initialize();