Inspector: Add unread warning and error notification badges (#33732)

examples/jsm/inspector/tabs/Console.js

@@ -9,6 +9,24 @@ class Console extends Tab {
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';
 
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+
+		this.tabBadgeContainer = document.createElement( 'span' );
+		this.tabBadgeContainer.className = 'tab-badge-container';
+
+		this.tabErrorBadge = document.createElement( 'span' );
+		this.tabErrorBadge.className = 'tab-badge error';
+		this.tabErrorBadge.style.display = 'none';
+
+		this.tabWarnBadge = document.createElement( 'span' );
+		this.tabWarnBadge.className = 'tab-badge warn';
+		this.tabWarnBadge.style.display = 'none';
+
+		this.tabBadgeContainer.appendChild( this.tabErrorBadge );
+		this.tabBadgeContainer.appendChild( this.tabWarnBadge );
+		this.button.appendChild( this.tabBadgeContainer );
+
 		this.buildHeader();
 
 		this.logContainer = document.createElement( 'div' );
@@ -210,6 +228,95 @@ class Console extends Tab {
 
 	}
 
+	setActive( isActive ) {
+
+		super.setActive( isActive );
+
+		if ( isActive && this.profiler && this.profiler.panel.classList.contains( 'visible' ) ) {
+
+			this.clearUnread();
+
+		}
+
+	}
+
+	clearUnread() {
+
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+		this.updateBadges();
+
+	}
+
+	updateBadges() {
+
+		if ( ! this.profiler ) return;
+
+		const errorBadge = this.profiler.toggleButton.querySelector( '.console-badge.error' );
+		const warnBadge = this.profiler.toggleButton.querySelector( '.console-badge.warn' );
+
+		if ( errorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				errorBadge.textContent = this.unreadErrors;
+				errorBadge.style.display = '';
+
+			} else {
+
+				errorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( warnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				warnBadge.textContent = this.unreadWarns;
+				warnBadge.style.display = '';
+
+			} else {
+
+				warnBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabErrorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				this.tabErrorBadge.textContent = this.unreadErrors;
+				this.tabErrorBadge.style.display = '';
+
+			} else {
+
+				this.tabErrorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabWarnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				this.tabWarnBadge.textContent = this.unreadWarns;
+				this.tabWarnBadge.style.display = '';
+
+			} else {
+
+				this.tabWarnBadge.style.display = 'none';
+
+			}
+
+		}
+
+	}
+
 	addMessage( type, text ) {
 
 		const msg = document.createElement( 'div' );
@@ -231,6 +338,25 @@ class Console extends Tab {
 
 		}
 
+		// Update unread counts if the console is not active/visible
+		const isUnread = ! this.isActive;
+
+		if ( isUnread ) {
+
+			if ( type === 'error' ) {
+
+				this.unreadErrors ++;
+				this.updateBadges();
+
+			} else if ( type === 'warn' ) {
+
+				this.unreadWarns ++;
+				this.updateBadges();
+
+			}
+
+		}
+
 	}
 
 }

examples/jsm/inspector/ui/Profiler.js

@@ -250,6 +250,10 @@ export class Profiler extends EventDispatcher {
 </span>
 <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 class="console-badge-container">
+		<span class="console-badge error" style="display: none;">0</span>
+		<span class="console-badge warn" style="display: none;">0</span>
+	</span>
 </span>
 `;
 		this.toggleButton.onclick = () => this.togglePanel();
@@ -1626,6 +1630,12 @@ export class Profiler extends EventDispatcher {
 
 		const isVisible = this.panel.classList.contains( 'visible' );
 
+		if ( isVisible && this.activeTabId && this.tabs[ this.activeTabId ] ) {
+
+			this.tabs[ this.activeTabId ].setActive( true );
+
+		}
+
 		this.detachedWindows.forEach( detachedWindow => {
 
 			if ( isVisible ) {

examples/jsm/inspector/ui/Style.js

@@ -74,6 +74,7 @@ export class Style {
 	}
 
 	.toggle-icon {
+		position: relative;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -82,6 +83,52 @@ export class Style {
 		transition: background-color 0.2s;
 	}
 
+	.console-badge-container {
+		position: absolute;
+		top: 2px;
+		right: 2px;
+		display: flex;
+		gap: 2px;
+		pointer-events: none;
+	}
+
+	.console-badge,
+	.tab-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 14px;
+		height: 14px;
+		padding: 0 4px;
+		border-radius: 7px;
+		font-size: 9px;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 1;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+		border: 1px solid rgba(0, 0, 0, 0.2);
+	}
+
+	.tab-badge-container {
+		position: absolute;
+		top: 2px;
+		right: 3px;
+		display: flex;
+		gap: 2px;
+		pointer-events: none;
+	}
+
+	.console-badge.error,
+	.tab-badge.error {
+		background-color: var(--color-red);
+	}
+
+	.console-badge.warn,
+	.tab-badge.warn {
+		background-color: var(--color-yellow);
+		color: #111111;
+	}
+
 	.profiler-toggle:hover .toggle-icon {
 		background-color: rgba(255, 255, 255, 0.05);
 	}