Add warning icons for error events

All changes in this CL are scoped to the Application panel.

Bug: 471021582, 471017387
Change-Id: I98ea0c8aaff947f0cd224b0549dfb837cd10a7bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7511225
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: thefrog <thefrog@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: thefrog-gh

front_end/panels/application/DeviceBoundSessionsModel.test.ts

@@ -371,6 +371,75 @@ describeWithMockConnection('DeviceBoundSessionsModel', () => {
     assert.isFalse(session?.isSessionTerminated);
   });
 
+  it('updates hasErrors status correctly on failed events and clear events', () => {
+    const site = 'example.com';
+    const sessionId = 'session_error_test';
+
+    // New session does not have errors.
+    const createEvent: Protocol.Network.DeviceBoundSessionEventOccurredEvent = {
+      eventId: 'event1' as Protocol.Network.DeviceBoundSessionEventId,
+      site,
+      sessionId,
+      succeeded: true,
+      creationEventDetails: {
+        newSession: makeSession(site, sessionId),
+        fetchResult: Protocol.Network.DeviceBoundSessionFetchResult.Success
+      }
+    };
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.DeviceBoundSessionEventOccurred, createEvent);
+
+    assert.isFalse(model.sessionHasErrors(site, sessionId));
+    const session = model.getSession(site, sessionId);
+    assert.isFalse(session?.hasErrors);
+
+    // It has errors for a failed event.
+    const failedEvent: Protocol.Network.DeviceBoundSessionEventOccurredEvent = {
+      eventId: 'event2' as Protocol.Network.DeviceBoundSessionEventId,
+      site,
+      sessionId,
+      succeeded: false,
+      creationEventDetails: {fetchResult: Protocol.Network.DeviceBoundSessionFetchResult.InvalidConfigJson}
+    };
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.DeviceBoundSessionEventOccurred, failedEvent);
+
+    assert.isTrue(model.sessionHasErrors(site, sessionId));
+    assert.isTrue(session?.hasErrors);
+
+    // It still has errors after a subsequent successful event.
+    const successEvent: Protocol.Network.DeviceBoundSessionEventOccurredEvent = {
+      eventId: 'event3' as Protocol.Network.DeviceBoundSessionEventId,
+      site,
+      sessionId,
+      succeeded: true,
+      challengeEventDetails:
+          {challenge: 'challenge', challengeResult: Protocol.Network.ChallengeEventDetailsChallengeResult.Success}
+    };
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.DeviceBoundSessionEventOccurred, successEvent);
+
+    assert.isTrue(model.sessionHasErrors(site, sessionId));
+    assert.isTrue(session?.hasErrors);
+
+    const listener = sinon.spy();
+    model.addEventListener(Application.DeviceBoundSessionsModel.DeviceBoundSessionModelEvents.CLEAR_EVENTS, listener);
+
+    // Errors are not cleared when clearEvents is called when preserving the log.
+    Common.Settings.moduleSetting('device-bound-sessions-preserve-log').set(true);
+    model.clearEvents();
+    sinon.assert.notCalled(listener);
+    assert.isTrue(model.sessionHasErrors(site, sessionId));
+    assert.isTrue(session?.hasErrors);
+
+    // Errors are cleared when clearEvents is called when not preserving the log.
+    Common.Settings.moduleSetting('device-bound-sessions-preserve-log').set(false);
+    model.clearEvents();
+    sinon.assert.calledOnce(listener);
+    const noLongerFailedSessions = listener.firstCall.args[0].data.noLongerFailedSessions;
+    assert.strictEqual(noLongerFailedSessions.size, 1);
+    assert.deepEqual(noLongerFailedSessions.get(site), [sessionId]);
+    assert.isFalse(model.sessionHasErrors(site, sessionId));
+    assert.isFalse(session?.hasErrors);
+  });
+
   it('returns false for isSessionTerminated when session does not exist', () => {
     assert.isFalse(model.isSessionTerminated('unknown-site', 'unknown-session'));
   });

front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -13,6 +13,7 @@ interface EventWithTimestamp {
 export interface SessionAndEvents {
   session?: Protocol.Network.DeviceBoundSession;
   isSessionTerminated: boolean;
+  hasErrors: boolean;
   eventsById: Map<string, EventWithTimestamp>;
 }
 type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
@@ -61,11 +62,21 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       return;
     }
     const emptySessions = new Map<string, Array<string|undefined>>();
