Skip to content

Commit 9611584

Browse files
TrikolonTrikolon
committed
Consolidate extra filters into single field to improve readability.
1 parent a3957b1 commit 9611584

File tree

3 files changed

+68
-124
lines changed

3 files changed

+68
-124
lines changed

‎src/app.ts

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -132,61 +132,35 @@ export class App extends LitElement {
132132
133133
<h3>Baseline</h3>
134134
<exceptions-table
135+
id="global-baseline"
135136
.entries=${this.records}
136137
.filter=${(entry: ExceptionListEntry) =>
137138
!entry.topLevelUrlPattern?.length && entry.category === "baseline"}
138-
.filterFields=${[
139-
"bugIds",
140-
"urlPattern",
141-
"classifierFeatures",
142-
"isPrivateBrowsingOnly",
143-
"filterContentBlockingCategories",
144-
]}
145139
></exceptions-table>
146140
147141
<h3>Convenience</h3>
148142
<exceptions-table
143+
id="global-convenience"
149144
.entries=${this.records}
150145
.filter=${(entry: ExceptionListEntry) =>
151146
!entry.topLevelUrlPattern?.length && entry.category === "convenience"}
152-
.filterFields=${[
153-
"bugIds",
154-
"urlPattern",
155-
"classifierFeatures",
156-
"isPrivateBrowsingOnly",
157-
"filterContentBlockingCategories",
158-
]}
159147
></exceptions-table>
160148
161149
<h2>Per-Site Exceptions</h2>
162150
<h3>Baseline</h3>
163151
<exceptions-table
152+
id="per-site-baseline"
164153
.entries=${this.records}
165154
.filter=${(entry: ExceptionListEntry) =>
166155
!!entry.topLevelUrlPattern?.length && entry.category === "baseline"}
167-
.filterFields=${[
168-
"bugIds",
169-
"urlPattern",
170-
"topLevelUrlPattern",
171-
"classifierFeatures",
172-
"isPrivateBrowsingOnly",
173-
"filterContentBlockingCategories",
174-
]}
175156
></exceptions-table>
176157
177158
<h3>Convenience</h3>
178159
<exceptions-table
160+
id="per-site-convenience"
179161
.entries=${this.records}
180162
.filter=${(entry: ExceptionListEntry) =>
181163
!!entry.topLevelUrlPattern?.length && entry.category === "convenience"}
182-
.filterFields=${[
183-
"bugIds",
184-
"urlPattern",
185-
"topLevelUrlPattern",
186-
"classifierFeatures",
187-
"isPrivateBrowsingOnly",
188-
"filterContentBlockingCategories",
189-
]}
190164
></exceptions-table>
191165
`;
192166
}

‎src/badge.ts

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -45,41 +45,6 @@ export class UIBadge extends LitElement {
4545
color: #a05a00;
4646
border-color: #ffe0b3;
4747
}
48-
.badge-private {
49-
background: #e0e7ff;
50-
color: #2a3fa0;
51-
border-color: #b3c2ff;
52-
}
53-
.badge-all {
54-
background: #e7f0e0;
55-
color: #3a6e1b;
56-
border-color: #c7e6b6;
57-
}
58-
.badge-etp-standard {
59-
background: #e0f0ff;
60-
color: #005a8c;
61-
border-color: #b3d8ff;
62-
}
63-
.badge-etp-strict {
64-
background: #ffe0e0;
65-
color: #a01b1b;
66-
border-color: #ffb3b3;
67-
}
68-
.badge-etp-custom {
69-
background: #f3e0ff;
70-
color: #6e1ba0;
71-
border-color: #dab3ff;
72-
}
73-
.badge-feature {
74-
background: #f0f4fa;
75-
color: #234;
76-
border-color: #d0d8e6;
77-
}
78-
.badge-bug {
79-
background: #f5e0ff;
80-
color: #7a1ba0;
81-
border-color: #e6b3ff;
82-
}
8348
`;
8449

8550
render() {

‎src/exceptions-table.ts

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,21 @@ export class ExceptionsTable extends LitElement {
2323
@property({ attribute: false })
2424
filter: (entry: ExceptionListEntry) => boolean = () => true;
2525

26-
// An optional array of entry fields to display.
27-
@property({ type: Array })
28-
filterFields: (keyof ExceptionListEntry)[] = [
29-
"bugIds",
30-
"category",
31-
"urlPattern",
32-
"classifierFeatures",
33-
"topLevelUrlPattern",
34-
"isPrivateBrowsingOnly",
35-
"filterContentBlockingCategories",
36-
];
26+
/**
27+
* The filtered entries to display.
28+
* @returns The filtered entries.
29+
*/
30+
get filteredEntries(): ExceptionListEntry[] {
31+
return this.entries.filter(this.filter);
32+
}
33+
34+
/**
35+
* Determines if the table has global rules.
36+
* @returns True if the table has global rules, false otherwise.
37+
*/
38+
get hasGlobalRules(): boolean {
39+
return this.filteredEntries.some((entry) => entry.topLevelUrlPattern?.length);
40+
}
3741

3842
static styles = css`
3943
.table-container {
@@ -76,25 +80,13 @@ export class ExceptionsTable extends LitElement {
7680
.hidden-col {
7781
display: none;
7882
}
79-
.show-col {
80-
display: table-cell;
81-
}
8283
.badges {
8384
display: flex;
8485
flex-wrap: wrap;
8586
gap: 0.3em;
8687
}
8788
`;
8889

89-
/**
90-
* Determines if a field should be shown based on the filterFields property.
91-
* @param field The field to check.
92-
* @returns The CSS class to apply to the field.
93-
*/
94-
private getVisibilityClass(field: keyof ExceptionListEntry): string {
95-
return this.filterFields.includes(field) ? "show-col" : "hidden-col";
96-
}
97-
9890
/**
9991
* Capitalizes the first character of a string.
10092
* @param str The string to capitalize.
@@ -109,21 +101,52 @@ export class ExceptionsTable extends LitElement {
109101
* @param categories The categories to render.
110102
* @returns The rendered badges.
111103
*/
112-
private renderETPBadges(categories?: ("standard" | "strict" | "custom")[]) {
104+
private renderETPBadges(entry: ExceptionListEntry) {
105+
let categories = entry.filterContentBlockingCategories;
106+
113107
if (!Array.isArray(categories) || categories.length === 0) {
114-
return html`<ui-badge type="all">All</ui-badge>`;
108+
return html``;
115109
}
116110
return html`
117111
<span class="badges">
118112
${categories.map(
119-
(cat) => html`
120-
<ui-badge type="etp" value="${cat}">${this.capitalizeFirstChar(cat)}</ui-badge>
121-
`,
113+
(cat) => html` <ui-badge type="etp">ETP-${this.capitalizeFirstChar(cat)}</ui-badge> `,
122114
)}
123115
</span>
124116
`;
125117
}
126118

119+
/**
120+
* Renders the filters for an entry in a badge list.
121+
* @param entry The entry to render the filters for.
122+
* @returns The rendered filters.
123+
*/
124+
private renderFilters(entry: ExceptionListEntry) {
125+
const hasETPFilter =
126+
Array.isArray(entry.filterContentBlockingCategories) &&
127+
entry.filterContentBlockingCategories.length > 0;
128+
const hasFilterExpression = !!entry.filter_expression;
129+
const hasPBMFilter = entry.isPrivateBrowsingOnly != null;
130+
131+
if (!hasETPFilter && !hasFilterExpression && !hasPBMFilter) {
132+
return html`<span class="badges">-</span>`;
133+
}
134+
135+
return html`
136+
<span class="badges">
137+
${this.renderETPBadges(entry)}
138+
${entry.filter_expression
139+
? html`<ui-badge @click=${() => this.onDetailClick(entry)} type="filter"
140+
>RS Filter</ui-badge
141+
>`
142+
: ""}
143+
${entry.isPrivateBrowsingOnly != null
144+
? html`<ui-badge type="private">PBM Only</ui-badge>`
145+
: ""}
146+
</span>
147+
`;
148+
}
149+
127150
/**
128151
* Show the detail dialog for the selected entry.
129152
* @param entry The entry to show the detail for.
@@ -142,46 +165,38 @@ export class ExceptionsTable extends LitElement {
142165
<table>
143166
<thead>
144167
<tr>
145-
<th class="${this.getVisibilityClass("id")}">ID</th>
146-
<th class="${this.getVisibilityClass("bugIds")}">Bugs</th>
147-
<th class="${this.getVisibilityClass("category")}">Category</th>
148-
<th class="${this.getVisibilityClass("topLevelUrlPattern")}">Top Site</th>
149-
<th class="${this.getVisibilityClass("urlPattern")}">Tracker</th>
150-
<th class="${this.getVisibilityClass("classifierFeatures")}">Classifier Features</th>
151-
<th class="${this.getVisibilityClass("isPrivateBrowsingOnly")}">Session Type</th>
152-
<th class="${this.getVisibilityClass("filterContentBlockingCategories")}"
153-
>ETP Levels</th
154-
>
155-
<th class="${this.getVisibilityClass("filter_expression")}">Filter Expression</th>
168+
<th>Bugs</th>
169+
<th>Category</th>
170+
<th class="${this.hasGlobalRules ? "" : "hidden-col"}">Top Site</th>
171+
<th>Tracker</th>
172+
<th>Classifier Features</th>
173+
<th>Filters</th>
156174
<th>Detail</th>
157175
</tr>
158176
</thead>
159177
<tbody>
160-
${this.entries.filter(this.filter).map(
178+
${this.filteredEntries.map(
161179
(entry) => html`
162180
<tr>
163-
<td class="${this.getVisibilityClass("id")}">${entry.id ?? ""}</td>
164-
<td class="${this.getVisibilityClass("bugIds")}">
181+
<td>
165182
<span class="badges">
166183
${Array.isArray(entry.bugIds)
167184
? entry.bugIds.map((bugId) => html`<bug-label bugId=${bugId}></bug-label>`)
168185
: ""}
169186
</span>
170187
</td>
171-
<td class="${this.getVisibilityClass("category")}">
188+
<td>
172189
${entry.category
173190
? html`<ui-badge type="category" value="${entry.category}"
174191
>${this.capitalizeFirstChar(entry.category)}</ui-badge
175192
>`
176193
: ""}
177194
</td>
178-
<td class="${this.getVisibilityClass("topLevelUrlPattern")}">
195+
<td class="${this.hasGlobalRules ? "" : "hidden-col"}">
179196
${entry.topLevelUrlPattern ?? ""}
180197
</td>
181-
<td class="${this.getVisibilityClass("urlPattern")}"
182-
>${entry.urlPattern ?? ""}</td
183-
>
184-
<td class="${this.getVisibilityClass("classifierFeatures")}">
198+
<td>${entry.urlPattern ?? ""}</td>
199+
<td>
185200
<span class="badges">
186201
${Array.isArray(entry.classifierFeatures)
187202
? entry.classifierFeatures.map(
@@ -190,17 +205,7 @@ export class ExceptionsTable extends LitElement {
190205
: ""}
191206
</span>
192207
</td>
193-
<td class="${this.getVisibilityClass("isPrivateBrowsingOnly")}">
194-
${entry.isPrivateBrowsingOnly === true
195-
? html`<ui-badge type="private">Private</ui-badge>`
196-
: html`<ui-badge type="all">All Sessions</ui-badge>`}
197-
</td>
198-
<td class="${this.getVisibilityClass("filterContentBlockingCategories")}">
199-
${this.renderETPBadges(entry.filterContentBlockingCategories)}
200-
</td>
201-
<td class="${this.getVisibilityClass("filter_expression")}"
202-
>${entry.filter_expression ?? ""}</td
203-
>
208+
<td> ${this.renderFilters(entry)} </td>
204209
<td>
205210
<button @click=${() => this.onDetailClick(entry)}>{ }</button>
206211
</td>

0 commit comments

Comments
 (0)