- {_("optionsUserAgentWhitelistCategoryDescription")}
+ {_("optionsSiteWhitelistCategoryDescription")}
- {_("optionsUserAgentWhitelistContent")}
+ {_("optionsSiteWhitelistContent")}
{this.state.options?.userAgentWhitelist && (
-
)}
@@ -485,22 +448,15 @@ class OptionsApp extends Component
{
});
}
- private handleWhitelistChange(whitelist: string[]) {
+ private handleWhitelistChange(whitelist: WhitelistItemData[]) {
this.setState(currentState => {
if (currentState.options) {
- currentState.options.userAgentWhitelist = whitelist;
+ currentState.options.siteWhitelist = whitelist;
}
return currentState;
});
}
-
- private getWhitelistItemPatternError(info: string): string {
- return _("optionsUserAgentWhitelistInvalidMatchPattern", info);
- }
}
-
-ReactDOM.render(
-
- , document.querySelector("#root"));
+ReactDOM.render(, document.querySelector("#root"));
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index c5bf68f..4b5bb10 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -316,7 +316,7 @@ button.ghost:not(:hover) {
}
-.editable-list {
+.whitelist {
background-color: var(--box-background);
border: 1px solid var(--border-color);
color: var(--box-color);
@@ -324,22 +324,18 @@ button.ghost:not(:hover) {
padding: 5px;
}
-.editable-list__view-actions {
+.whitelist__view-actions {
display: flex;
justify-content: end;
}
-.editable-list__save-raw-button {
- margin-inline-end: 5px;
-}
-
-.editable-list hr {
+.whitelist hr {
border: initial;
border-top: 1px solid var(--border-color);
margin: 5px 0;
}
-.editable-list__items {
+.whitelist__items {
display: flex;
flex-direction: column;
margin: initial;
@@ -348,22 +344,22 @@ button.ghost:not(:hover) {
width: calc(100% + 10px);
}
-.editable-list__item {
+.whitelist__item {
align-items: center;
display: flex;
height: 34px;
padding: 0 5px;
}
-.editable-list__item:nth-child(odd) {
+.whitelist__item:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
-.editable-list__item--selected {
+.whitelist__item--selected {
background-color: var(--blue-50-a30) !important;
}
-.editable-list__title {
+.whitelist__title {
flex: 1;
font-family: monospace;
overflow: hidden;
@@ -372,28 +368,24 @@ button.ghost:not(:hover) {
white-space: nowrap;
}
-.editable-list__item:not(.editable-list__item--selected) > .editable-list__title {
+.whitelist__item:not(.whitelist__item--selected) > .whitelist__title {
padding: 0 8px;
}
-.editable-list__title + button {
+.whitelist__title + button {
margin-inline-end: 5px;
}
-.editable-list__edit-field {
+.whitelist__input-pattern {
font: inherit;
margin-inline-end: 1em;
width: -moz-available;
}
-.editable-list__raw-view {
- max-height: 300px;
- overflow-y: auto;
- resize: vertical;
- width: 100%;
+.whitelist__user-agent {
+ margin-inline-end: 5px;
}
-
-.editable-list__add-button {
+.whitelist__add-button {
margin-inline-end: auto;
}
@@ -410,7 +402,7 @@ button.ghost:not(:hover) {
@media (prefers-color-scheme: dark) {
- .editable-list__item:nth-child(odd) {
+ .whitelist__item:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
}
diff --git a/ext/src/ui/popup/index.tsx b/ext/src/ui/popup/index.tsx
index 1dab37d..8e03251 100755
--- a/ext/src/ui/popup/index.tsx
+++ b/ext/src/ui/popup/index.tsx
@@ -5,6 +5,8 @@ import React, { Component } from "react";
import ReactDOM from "react-dom";
import { menuIdPopupCast, menuIdPopupStop } from "../../background/menus";
+import type { ReceiverSelectorPageInfo } from "../../background/ReceiverSelector";
+import type { WhitelistItemData } from "../../background/whitelist";
import knownApps, { KnownApp } from "../../cast/knownApps";
import options from "../../lib/options";
@@ -20,7 +22,6 @@ import {
ReceiverSelectorMediaType
} from "../../types";
-import { ReceiverSelectorPageInfo } from "../../background/ReceiverSelector";
import { Capability } from "../../cast/sdk/enums";
const _ = browser.i18n.getMessage;
@@ -92,8 +93,8 @@ interface PopupAppState {
// Options
mirroringEnabled: boolean;
- userAgentWhitelistEnabled: boolean;
- userAgentWhitelist: string[];
+ siteWhitelistEnabled: boolean;
+ siteWhitelist: WhitelistItemData[];
}
class PopupApp extends Component {
@@ -114,8 +115,8 @@ class PopupApp extends Component {
isPageWhitelisted: false,
isConnecting: false,
mirroringEnabled: false,
- userAgentWhitelistEnabled: true,
- userAgentWhitelist: []
+ siteWhitelistEnabled: true,
+ siteWhitelist: []
};
// Store window ref
@@ -229,8 +230,8 @@ class PopupApp extends Component {
// Check if target page URL is whitelisted.
if (this.state.pageInfo) {
- for (const patternString of this.state.userAgentWhitelist) {
- const pattern = new RemoteMatchPattern(patternString);
+ for (const item of this.state.siteWhitelist) {
+ const pattern = new RemoteMatchPattern(item.pattern);
if (pattern.matches(this.state.pageInfo.url)) {
isPageWhitelisted = true;
break;
@@ -249,10 +250,10 @@ class PopupApp extends Component {
return;
}
- const whitelist = await options.get("userAgentWhitelist");
- if (!whitelist.includes(app.matches)) {
- whitelist.push(app.matches);
- await options.set("userAgentWhitelist", whitelist);
+ const whitelist = await options.get("siteWhitelist");
+ if (!whitelist.find(item => item.pattern === app.matches)) {
+ whitelist.push({ pattern: app.matches });
+ await options.set("siteWhitelist", whitelist);
await browser.tabs.reload(pageInfo.tabId);
window.close();
@@ -382,8 +383,8 @@ class PopupApp extends Component {
options.getAll().then(opts => {
this.setState({
mirroringEnabled: opts.mirroringEnabled,
- userAgentWhitelistEnabled: opts.userAgentWhitelistEnabled,
- userAgentWhitelist: opts.userAgentWhitelist
+ siteWhitelistEnabled: opts.siteWhitelistEnabled,
+ siteWhitelist: opts.siteWhitelist
});
});
@@ -429,9 +430,9 @@ class PopupApp extends Component {
// If we don't know the app
!this.state.knownApp ||
// If the whitelist is disabled
- !this.state.userAgentWhitelistEnabled ||
+ !this.state.siteWhitelistEnabled ||
// If the whitelist is enabled, and the page is whitelisted
- (this.state.userAgentWhitelistEnabled &&
+ (this.state.siteWhitelistEnabled &&
this.state.isPageWhitelisted) ||
// If an app is already loaded on the page
!!(