Move AffectedCookiesView to its own .ts file
Bug: chromium:1072335
Change-Id: I5b91fb17482d513482667b5f736ddbb2baffec81
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2696657
Commit-Queue: Sigurd Schneider <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
diff --git a/front_end/component_docs/tree_outline/lazy-children.ts b/front_end/component_docs/tree_outline/lazy-children.ts
index 7685c19..42fd412 100644
--- a/front_end/component_docs/tree_outline/lazy-children.ts
+++ b/front_end/component_docs/tree_outline/lazy-children.ts
@@ -42,6 +42,8 @@
children: (): Promise<Components.TreeOutlineUtils.TreeNode[]> => Promise.resolve([
{
key: 'Europe',
+ // TODO: Remove next line once crbug.com/1177242 is solved.
+ // eslint-disable-next-line @typescript-eslint/space-before-function-paren
chldren: async(): Promise<Components.TreeOutlineUtils.TreeNode[]> => {
const children = await loadInSomeNodes();
return children;
diff --git a/front_end/elements/FlexboxEditorWidget.ts b/front_end/elements/FlexboxEditorWidget.ts
index 431ebcf..3a202fc 100644
--- a/front_end/elements/FlexboxEditorWidget.ts
+++ b/front_end/elements/FlexboxEditorWidget.ts
@@ -94,6 +94,8 @@
static createFlexboxEditorButton(pane: StylesSidebarPane, section: StylePropertiesSection): HTMLElement {
const flexboxEditorButton = createButton();
+ // TODO: Remove next line once crbug.com/1177242 is solved.
+ // eslint-disable-next-line @typescript-eslint/space-before-function-paren
flexboxEditorButton.onclick = async(event): Promise<void> => {
event.stopPropagation();
const popoverHelper = pane.swatchPopoverHelper();
diff --git a/front_end/i18n/locales/en-US.json b/front_end/i18n/locales/en-US.json
index 656d02d..0ef0aa2 100644
--- a/front_end/i18n/locales/en-US.json
+++ b/front_end/i18n/locales/en-US.json
@@ -1781,6 +1781,21 @@
"input/InputTimeline.ts | saveProfile": {
"message": "Save profile…"
},
+ "issues/AffectedCookiesView.ts | cookie": {
+ "message": "cookie"
+ },
+ "issues/AffectedCookiesView.ts | cookies": {
+ "message": "cookies"
+ },
+ "issues/AffectedCookiesView.ts | domain": {
+ "message": "Domain"
+ },
+ "issues/AffectedCookiesView.ts | name": {
+ "message": "Name"
+ },
+ "issues/AffectedCookiesView.ts | path": {
+ "message": "Path"
+ },
"issues/AffectedElementsView.ts | element": {
"message": "element"
},
@@ -1973,12 +1988,6 @@
"issues/IssueView.ts | clickToRevealTheViolatingDomNode": {
"message": "Click to reveal the violating DOM node in the Elements panel"
},
- "issues/IssueView.ts | cookie": {
- "message": "cookie"
- },
- "issues/IssueView.ts | cookies": {
- "message": "cookies"
- },
"issues/IssueView.ts | cpuPeakLimit": {
"message": "CPU peak limit"
},
@@ -1994,9 +2003,6 @@
"issues/IssueView.ts | directives": {
"message": "directives"
},
- "issues/IssueView.ts | domain": {
- "message": "Domain"
- },
"issues/IssueView.ts | element": {
"message": "Element"
},
@@ -2021,9 +2027,6 @@
"issues/IssueView.ts | parentFrame": {
"message": "Parent Frame"
},
- "issues/IssueView.ts | path": {
- "message": "Path"
- },
"issues/IssueView.ts | removed": {
"message": "Removed"
},
diff --git a/front_end/i18n/locales/en-XL.json b/front_end/i18n/locales/en-XL.json
index fa91839..5df0a2e 100644
--- a/front_end/i18n/locales/en-XL.json
+++ b/front_end/i18n/locales/en-XL.json
@@ -1781,6 +1781,21 @@
"input/InputTimeline.ts | saveProfile": {
"message": "Ŝáv̂é p̂ŕôf́îĺê…"
},
+ "issues/AffectedCookiesView.ts | cookie": {
+ "message": "ĉóôḱîé"
+ },
+ "issues/AffectedCookiesView.ts | cookies": {
+ "message": "ĉóôḱîéŝ"
+ },
+ "issues/AffectedCookiesView.ts | domain": {
+ "message": "D̂óm̂áîń"
+ },
+ "issues/AffectedCookiesView.ts | name": {
+ "message": "N̂ám̂é"
+ },
+ "issues/AffectedCookiesView.ts | path": {
+ "message": "P̂át̂h́"
+ },
"issues/AffectedElementsView.ts | element": {
"message": "êĺêḿêńt̂"
},
@@ -1973,12 +1988,6 @@
"issues/IssueView.ts | clickToRevealTheViolatingDomNode": {
"message": "Ĉĺîćk̂ t́ô ŕêv́êál̂ t́ĥé v̂íôĺât́îńĝ D́ÔḾ n̂ód̂é îń t̂h́ê Él̂ém̂én̂t́ŝ ṕâńêĺ"
},
- "issues/IssueView.ts | cookie": {
- "message": "ĉóôḱîé"
- },
- "issues/IssueView.ts | cookies": {
- "message": "ĉóôḱîéŝ"
- },
"issues/IssueView.ts | cpuPeakLimit": {
"message": "ĈṔÛ ṕêák̂ ĺîḿît́"
},
@@ -1994,9 +2003,6 @@
"issues/IssueView.ts | directives": {
"message": "d̂ír̂éĉt́îv́êś"
},
- "issues/IssueView.ts | domain": {
- "message": "D̂óm̂áîń"
- },
"issues/IssueView.ts | element": {
"message": "Êĺêḿêńt̂"
},
@@ -2021,9 +2027,6 @@
"issues/IssueView.ts | parentFrame": {
"message": "P̂ár̂én̂t́ F̂ŕâḿê"
},
- "issues/IssueView.ts | path": {
- "message": "P̂át̂h́"
- },
"issues/IssueView.ts | removed": {
"message": "R̂ém̂óv̂éd̂"
},
diff --git a/front_end/issues/AffectedCookiesView.ts b/front_end/issues/AffectedCookiesView.ts
new file mode 100644
index 0000000..948f7e5
--- /dev/null
+++ b/front_end/issues/AffectedCookiesView.ts
@@ -0,0 +1,99 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../host/host.js';
+import * as i18n from '../i18n/i18n.js';
+import * as Network from '../network/network.js';
+import * as UI from '../ui/ui.js';
+
+import {AffectedItem, AffectedResourcesView} from './AffectedResourcesView.js';
+import {AggregatedIssue} from './IssueAggregator.js'; // eslint-disable-line no-unused-vars
+import {IssueView} from './IssueView.js';
+
+export const UIStrings = {
+ /**
+ *@description Noun, singular. Label for the kind and number of affected resources associated with a DevTools issue. A cookie is a small piece of data that a server sends to the user's web browser. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies.
+ */
+ cookie: 'cookie',
+ /**
+ *@description Noun, plural. Label for the kind and number of affected resources associated with a DevTools issue. A cookie is a small piece of data that a server sends to the user's web browser. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies.
+ */
+ cookies: 'cookies',
+ /**
+ *@description Noun, singular. Label for a column in a table which lists cookies in the affected resources section of a DevTools issue. Each cookie has a name.
+ */
+ name: 'Name',
+ /**
+ *@description Noun, singular. Label for a column in a table which lists cookies in the affected resources section of a DevTools issue. Cookies may have a 'Domain' attribute: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies.#define_where_cookies_are_sent
+ */
+ domain: 'Domain',
+ /**
+ *@description Noun, singular. Label for a column in a table which lists cookies in the affected resources section of a DevTools issue. Cookies may have a 'Path' attribute: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies.#define_where_cookies_are_sent
+ */
+ path: 'Path',
+};
+const str_ = i18n.i18n.registerUIStrings('issues/AffectedCookiesView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class AffectedCookiesView extends AffectedResourcesView {
+ private issue: AggregatedIssue;
+ constructor(parent: IssueView, issue: AggregatedIssue) {
+ super(parent, {singular: i18nString(UIStrings.cookie), plural: i18nString(UIStrings.cookies)});
+ this.issue = issue;
+ }
+
+ private appendAffectedCookies(cookies: Iterable<{cookie: Protocol.Audits.AffectedCookie, hasRequest: boolean}>):
+ void {
+ const header = document.createElement('tr');
+ this.appendColumnTitle(header, i18nString(UIStrings.name));
+ this.appendColumnTitle(
+ header, i18nString(UIStrings.domain) + ' & ' + i18nString(UIStrings.path),
+ 'affected-resource-cookie-info-header');
+
+ this.affectedResources.appendChild(header);
+
+ let count = 0;
+ for (const cookie of cookies) {
+ count++;
+ this.appendAffectedCookie(cookie.cookie, cookie.hasRequest);
+ }
+ this.updateAffectedResourceCount(count);
+ }
+
+ private appendAffectedCookie(cookie: Protocol.Audits.AffectedCookie, hasAssociatedRequest: boolean): void {
+ const element = document.createElement('tr');
+ element.classList.add('affected-resource-cookie');
+ const name = document.createElement('td');
+ if (hasAssociatedRequest) {
+ name.appendChild(UI.UIUtils.createTextButton(cookie.name, () => {
+ Host.userMetrics.issuesPanelResourceOpened(this.issue.getCategory(), AffectedItem.Cookie);
+ Network.NetworkPanel.NetworkPanel.revealAndFilter([
+ {
+ filterType: 'cookie-domain',
+ filterValue: cookie.domain,
+ },
+ {
+ filterType: 'cookie-name',
+ filterValue: cookie.name,
+ },
+ {
+ filterType: 'cookie-path',
+ filterValue: cookie.path,
+ },
+ ]);
+ }, 'link-style devtools-link'));
+ } else {
+ name.textContent = cookie.name;
+ }
+ element.appendChild(name);
+ this.appendIssueDetailCell(element, `${cookie.domain}${cookie.path}`, 'affected-resource-cookie-info');
+
+ this.affectedResources.appendChild(element);
+ }
+
+ update(): void {
+ this.clear();
+ this.appendAffectedCookies(this.issue.cookiesWithRequestIndicator());
+ }
+}
diff --git a/front_end/issues/AffectedResourcesView.ts b/front_end/issues/AffectedResourcesView.ts
index c891f07..7849725 100644
--- a/front_end/issues/AffectedResourcesView.ts
+++ b/front_end/issues/AffectedResourcesView.ts
@@ -285,14 +285,18 @@
header.appendChild(info);
}
- protected createIssueDetailCell(textContent: string): HTMLTableDataCellElement {
+ protected createIssueDetailCell(textContent: string, additionalClass: string|null = null): HTMLTableDataCellElement {
const cell = document.createElement('td');
cell.textContent = textContent;
+ if (additionalClass) {
+ cell.classList.add(additionalClass);
+ }
return cell;
}
- protected appendIssueDetailCell(element: HTMLElement, textContent: string): HTMLTableDataCellElement {
- const cell = this.createIssueDetailCell(textContent);
+ protected appendIssueDetailCell(element: HTMLElement, textContent: string, additionalClass: string|null = null):
+ HTMLTableDataCellElement {
+ const cell = this.createIssueDetailCell(textContent, additionalClass);
element.appendChild(cell);
return cell;
}
diff --git a/front_end/issues/BUILD.gn b/front_end/issues/BUILD.gn
index a5be0c9..149638d 100644
--- a/front_end/issues/BUILD.gn
+++ b/front_end/issues/BUILD.gn
@@ -7,6 +7,7 @@
devtools_module("issues") {
sources = [
+ "AffectedCookiesView.ts",
"AffectedElementsView.ts",
"AffectedElementsWithLowContrastView.ts",
"AffectedResourcesView.ts",
diff --git a/front_end/issues/IssueView.ts b/front_end/issues/IssueView.ts
index 0517e7b..d9df2b1 100644
--- a/front_end/issues/IssueView.ts
+++ b/front_end/issues/IssueView.ts
@@ -15,6 +15,7 @@
import * as WebComponents from '../ui/components/components.js';
import * as UI from '../ui/ui.js';
+import {AffectedCookiesView} from './AffectedCookiesView.js';
import {AffectedElementsView} from './AffectedElementsView.js';
import {AffectedElementsWithLowContrastView} from './AffectedElementsWithLowContrastView.js';
import {AffectedItem, AffectedResourcesView, extractShortPath} from './AffectedResourcesView.js';
@@ -26,6 +27,10 @@
export const UIStrings = {
/**
+ *@description Noun, singular. Label for a column or field containing the name of an entity.
+ */
+ name: 'Name',
+ /**
*@description Singular label for number of affected directive resource indication in issue view
*/
directive: 'directive',
@@ -66,26 +71,6 @@
*/
resourceC: 'Resource',
/**
- *@description Label for number of affected resources indication in issue view
- */
- cookie: 'cookie',
- /**
- *@description Label for number of affected resources indication in issue view
- */
- cookies: 'cookies',
- /**
- *@description Text for the name of something
- */
- name: 'Name',
- /**
- *@description Text for the domain of a website
- */
- domain: 'Domain',
- /**
- *@description Text that refers to a file path
- */
- path: 'Path',
- /**
*@description A tag of Enable Local Overrides setting that can be searched in the command menu
*/
request: 'request',
@@ -327,73 +312,6 @@
}
}
-class AffectedCookiesView extends AffectedResourcesView {
- _issue: AggregatedIssue;
- constructor(parent: IssueView, issue: AggregatedIssue) {
- super(parent, {singular: i18nString(UIStrings.cookie), plural: i18nString(UIStrings.cookies)});
- this._issue = issue;
- }
-
- _appendAffectedCookies(cookies: Iterable<{
- cookie: Protocol.Audits.AffectedCookie,
- hasRequest: boolean,
- }>): void {
- const header = document.createElement('tr');
- this.appendColumnTitle(header, i18nString(UIStrings.name));
- this.appendColumnTitle(
- header, i18nString(UIStrings.domain) + ' & ' + i18nString(UIStrings.path),
- 'affected-resource-cookie-info-header');
-
- this.affectedResources.appendChild(header);
-
- let count = 0;
- for (const cookie of cookies) {
- count++;
- this.appendAffectedCookie(cookie.cookie, cookie.hasRequest);
- }
- this.updateAffectedResourceCount(count);
- }
-
- appendAffectedCookie(cookie: Protocol.Audits.AffectedCookie, hasAssociatedRequest: boolean): void {
- const element = document.createElement('tr');
- element.classList.add('affected-resource-cookie');
- const name = document.createElement('td');
- if (hasAssociatedRequest) {
- name.appendChild(UI.UIUtils.createTextButton(cookie.name, () => {
- Host.userMetrics.issuesPanelResourceOpened(this._issue.getCategory(), AffectedItem.Cookie);
- Network.NetworkPanel.NetworkPanel.revealAndFilter([
- {
- filterType: 'cookie-domain',
- filterValue: cookie.domain,
- },
- {
- filterType: 'cookie-name',
- filterValue: cookie.name,
- },
- {
- filterType: 'cookie-path',
- filterValue: cookie.path,
- },
- ]);
- }, 'link-style devtools-link'));
- } else {
- name.textContent = cookie.name;
- }
- const info = document.createElement('td');
- info.classList.add('affected-resource-cookie-info');
- info.textContent = `${cookie.domain}${cookie.path}`;
-
- element.appendChild(name);
- element.appendChild(info);
- this.affectedResources.appendChild(element);
- }
-
- update(): void {
- this.clear();
- this._appendAffectedCookies(this._issue.cookiesWithRequestIndicator());
- }
-}
-
class AffectedRequestsView extends AffectedResourcesView {
_issue: SDK.Issue.Issue;
constructor(parent: IssueView, issue: SDK.Issue.Issue) {