+    const noLongerFailedSessions = new Map<string, Array<string|undefined>>();
     const emptySites = new Set<string>();
     for (const [site, sessionIdToSessionMap] of [...this.#siteSessions]) {
       let emptySessionsSiteEntry = emptySessions.get(site);
+      let noLongerFailedSessionsSiteEntry = noLongerFailedSessions.get(site);
       for (const [sessionId, sessionAndEvents] of sessionIdToSessionMap) {
         sessionAndEvents.eventsById.clear();
+        if (sessionAndEvents.hasErrors) {
+          sessionAndEvents.hasErrors = false;
+          if (!noLongerFailedSessionsSiteEntry) {
+            noLongerFailedSessionsSiteEntry = [];
+            noLongerFailedSessions.set(site, noLongerFailedSessionsSiteEntry);
+          }
+          noLongerFailedSessionsSiteEntry.push(sessionId);
+        }
         if (sessionAndEvents.session) {
           continue;
         }
@@ -85,7 +96,8 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       }
     }
 
-    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites});
+    this.dispatchEventToListeners(
+        DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites, noLongerFailedSessions});
   }
 
   isSiteVisible(site: string): boolean {
@@ -100,6 +112,14 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
     return session.isSessionTerminated;
   }
 
+  sessionHasErrors(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.hasErrors;
+  }
+
   getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
     return this.#siteSessions.get(site)?.get(sessionId);
   }
@@ -128,6 +148,7 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent = {
         session: undefined,
         isSessionTerminated: false,
+        hasErrors: false,
         eventsById: new Map<string, EventWithTimestamp>()
       };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
@@ -167,6 +188,11 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       }
     }
 
+    // Set that the session has errors if the latest event failed.
+    if (!event.succeeded) {
+      sessionAndEvent.hasErrors = true;
+    }
+
     this.dispatchEventToListeners(
         DeviceBoundSessionModelEvents.EVENT_OCCURRED,
         {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});
@@ -186,6 +212,9 @@ export interface DeviceBoundSessionModelEventTypes {
   [DeviceBoundSessionModelEvents.ADD_VISIBLE_SITE]: {site: string};
   [DeviceBoundSessionModelEvents.CLEAR_VISIBLE_SITES]: void;
   [DeviceBoundSessionModelEvents.EVENT_OCCURRED]: {site: string, sessionId?: string};
-  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]:
-      {emptySessions: Map<string, Array<string|undefined>>, emptySites: Set<string>};
+  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]: {
+    emptySessions: Map<string, Array<string|undefined>>,
+    emptySites: Set<string>,
+    noLongerFailedSessions: Map<string, Array<string|undefined>>,
+  };
 }

front_end/panels/application/DeviceBoundSessionsTreeElement.test.ts

@@ -6,6 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import type {TreeElement} from '../../ui/legacy/Treeoutline.js';
 
 import * as Application from './application.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -135,7 +136,8 @@ describeWithMockConnection('DeviceBoundSessionsTreeElement', () => {
         ['example2.com', ['session_1']],
         ['hidden.com', ['session_1']],
       ]),
-      emptySites: new Set(['example2.com', 'hidden.com'])
+      emptySites: new Set(['example2.com', 'hidden.com']),
+      noLongerFailedSessions: new Map(),
     });
 
     model.addVisibleSite('hidden.com');
@@ -339,4 +341,51 @@ describeWithMockConnection('DeviceBoundSessionsTreeElement', () => {
     assert.isFalse(session1Node.listItemElement.classList.contains('device-bound-session-terminated'));
     assert.isFalse(session2Node.listItemElement.classList.contains('device-bound-session-terminated'));
   });
+
+  it('updates the session tree element visual state when a session has errors', () => {
+    const root = new Application.DeviceBoundSessionsTreeElement.RootTreeElement(mockPanel, model);
+    root.onbind();
+
+    const site = 'example.com';
+    const sessionId = 'session_1';
+    const sessionId2 = 'session_2';
+    model.addVisibleSite(site);
+
+    const session = makeSession(site, sessionId);
+    const session2 = makeSession(site, sessionId2);
+    model.dispatchEventToListeners(
+        Application.DeviceBoundSessionsModel.DeviceBoundSessionModelEvents.INITIALIZE_SESSIONS,
+        {sessions: [session, session2]});
+    const siteNode = root.children()[0];
+    const sessionNode = siteNode.children()[0];
+    const sessionNode2 = siteNode.children()[1];
+
+    function checkIcon(node: TreeElement, expectedIcon: string) {
+      const icon = node.listItemElement.querySelector('devtools-icon');
+      assert.exists(icon);
+      assert.strictEqual(icon.getAttribute('name'), expectedIcon);
+    }
+
+    // Initially has database icon.
+    checkIcon(sessionNode, 'database');
+    checkIcon(sessionNode2, 'database');
+
+    // A failed event should change it to a warning icon.
+    const sessionHasErrorsStub = sinon.stub(model, 'sessionHasErrors');
+    sessionHasErrorsStub.withArgs(site, sessionId).returns(true);
+    model.dispatchEventToListeners(
+        Application.DeviceBoundSessionsModel.DeviceBoundSessionModelEvents.EVENT_OCCURRED, {site, sessionId});
+    checkIcon(sessionNode, 'warning');
+    checkIcon(sessionNode2, 'database');
+
+    // Clearing events should change it back to a database icon.
+    sessionHasErrorsStub.withArgs(site, sessionId).returns(false);
+    model.dispatchEventToListeners(Application.DeviceBoundSessionsModel.DeviceBoundSessionModelEvents.CLEAR_EVENTS, {
+      emptySessions: new Map(),
+      emptySites: new Set(),
+      noLongerFailedSessions: new Map([[site, [sessionId]]]),
+    });
+    checkIcon(sessionNode, 'database');
+    checkIcon(sessionNode2, 'database');
+  });
 });

