Skip to content

[pull] dev from mrdoob:dev #1302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Apr 25, 2026
Merged

[pull] dev from mrdoob:dev #1302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/jsm/inspector/Inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ class Inspector extends RendererInspector {

if ( this.displayCycle.text.needsUpdate ) {

setText( 'fps-counter', this.fps.toFixed() );
setText( this.profiler.toggleButton.querySelector('.fps-counter'), this.fps.toFixed() );

this.performance.updateText( this, frame );
this.memory.updateText( this );
Expand Down
2 changes: 1 addition & 1 deletion examples/jsm/inspector/tabs/Console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class Console extends Tab {
this.buildHeader();

this.logContainer = document.createElement( 'div' );
this.logContainer.id = 'console-log';
this.logContainer.classList.add( 'console-log' );
this.content.appendChild( this.logContainer );

}
Expand Down
5 changes: 3 additions & 2 deletions examples/jsm/inspector/tabs/Performance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ class Performance extends Tab {
label.appendChild( checkmark );
*/

const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), createValueSpan( 'graph-fps-counter' ) );
this.graphFpsCounter = createValueSpan();
const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), this.graphFpsCounter );
perfList.add( graphStats );

const graphItem = new Item( graphContainer );
Expand Down Expand Up @@ -243,7 +244,7 @@ class Performance extends Tab {

//

setText( 'graph-fps-counter', inspector.fps.toFixed() + ' FPS' );
setText( this.graphFpsCounter, inspector.fps.toFixed() + ' FPS' );

//

Expand Down
39 changes: 20 additions & 19 deletions examples/jsm/inspector/ui/Profiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ export class Profiler extends EventDispatcher {
this.maxZIndex = 1002; // Track the highest z-index for detached windows (starts at base z-index from CSS)
this.nextTabOriginalIndex = 0; // Track the original order of tabs as they are added

Style.init();

this.setupShell();
this.setupResizing();

Style.init( this.domElement );

// Setup window resize listener and update mobile status
this.setupWindowResizeListener();

Expand Down Expand Up @@ -237,31 +237,32 @@ export class Profiler extends EventDispatcher {
setupShell() {

this.domElement = document.createElement( 'div' );
this.domElement.id = 'profiler-shell';

this.domElement.classList.add( 'three-inspector' );

this.toggleButton = document.createElement( 'button' );
this.toggleButton.id = 'profiler-toggle';
this.toggleButton.classList.add( 'profiler-toggle' );
this.toggleButton.innerHTML = `
<span id="builtin-tabs-container"></span>
<span id="toggle-text">
<span id="fps-counter">-</span>
<span class="builtin-tabs-container"></span>
<span class="toggle-text">
<span class="fps-counter">-</span>
<span class="fps-label">FPS</span>
</span>
<span id="toggle-icon">
<span class="toggle-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5" /><path d="M9 17h2" /><path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M20.2 20.2l1.8 1.8" /></svg>
</span>
`;
this.toggleButton.onclick = () => this.togglePanel();

this.builtinTabsContainer = this.toggleButton.querySelector( '#builtin-tabs-container' );
this.builtinTabsContainer = this.toggleButton.querySelector( '.builtin-tabs-container' );

// Create mini-panel for builtin tabs (shown when panel is hidden)
this.miniPanel = document.createElement( 'div' );
this.miniPanel.id = 'profiler-mini-panel';
this.miniPanel.classList.add( 'profiler-mini-panel' );
this.miniPanel.className = 'profiler-mini-panel';

this.panel = document.createElement( 'div' );
this.panel.id = 'profiler-panel';
this.panel.classList.add( 'profiler-panel' );

const header = document.createElement( 'div' );
header.className = 'profiler-header';
Expand All @@ -285,7 +286,7 @@ export class Profiler extends EventDispatcher {
controls.className = 'profiler-controls';

this.floatingBtn = document.createElement( 'button' );
this.floatingBtn.id = 'floating-btn';
this.floatingBtn.classList.add( 'floating-btn' );
this.floatingBtn.title = 'Switch to Right Side';
this.floatingBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>';
this.floatingBtn.onclick = () => this.togglePosition();
Expand All @@ -305,12 +306,12 @@ export class Profiler extends EventDispatcher {
}

this.maximizeBtn = document.createElement( 'button' );
this.maximizeBtn.id = 'maximize-btn';
this.maximizeBtn.classList.add( 'maximize-btn' );
this.maximizeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
this.maximizeBtn.onclick = () => this.toggleMaximize();

const hideBtn = document.createElement( 'button' );
hideBtn.id = 'hide-panel-btn';
hideBtn.classList.add( 'hide-panel-btn' );
hideBtn.textContent = '-';
hideBtn.onclick = () => this.togglePanel();

Expand Down Expand Up @@ -877,15 +878,15 @@ export class Profiler extends EventDispatcher {

if ( isDragging && hasMoved && previewWindow ) {

const finalX = parseInt( previewWindow.style.left ) + 200;
const finalY = parseInt( previewWindow.style.top ) + 20;

if ( previewWindow.parentNode ) {

previewWindow.parentNode.removeChild( previewWindow );

}

const finalX = parseInt( previewWindow.style.left ) + 200;
const finalY = parseInt( previewWindow.style.top ) + 20;

this.detachTab( tab, finalX, finalY );

} else if ( ! hasMoved ) {
Expand Down Expand Up @@ -975,7 +976,7 @@ export class Profiler extends EventDispatcher {
windowPanel.appendChild( windowHeader );
windowPanel.appendChild( windowContent );

document.body.appendChild( windowPanel );
this.domElement.appendChild( windowPanel );

return windowPanel;

Expand Down Expand Up @@ -1189,7 +1190,7 @@ export class Profiler extends EventDispatcher {
windowPanel.appendChild( windowHeader );
windowPanel.appendChild( windowContent );

document.body.appendChild( windowPanel );
this.domElement.appendChild( windowPanel );

// Setup window dragging
this.setupDetachedWindowDrag( windowPanel, windowHeader, tab );
Expand Down
Loading
Loading