diff --git a/examples/jsm/inspector/Inspector.js b/examples/jsm/inspector/Inspector.js index b99752c5b3f89c..4551384fe9ace5 100644 --- a/examples/jsm/inspector/Inspector.js +++ b/examples/jsm/inspector/Inspector.js @@ -14,13 +14,19 @@ import { setConsoleFunction, getConsoleFunction, REVISION } from 'three/webgpu'; class Inspector extends RendererInspector { - constructor() { + constructor( options = {} ) { super(); + const { + nonce = null + } = options; + + this.nonce = nonce; + // init profiler - const profiler = new Profiler( this ); + const profiler = new Profiler( this, options ); profiler.addEventListener( 'resize', ( e ) => this.dispatchEvent( e ) ); profiler.addEventListener( 'orientationchange', ( e ) => this.dispatchEvent( e ) ); profiler.addEventListener( 'layoutchange', ( e ) => this.dispatchEvent( e ) ); diff --git a/examples/jsm/inspector/extensions/color-grading/ColorGrading.js b/examples/jsm/inspector/extensions/color-grading/ColorGrading.js index e6c89c856bed78..0924b3ee53ac52 100644 --- a/examples/jsm/inspector/extensions/color-grading/ColorGrading.js +++ b/examples/jsm/inspector/extensions/color-grading/ColorGrading.js @@ -74,7 +74,7 @@ export class ColorGrading extends Extension { super( 'Color Grading', options ); - LUT3DStyle.init(); + LUT3DStyle.init( options.nonce ); this.params = createDefaultParams(); this.lutSize = 32; @@ -186,14 +186,14 @@ export class ColorGrading extends Extension { if ( this.sceneGradingEnabled ) { - if ( this.viewContainer ) this.viewContainer.classList.add( 'is-live-active' ); + this.viewContainer.classList.add( 'is-live-active' ); gradingBtn.className = 'lut-dock-btn active'; lbl.textContent = 'Live Preview'; lbl.className = 'lut-dock-text'; } else { - if ( this.viewContainer ) this.viewContainer.classList.remove( 'is-live-active' ); + this.viewContainer.classList.remove( 'is-live-active' ); gradingBtn.className = 'lut-dock-btn'; lbl.textContent = 'Live Preview'; lbl.className = 'lut-dock-text'; @@ -1813,7 +1813,6 @@ export class ColorGrading extends Extension { version: 2, lutSize: this.lutSize, selectedToneMapping: this.selectedToneMapping, - sceneGradingEnabled: this.sceneGradingEnabled, pipelineOrder: [ ...this.pipelineOrder ], modules: modulesData, params: params @@ -1948,13 +1947,6 @@ export class ColorGrading extends Extension { } - if ( typeof json.sceneGradingEnabled === 'boolean' ) { - - this.sceneGradingEnabled = json.sceneGradingEnabled; - this.updateGradingBtnState(); - this._toggleSceneGrading( this.sceneGradingEnabled ); - - } if ( Array.isArray( json.pipelineOrder ) && json.pipelineOrder.length > 0 ) { @@ -2307,6 +2299,8 @@ export class ColorGrading extends Extension { super.init( inspector ); + LUT3DStyle.init( inspector.nonce ); + const renderer = inspector.getRenderer(); const rendererComp = this.modulesMap.get( 'renderer' ); diff --git a/examples/jsm/inspector/extensions/color-grading/LUT3DStyle.js b/examples/jsm/inspector/extensions/color-grading/LUT3DStyle.js index 95905d6efa3a90..dbba1f0ea01b5d 100644 --- a/examples/jsm/inspector/extensions/color-grading/LUT3DStyle.js +++ b/examples/jsm/inspector/extensions/color-grading/LUT3DStyle.js @@ -4,12 +4,19 @@ export class LUT3DStyle { - static init() { + static init( nonce = null ) { if ( document.getElementById( 'lut3d-generator-style' ) ) return; const style = document.createElement( 'style' ); style.id = 'lut3d-generator-style'; + + if ( nonce ) { + + style.nonce = nonce; + + } + style.textContent = /* css */` @scope (.lut-container) { diff --git a/examples/jsm/inspector/tabs/Timeline.js b/examples/jsm/inspector/tabs/Timeline.js index b137a728915a60..4ad5f4820423d8 100644 --- a/examples/jsm/inspector/tabs/Timeline.js +++ b/examples/jsm/inspector/tabs/Timeline.js @@ -1253,7 +1253,7 @@ class Timeline extends Tab { if ( details[ key ] !== undefined ) { - parts.push( `${key}: ${details[ key ]}` ); + parts.push( `${key}: ${details[ key ]}` ); } @@ -1261,7 +1261,7 @@ class Timeline extends Tab { if ( parts.length === 0 ) return ''; - return `{ ${parts.join( ', ' )} }`; + return `{ ${parts.join( ', ' )} }`; } @@ -1357,10 +1357,10 @@ class Timeline extends Tab { const callsSuffix = isCompact ? '' : ' calls'; const trianglesSuffix = isCompact ? '' : ' triangles'; - const group = ( c, text ) => `${text}`; + const group = ( type, text ) => `${text}`; const maxTriangles = Math.max( this.baseTriangles, frame.triangles || 0 ); const trianglesText = isCompact ? ( frame.triangles || 0 ) : ( frame.triangles || 0 ) + ' / ' + maxTriangles + trianglesSuffix; - this.frameInfo.innerHTML = frameLabel + frame.id + group( 'var(--color-fps)', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'var(--color-call)', frame.calls.length + callsSuffix ) + group( 'var(--color-red)', trianglesText ); + this.frameInfo.innerHTML = frameLabel + frame.id + group( 'fps', ( frame.fps || 0 ).toFixed( 1 ) + fpsSuffix ) + group( 'call', frame.calls.length + callsSuffix ) + group( 'red', trianglesText ); // Update playhead position const rect = this.graphSlider.getBoundingClientRect(); @@ -1567,7 +1567,7 @@ class Timeline extends Tab { let detailsAndCountHTML = ( call.formatedDetails ? call.formatedDetails : '' ); if ( call.count > 1 ) { - detailsAndCountHTML += ` ( ${call.count} )`; + detailsAndCountHTML += ` ( ${call.count} )`; } diff --git a/examples/jsm/inspector/ui/List.js b/examples/jsm/inspector/ui/List.js index 62f8e43ee809b6..a896ee69cb13c7 100644 --- a/examples/jsm/inspector/ui/List.js +++ b/examples/jsm/inspector/ui/List.js @@ -11,9 +11,6 @@ export class List { this.id = `list-${Math.random().toString( 36 ).slice( 2, 11 )}`; this.domElement.dataset.listId = this.id; - this.gridStyleElement = document.createElement( 'style' ); - this.domElement.appendChild( this.gridStyleElement ); - const headerRow = document.createElement( 'div' ); headerRow.className = 'list-header'; this.headers.forEach( headerText => { @@ -30,12 +27,7 @@ export class List { setGridStyle( gridTemplate ) { - this.gridStyleElement.textContent = ` -[data-list-id="${this.id}"] > .list-header, -[data-list-id="${this.id}"] .list-item-row { - grid-template-columns: ${gridTemplate}; -} -`; + this.domElement.style.setProperty( '--list-grid-template', gridTemplate ); } diff --git a/examples/jsm/inspector/ui/Profiler.js b/examples/jsm/inspector/ui/Profiler.js index 8b9dbc7aad0ab7..9ad303b0e04032 100644 --- a/examples/jsm/inspector/ui/Profiler.js +++ b/examples/jsm/inspector/ui/Profiler.js @@ -5,11 +5,12 @@ import { getItem, setItem } from '../Inspector.js'; export class Profiler extends EventDispatcher { - constructor( inspector ) { + constructor( inspector, options = {} ) { super(); this.inspector = inspector; + this.nonce = options.nonce ?? inspector?.nonce ?? null; this.tabs = {}; this.activeTabId = null; this.isResizing = false; @@ -26,7 +27,7 @@ export class Profiler extends EventDispatcher { this.setupShell(); this.setupResizing(); - Style.init( this.domElement ); + Style.init( this.domElement, this.nonce ); this.updateWidgetPosition(); @@ -274,13 +275,19 @@ export class Profiler extends EventDispatcher { - - + 0 + 0 `; this.toggleButton.onclick = () => this.togglePanel(); + const errorBadge = this.toggleButton.querySelector( '.console-badge.error' ); + errorBadge.style.display = 'none'; + + const warnBadge = this.toggleButton.querySelector( '.console-badge.warn' ); + warnBadge.style.display = 'none'; + this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' ); // Create mini-panel for builtin tabs (shown when panel is hidden) diff --git a/examples/jsm/inspector/ui/Style.js b/examples/jsm/inspector/ui/Style.js index 4158895fba7e2a..14657dd291c584 100644 --- a/examples/jsm/inspector/ui/Style.js +++ b/examples/jsm/inspector/ui/Style.js @@ -1,6 +1,6 @@ export class Style { - static init( container ) { + static init( container, nonce = null ) { const css = /* css */` @scope (.three-inspector) { @@ -1081,6 +1081,7 @@ export class Style { .list-item-row { display: grid; + grid-template-columns: var(--list-grid-template, none); align-items: center; padding: 4px 8px; border-radius: 3px; @@ -1172,6 +1173,7 @@ export class Style { .list-header { display: grid; + grid-template-columns: var(--list-grid-template, none); align-items: center; padding: 4px 8px; font-weight: 600; @@ -2232,10 +2234,63 @@ export class Style { justify-content: center !important; } + /* Timeline Info & Details */ + .timeline-detail-block { + font-size: 11px; + margin-left: 8px; + color: var(--text-secondary); + opacity: 1; + } + + .timeline-detail-key, + .timeline-detail-sep, + .timeline-call-count { + opacity: 0.5; + } + + .timeline-detail-value { + color: var(--text-secondary); + opacity: 1; + } + + .timeline-info-group { + display: inline-flex; + align-items: center; + margin-left: 12px; + flex-shrink: 0; + } + + .timeline-info-dot { + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 6px; + flex-shrink: 0; + } + + .timeline-info-dot.fps { + background-color: var(--color-fps); + } + + .timeline-info-dot.call { + background-color: var(--color-call); + } + + .timeline-info-dot.red { + background-color: var(--color-red); + } + } `; const styleElement = document.createElement( 'style' ); + + if ( nonce ) { + + styleElement.nonce = nonce; + + } + styleElement.textContent = css; container.appendChild( styleElement );