Skip to content

Commit 68bf958

Browse files
mrdoobmrdoob
committed
Simplified code.
1 parent 09b6fd6 commit 68bf958

File tree

6 files changed

+401
-438
lines changed

6 files changed

+401
-438
lines changed

‎devtools/background.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Store connections between devtools and tabs
1+
// Map tab IDs to connections
22
const connections = new Map();
33

44
// Listen for connections from the devtools panel
@@ -10,19 +10,20 @@ chrome.runtime.onConnect.addListener(port => {
1010
if (message.name === 'init') {
1111
tabId = message.tabId;
1212
connections.set(tabId, port);
13-
console.log('DevTools connection initialized for tab:', tabId);
1413
} else if ((message.name === 'traverse' || message.name === 'reload-scene') && tabId) {
15-
console.log('Background: Forwarding', message.name, 'message to tab', tabId, 'with UUID:', message.uuid);
1614
// Forward traverse or reload request to content script
1715
chrome.tabs.sendMessage(tabId, message);
16+
} else if (message.name === 'request-initial-state' && tabId) {
17+
chrome.tabs.sendMessage(tabId, message);
18+
} else if (tabId === undefined) {
19+
console.warn('Background: Message received from panel before init:', message);
1820
}
1921
});
2022

2123
// Clean up when devtools is closed
2224
port.onDisconnect.addListener(() => {
2325
if (tabId) {
2426
connections.delete(tabId);
25-
console.log('DevTools connection closed for tab:', tabId);
2627
}
2728
});
2829
});
@@ -54,7 +55,6 @@ chrome.webNavigation.onCommitted.addListener(details => {
5455
const port = connections.get(tabId);
5556

5657
if (port) {
57-
console.log('Navigation in tab:', tabId, 'frame:', frameId);
5858
port.postMessage({
5959
id: 'three-devtools',
6060
type: 'committed',

‎devtools/bridge.js

+30-115
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,7 @@ if (!window.__THREE_DEVTOOLS__) {
4040
}
4141

4242
reset() {
43-
console.log('DevTools: Resetting state');
44-
45-
// Clear all monitoring intervals
46-
this.objects.forEach((obj, uuid) => {
47-
if (obj.isRenderer || obj.isScene) {
48-
const interval = monitoringIntervals.get(obj);
49-
if (interval) {
50-
clearInterval(interval);
51-
monitoringIntervals.delete(obj);
52-
}
53-
}
54-
});
43+
// console.log('DevTools: Resetting state');
5544

5645
// Clear objects map
5746
this.objects.clear();
@@ -70,17 +59,13 @@ if (!window.__THREE_DEVTOOLS__) {
7059

7160
// Create and expose the __THREE_DEVTOOLS__ object
7261
const devTools = new DevToolsEventTarget();
73-
devTools.isVisible = true; // Initialize visibility state
7462
Object.defineProperty(window, '__THREE_DEVTOOLS__', {
7563
value: devTools,
7664
configurable: false,
7765
enumerable: true,
7866
writable: false
7967
});
8068

81-
// Store monitoring intervals without polluting objects
82-
const monitoringIntervals = new WeakMap();
83-
8469
// Declare arrays for tracking observed objects
8570
const observedScenes = [];
8671
const observedRenderers = [];
@@ -209,7 +194,7 @@ if (!window.__THREE_DEVTOOLS__) {
209194

210195
// Listen for Three.js registration
211196
devTools.addEventListener('register', (event) => {
212-
console.log('DevTools: Three.js registered with revision:', event.detail.revision);
197+
// console.log('DevTools: Three.js registered with revision:', event.detail.revision);
213198
dispatchEvent('register', event.detail);
214199
});
215200

@@ -221,34 +206,28 @@ if (!window.__THREE_DEVTOOLS__) {
221206
return;
222207
}
223208

224-
console.log('DevTools: Received object:', {
225-
type: obj.type || obj.constructor.name,
226-
isWebGLRenderer: obj.isWebGLRenderer === true,
227-
hasUUID: !!obj.uuid
228-
});
229-
230209
// Generate UUID if needed (especially for WebGLRenderer)
231210
if (!obj.uuid) {
232211
obj.uuid = generateUUID();
233-
console.log('DevTools: Generated UUID for object:', obj.uuid);
212+
// console.log('DevTools: Generated UUID for object:', obj.uuid);
234213
}
235214

236215
// Skip if already registered
237216
if (devTools.objects.has(obj.uuid)) {
238-
console.log('DevTools: Object already registered:', obj.uuid);
217+
// console.log('DevTools: Object already registered:', obj.uuid);
239218
return;
240219
}
241220

242-
console.log('DevTools: Found Three.js object:', obj.type || obj.constructor.name);
221+
// console.log('DevTools: Found Three.js object:', obj.type || obj.constructor.name);
243222

244223
// Get data for this object
245224
const data = getObjectData(obj);
246225
if (data) {
247-
console.log('DevTools: Got object data:', data);
226+
// console.log('DevTools: Got object data:', data);
248227

249228
// If this is a renderer, start periodic updates
250229
if (obj.isWebGLRenderer) {
251-
console.log('DevTools: Starting periodic updates for renderer:', obj.uuid);
230+
// console.log('DevTools: Starting periodic updates for renderer:', obj.uuid);
252231
data.properties = getRendererProperties(obj);
253232
observedRenderers.push(obj);
254233
startRendererMonitoring(obj);
@@ -260,7 +239,7 @@ if (!window.__THREE_DEVTOOLS__) {
260239

261240
// If this is a scene, store the reference and traverse its children
262241
if (obj.isScene) {
263-
console.log('DevTools: Traversing scene children');
242+
// console.log('DevTools: Traversing scene children');
264243

265244
// Store the scene reference locally
266245
observedScenes.push(obj);
@@ -293,13 +272,15 @@ if (!window.__THREE_DEVTOOLS__) {
293272
// Function to get renderer properties
294273
function getRendererProperties(renderer) {
295274
const webglInfo = getWebGLInfo(renderer);
275+
const context = renderer.getContext ? renderer.getContext() : null;
276+
const contextAttributes = context ? context.getContextAttributes() : null;
296277
return {
297278
width: renderer.domElement ? renderer.domElement.clientWidth : 0,
298279
height: renderer.domElement ? renderer.domElement.clientHeight : 0,
299280
drawingBufferWidth: renderer.domElement ? renderer.domElement.width : 0,
300281
drawingBufferHeight: renderer.domElement ? renderer.domElement.height : 0,
301-
alpha: renderer.alpha || false,
302-
antialias: renderer.antialias || false,
282+
alpha: contextAttributes ? contextAttributes.alpha : false,
283+
antialias: contextAttributes ? contextAttributes.antialias : false,
303284
autoClear: renderer.autoClear,
304285
autoClearColor: renderer.autoClearColor,
305286
autoClearDepth: renderer.autoClearDepth,
@@ -343,25 +324,11 @@ if (!window.__THREE_DEVTOOLS__) {
343324

344325
// Function to start renderer monitoring
345326
function startRendererMonitoring(renderer) {
346-
// Clear any existing monitoring
347-
const existingInterval = monitoringIntervals.get(renderer);
348-
if (existingInterval) {
349-
clearInterval(existingInterval);
350-
}
351-
352327
// Function to monitor renderer properties
353328
function monitorRendererProperties() {
354329
try {
355-
// Skip updates if devtools is not visible
356-
if ( ! devTools.isVisible ) {
357-
// console.log('DevTools: Panel not visible, skipping renderer update'); // Optional debug log
358-
return;
359-
}
360-
361330
const data = devTools.objects.get( renderer.uuid );
362331
if ( ! data ) {
363-
clearInterval( intervalId );
364-
monitoringIntervals.delete( renderer );
365332
return;
366333
}
367334

@@ -377,24 +344,18 @@ if (!window.__THREE_DEVTOOLS__) {
377344
oldProperties.drawingBufferHeight !== newProperties.drawingBufferHeight ||
378345
JSON.stringify(oldProperties.info?.render) !== JSON.stringify(newProperties.info?.render) || // Compare render stats
379346
JSON.stringify(oldProperties.info?.memory) !== JSON.stringify(newProperties.info?.memory) // Compare memory stats
380-
// Add other comparisons if needed, or use full stringify as fallback:
381-
// || JSON.stringify(oldProperties) !== JSON.stringify(newProperties)
382347
);
383348

384349
if ( changed ) {
385-
console.log('DevTools: Renderer properties changed, dispatching update for', renderer.uuid); // Log dispatched updates
386350
data.properties = newProperties;
387351
dispatchEvent( 'update', data );
388352
} else {
389-
// console.log('DevTools: Renderer properties unchanged for', renderer.uuid); // Optional: for debugging
390353
}
391354

392355
} catch ( error ) {
393356

394357
// If we get an "Extension context invalidated" error, stop monitoring
395358
if ( error.message.includes( 'Extension context invalidated' ) ) {
396-
clearInterval( intervalId );
397-
monitoringIntervals.delete( renderer );
398359
devTools.reset();
399360
return;
400361
}
@@ -404,12 +365,11 @@ if (!window.__THREE_DEVTOOLS__) {
404365
}
405366
}
406367

407-
const intervalId = setInterval(monitorRendererProperties, 1000);
408-
monitoringIntervals.set(renderer, intervalId);
368+
// TODO: Trigger monitorRendererProperties some other way, e.g., on demand or via events?
409369
}
410370

411371
// Start periodic renderer checks
412-
console.log('DevTools: Starting periodic renderer checks');
372+
// console.log('DevTools: Starting periodic renderer checks');
413373

414374
// Function to check if bridge is available
415375
function checkBridgeAvailability() {
@@ -471,10 +431,14 @@ if (!window.__THREE_DEVTOOLS__) {
471431
else if (message.name === 'visibility' && message.uuid !== undefined) {
472432
toggleVisibility(message.uuid, message.visible);
473433
}
474-
// Handle visibility update from panel (via content script)
475-
else if ( message.name === 'panel-visibility' ) {
476-
devTools.isVisible = message.value;
477-
// console.log( 'DevTools: Visibility set to', devTools.isVisible ); // Optional debug log
434+
// Handle request for initial state from panel
435+
else if ( message.name === 'request-initial-state' ) {
436+
// console.log('DevTools: Received request-initial-state, resending objects...');
437+
// Resend all known objects to the panel
438+
devTools.objects.forEach( ( objectData ) => {
439+
dispatchEvent('observe', objectData);
440+
});
441+
// console.log('DevTools: Finished resending objects.');
478442
}
479443
});
480444

@@ -569,64 +533,15 @@ if (!window.__THREE_DEVTOOLS__) {
569533

570534
// Function to start scene monitoring
571535
function startSceneMonitoring(scene) {
572-
// Clear any existing monitoring
573-
const existingInterval = monitoringIntervals.get(scene);
574-
if (existingInterval) {
575-
clearInterval(existingInterval);
576-
}
577-
578-
// Set up monitoring interval
579-
const intervalId = setInterval(() => {
580-
try {
581-
// Clear existing objects except renderers and the scene itself
582-
devTools.objects.forEach((obj, uuid) => {
583-
if (!obj.isRenderer && uuid !== scene.uuid) {
584-
devTools.objects.delete(uuid);
585-
dispatchEvent('remove', { uuid });
586-
}
587-
});
588-
589-
// Traverse and recreate the entire object list
590-
function traverseScene(object) {
591-
const objectData = getObjectData(object);
592-
if (objectData) {
593-
devTools.objects.set(object.uuid, objectData);
594-
dispatchEvent('observe', objectData);
595-
596-
// Traverse children
597-
object.children.forEach(child => traverseScene(child));
598-
}
599-
}
600-
601-
// Start traversal from scene root
602-
traverseScene(scene);
603-
} catch (error) {
604-
// If we get an "Extension context invalidated" error, stop monitoring
605-
if (error.message.includes('Extension context invalidated')) {
606-
clearInterval(intervalId);
607-
monitoringIntervals.delete(scene);
608-
devTools.reset();
609-
return;
610-
}
611-
console.warn('DevTools: Error in scene monitoring:', error);
536+
// Keep track of known object UUIDs for this scene (excluding renderers)
537+
const knownObjectUUIDs = new Set();
538+
devTools.objects.forEach((obj, uuid) => {
539+
if (!obj.isRenderer) {
540+
knownObjectUUIDs.add(uuid);
612541
}
613-
}, 1000);
614-
615-
monitoringIntervals.set(scene, intervalId);
542+
});
616543

617-
// Clean up monitoring when scene is disposed
618-
const originalDispose = scene.dispose;
619-
scene.dispose = function() {
620-
const intervalId = monitoringIntervals.get(this);
621-
if (intervalId) {
622-
clearInterval(intervalId);
623-
monitoringIntervals.delete(this);
624-
}
625-
626-
if (originalDispose) {
627-
originalDispose.call(this);
628-
}
629-
};
544+
// TODO: Trigger scene updates some other way?
630545
}
631546

632547
// Function to manually reload scene objects
@@ -675,6 +590,6 @@ if (!window.__THREE_DEVTOOLS__) {
675590

676591
} else {
677592

678-
console.log('DevTools: Bridge already initialized');
593+
// console.log('DevTools: Bridge already initialized');
679594

680595
}

‎devtools/content-script.js

+30-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// This script runs in the context of the web page
2-
console.log( 'Three.js DevTools: Content script loaded at document.readyState:', document.readyState );
2+
// console.log( 'Three.js DevTools: Content script loaded at document_readyState:', document.readyState ); // Comment out
33

44
// Function to inject the bridge script
55
function injectBridge( target = document ) {
@@ -31,7 +31,7 @@ function injectIntoIframes() {
3131
} catch ( e ) {
3232

3333
// Ignore cross-origin iframe errors
34-
console.log( 'DevTools: Could not inject into iframe:', e );
34+
// console.log( 'DevTools: Could not inject into iframe:', e ); // Comment out
3535

3636
}
3737

@@ -62,7 +62,7 @@ const observer = new MutationObserver( mutations => {
6262
} catch ( e ) {
6363

6464
// Ignore cross-origin iframe errors
65-
// console.log( 'DevTools: Could not inject into iframe:', e );
65+
// console.log( 'DevTools: Could not inject into iframe:', e ); // Comment out
6666

6767
}
6868

@@ -205,23 +205,36 @@ function handleDevtoolsMessage( message, sender, sendResponse ) {
205205

206206
}
207207

208-
// Add event listeners
209-
window.addEventListener( 'message', handleMainWindowMessage, false );
210-
window.addEventListener( 'message', handleIframeMessage, false );
211-
chrome.runtime.onMessage.addListener( handleDevtoolsMessage );
208+
// Listener for messages forwarded from the background script (originating from panel)
209+
function handleBackgroundMessage( message, sender, sendResponse ) {
212210

213-
// Listen for messages from the panel
214-
chrome.runtime.onMessage.addListener( ( message, sender, sendResponse ) => {
211+
// Check if the message is one we need to forward to the bridge
212+
// Only forward request-initial-state now
213+
if ( message.name === 'request-initial-state' ) {
215214

216-
if ( message.name === 'visibility' ) {
215+
// console.log( 'Content script: Forwarding message to bridge:', message.name );
216+
window.postMessage( message, '*' ); // Forward the message as is to the page
217217

218-
// Forward visibility state to the injected script
219-
window.postMessage( {
220-
id: 'three-devtools',
221-
name: 'panel-visibility', // Use a distinct name
222-
value: message.value
223-
}, '*' );
218+
// Optional: Forward to iframes too, if needed (might cause duplicates if bridge is in iframe)
219+
/*
220+
const iframes = document.querySelectorAll('iframe');
221+
iframes.forEach(iframe => {
222+
try {
223+
iframe.contentWindow.postMessage(message, '*');
224+
} catch (e) {}
225+
});
226+
*/
224227

225228
}
229+
// Keep channel open? No, this listener is synchronous for now.
230+
// return true;
226231

227-
} );
232+
}
233+
234+
// Add event listeners
235+
window.addEventListener( 'message', handleMainWindowMessage, false );
236+
window.addEventListener( 'message', handleIframeMessage, false );
237+
// chrome.runtime.onMessage.addListener( handleDevtoolsMessage ); // This seems redundant/incorrectly placed in original code
238+
239+
// Use a single listener for messages from the background script
240+
chrome.runtime.onMessage.addListener( handleBackgroundMessage );

0 commit comments

Comments
 (0)