front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -120,8 +120,20 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
-  #updateTerminatedSessionDisplay(site: string, sessionId: string|undefined): void {
+  #updateElementIconAndStyling(
+      sessionElement: ApplicationPanelTreeElement, isSessionTerminated: boolean, sessionHasErrors: boolean): void {
+    if (isSessionTerminated) {
+      sessionElement.listItemElement.classList.add('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database-off')]);
+      return;
+    }
+    sessionElement.listItemElement.classList.remove('device-bound-session-terminated');
+    sessionElement.setLeadingIcons([createIcon(sessionHasErrors ? 'warning' : 'database')]);
+  }
+
+  #updateIconAndStyling(site: string, sessionId: string|undefined): void {
     const isSessionTerminated = this.#model.isSessionTerminated(site, sessionId);
+    const sessionHasErrors = this.#model.sessionHasErrors(site, sessionId);
     const siteMapEntry = this.#sites.get(site);
     if (!siteMapEntry) {
       return;
@@ -130,12 +142,21 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     if (!sessionElement) {
       return;
     }
-    if (isSessionTerminated) {
-      sessionElement.listItemElement.classList.add('device-bound-session-terminated');
-      sessionElement.setLeadingIcons([createIcon('database-off')]);
-    } else {
-      sessionElement.listItemElement.classList.remove('device-bound-session-terminated');
-      sessionElement.setLeadingIcons([createIcon('database')]);
+    this.#updateElementIconAndStyling(sessionElement, isSessionTerminated, sessionHasErrors);
+  }
+
+  #removeWarningIcons(noLongerFailedSessions: Map<string, Array<string|undefined>>): void {
+    for (const [site, noLongerFailedSessionIds] of noLongerFailedSessions) {
+      const siteData = this.#sites.get(site);
+      if (siteData) {
+        for (const noLongerFailedSessionId of noLongerFailedSessionIds) {
+          const sessionElement = siteData.sessions.get(noLongerFailedSessionId);
+          if (sessionElement) {
+            const isSessionTerminated = this.#model.isSessionTerminated(site, noLongerFailedSessionId);
+            this.#updateElementIconAndStyling(sessionElement, isSessionTerminated, /* sessionHasErrors=*/ false);
+          }
+        }
+      }
     }
   }
 
@@ -231,12 +252,13 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
       {data: {site, sessionId}}: Common.EventTarget
           .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.EVENT_OCCURRED]>): void {
     this.#addSiteSessionIfMissing(site, sessionId);
-    this.#updateTerminatedSessionDisplay(site, sessionId);
+    this.#updateIconAndStyling(site, sessionId);
   }
 
-  #onClearEvents({data: {emptySessions, emptySites}}: Common.EventTarget
+  #onClearEvents({data: {emptySessions, emptySites, noLongerFailedSessions}}: Common.EventTarget
                      .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.CLEAR_EVENTS]>):
       void {
     this.#removeEmptyElements(emptySessions, emptySites);
+    this.#removeWarningIcons(noLongerFailedSessions);
   }
 }

front_end/panels/application/DeviceBoundSessionsView.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('DeviceBoundSessionsView', () => {
     return {
       eventsById: new Map(),
       isSessionTerminated: false,
+      hasErrors: false,
       session: {
         key: {site: mockSite, id: mockSessionId},
         refreshUrl: 'https://example.com/refresh',
@@ -326,6 +327,7 @@ describeWithMockConnection('DeviceBoundSessionsView', () => {
     const sessionAndEvents: Application.DeviceBoundSessionsModel.SessionAndEvents = {
       eventsById: new Map(),
       isSessionTerminated: false,
+      hasErrors: false,
       session: undefined,
     };
     const date = new Date('2026-01-01T10:00:00.000Z');