[M142] Fix console sidebar filter selection
Original change's description:
> Fix console sidebar filter selection
>
> Fixed: 451490982, 451744858
> Change-Id: Ic85fa7c59b9c1448bb59e9b20cb52b84451b87f2
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7054103
> Commit-Queue: Philip Pfaffe <[email protected]>
> Reviewed-by: Danil Somsikov <[email protected]>
Bug: 453978431,451490982,451744858
Change-Id: Ic85fa7c59b9c1448bb59e9b20cb52b84451b87f2
(cherry picked from commit a95ceaf384f7917fe9e3a2aac3d10000a8f14fc6)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7068793
Commit-Queue: Rubber Stamper <[email protected]>
Bot-Commit: Rubber Stamper <[email protected]>
Auto-Submit: Chrome Cherry Picker <chrome-cherry-picker@chops-service-accounts.iam.gserviceaccount.com>
diff --git a/front_end/panels/console/ConsoleSidebar.test.ts b/front_end/panels/console/ConsoleSidebar.test.ts
index 9537b72..b31a751 100644
--- a/front_end/panels/console/ConsoleSidebar.test.ts
+++ b/front_end/panels/console/ConsoleSidebar.test.ts
@@ -7,24 +7,30 @@
import * as Protocol from '../../generated/protocol.js';
import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
import * as Logs from '../../models/logs/logs.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
import {describeWithMockConnection} from '../../testing/MockConnection.js';
import {createViewFunctionStub, type ViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
import * as Console from './console.js';
const {urlString} = Platform.DevToolsPath;
-function addMessage(
- sidebar: Console.ConsoleSidebar.ConsoleSidebar, level: Protocol.Log.LogEntryLevel, text: string,
- url: Platform.DevToolsPath.UrlString): Console.ConsoleViewMessage.ConsoleViewMessage {
+function createMessage(level: Protocol.Log.LogEntryLevel, text: string, url: Platform.DevToolsPath.UrlString):
+ Console.ConsoleViewMessage.ConsoleViewMessage {
const message = new SDK.ConsoleModel.ConsoleMessage(null, Protocol.Log.LogEntrySource.Javascript, level, text, {url});
- const consoleViewMessage = new Console.ConsoleViewMessage.ConsoleViewMessage(
+ return new Console.ConsoleViewMessage.ConsoleViewMessage(
message, sinon.createStubInstance(Components.Linkifier.Linkifier),
sinon.createStubInstance(Logs.RequestResolver.RequestResolver),
sinon.createStubInstance(IssuesManager.IssueResolver.IssueResolver), () => {});
+}
+function addMessage(
+ sidebar: Console.ConsoleSidebar.ConsoleSidebar, level: Protocol.Log.LogEntryLevel, text: string,
+ url: Platform.DevToolsPath.UrlString): Console.ConsoleViewMessage.ConsoleViewMessage {
+ const consoleViewMessage = createMessage(level, text, url);
sidebar.onMessageAdded(consoleViewMessage);
return consoleViewMessage;
}
@@ -104,6 +110,52 @@
assert.deepEqual(messages.map(message => sidebar.shouldBeVisible(message)), [false, true, true]);
});
+ it('applies filters on selection', async () => {
+ const onSelectionChanged = sinon.stub();
+ const groups = [
+ new Console.ConsoleSidebar.ConsoleFilterGroup(
+ Console.ConsoleSidebar.GroupName.ALL, [], Console.ConsoleFilter.ConsoleFilter.allLevelsFilterValue()),
+ new Console.ConsoleSidebar.ConsoleFilterGroup(
+ Console.ConsoleSidebar.GroupName.ERROR, [],
+ Console.ConsoleFilter.ConsoleFilter.singleLevelMask(Protocol.Log.LogEntryLevel.Error)),
+ ];
+
+ groups[1].onMessage(
+ createMessage(Protocol.Log.LogEntryLevel.Error, 'message 1', urlString`https://www.example.com/a.html`));
+ groups[1].onMessage(
+ createMessage(Protocol.Log.LogEntryLevel.Error, 'message 2', urlString`https://www.example.com/b.html`));
+ groups[1].onMessage(
+ createMessage(Protocol.Log.LogEntryLevel.Error, 'message 3', urlString`https://www.example.com/a.html`));
+
+ const input: Parameters<Console.ConsoleSidebar.View>[0] = {
+ groups,
+ selectedFilter: groups[0].filter,
+ onSelectionChanged,
+ };
+
+ const container = renderElementIntoDOM(document.createElement('div'));
+ Console.ConsoleSidebar.DEFAULT_VIEW(input, {}, container);
+
+ // Wait for mutation observer to fire
+ await new Promise(r => setTimeout(r));
+ onSelectionChanged.resetHistory();
+
+ const treeShadow = container.querySelector('devtools-tree')?.shadowRoot;
+ assert.exists(treeShadow);
+
+ const treeNode = treeShadow.querySelectorAll('li').values().find(e => e.innerText.includes('a.html'));
+ assert.exists(treeNode);
+
+ const treeElement = UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(treeNode);
+ assert.exists(treeElement);
+
+ treeElement.select();
+
+ const expectedFilter = groups[1].urlGroups.get('https://www.example.com/a.html')?.filter;
+ assert.exists(expectedFilter);
+ sinon.assert.calledOnceWithExactly(onSelectionChanged, expectedFilter);
+ });
+
it('allows clearing messages', async () => {
const view = createViewFunctionStub(Console.ConsoleSidebar.ConsoleSidebar);
const sidebar = new Console.ConsoleSidebar.ConsoleSidebar(undefined, view);
diff --git a/front_end/panels/console/ConsoleSidebar.ts b/front_end/panels/console/ConsoleSidebar.ts
index 3c8c551..277cd2f 100644
--- a/front_end/panels/console/ConsoleSidebar.ts
+++ b/front_end/panels/console/ConsoleSidebar.ts
@@ -52,7 +52,7 @@
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
const {render, html, nothing, Directives} = Lit;
-const enum GroupName {
+export const enum GroupName {
CONSOLE_API = 'user message',
ALL = 'message',
ERROR = 'error',
@@ -112,7 +112,7 @@
<ul role="group" hidden>
${group.urlGroups.values().map(urlGroup => html`
<li
- ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+ ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
role="treeitem"
?selected=${urlGroup.filter === input.selectedFilter}
title=${urlGroup.url ?? ''}>
@@ -126,7 +126,7 @@
target);
};
-class ConsoleFilterGroup {
+export class ConsoleFilterGroup {
readonly urlGroups = new Map<string|null, {filter: ConsoleFilter, url: string|null, count: number}>();
messageCount = 0;
readonly name: GroupName;
