Use the io-filter-table instead of the textarea (d411b7f5) · Commits · Adblock inc / Extensions / Adblock Plus / adblockplus

css/desktop-options.scss

+48 −24

Original line number	Diff line number	Diff line
		@@ -15,9 +15,11 @@
		* along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
		*/

		@import "io-filter-table.scss";
		@import "io-list-box.scss";
		@import "io-popout.scss";
		@import "io-popout-fixes.scss";
		@import "io-list-box.scss";
		@import "io-toggle.scss";

		html
		{
		@@ -1176,12 +1178,53 @@ html[dir="rtl"] #content-whitelist form button
		Advanced tab content
		*/

		#custom-filters
		{
		margin-top: 3rem;
		}

		#custom-filters h3
		{
		font-size: 1.125rem;
		font-weight: 400;
		text-transform: uppercase;
		}

		#custom-filters .io-filter-table-title
		{
		font-weight: 600;
		}

		#custom-filters span:not(.io-filter-table-title)
		{
		margin: 0.5rem;
		}

		html:not([dir="rtl"]) #custom-filters .io-filter-table-title
		{
		margin-right: 2rem;
		}

		html[dir="rtl"] #custom-filters .io-filter-table-title
		{
		margin-left: 2rem;
		}

		/* spans after the toggle are shown/hidden accordingly to the toggle state */
		#custom-filters io-toggle.io-filter-table-state:not([checked]) + span,
		#custom-filters io-toggle.io-filter-table-state[checked] + span + span
		{
		display: none;
		}

		#custom-filters .io-filter-table-active,
		#custom-filters .io-filter-table-inactive
		{
		color: #077CA6;
		}

		#all-filter-lists-table li.show-message .last-update,
		#all-filter-lists-table li:not(.show-message) .message,
		#custom-filters:not([data-mode="empty"]) #empty-custom-filters,
		#custom-filters[data-mode="empty"] #custom-filters-raw,
		#custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
		#custom-filters:not([data-mode="read"]) #custom-filters-edit,
		.state span,
		#acceptable-ads:not(.show-dnt-notification) #dnt
		{
		@@ -1209,25 +1252,6 @@ html[dir="rtl"] #content-whitelist form button
		margin-bottom: 0.8rem;
		}

		#custom-filters-raw
		{
		width: 100%;
		height: 23.6rem;
		padding: 0.8rem;
		}

		#custom-filters-raw:focus
		{
		border: 2px solid #077CA6;
		outline: none;
		}

		#empty-custom-filters
		{
		padding: 1.5rem;
		border: 1px solid #CDCDCD;
		}

		/*
		Help tab content
		*/

css/io-filter-list.scss

+22 −0

Original line number	Diff line number	Diff line
		@@ -31,6 +31,22 @@ io-filter-list
		--io-filter-list: ready;
		width: 100%;
		padding: 0;
		/* used to bootstrap the component once it's visible */
		animation: -io-filter-list 0.001s;
		}

		/* used to bootstrap the component once it's visible */
		@keyframes -io-filter-list
		{
		from
		{
		--io-filter-list: #fff;
		}

		to
		{
		--io-filter-list: #000;
		}
		}

		io-filter-list,
		@@ -41,6 +57,12 @@ io-filter-list *::after
		box-sizing: border-box;
		}

		io-filter-list[disabled] io-checkbox,
		io-filter-list[disabled] io-toggle,
		{
		pointer-events: none;
		}

		io-filter-list table
		{
		color: #505050;

css/io-filter-table.scss

+5 −1

Original line number	Diff line number	Diff line
		@@ -22,7 +22,11 @@ io-filter-table
		{
		display: flex;
		flex-direction: column;
		min-width: 700px;
		}

		io-filter-table[disabled]
		{
		opacity: 0.6;
		}

		io-filter-table > io-filter-search

desktop-options.html

+8 −19

Original line number	Diff line number	Diff line
		@@ -293,30 +293,19 @@
		</div>
		</section>

		<section class="cols">
		<section>
		<header>
		<h2 class="i18n_options_customFilters_title"></h2>
		<p id="custom-filters-description" class="i18n_options_customFilters_description"></p>
		</header>
		<div id="custom-filters">
		<h3 class="i18n_options_customFilters_widget_title"></h3>
		<div id="empty-custom-filters">
		<p class="i18n_options_customFilters_tip"></p>
		<button class="i18n_options_customFilters_start primary" data-action="edit-custom-filters">
		</button>
		<p>
		<a class="i18n_options_customFilters_learn" id="link-filters" target="_blank"></a>
		</p>
		</div>
		<textarea id="custom-filters-raw" rows="15" spellcheck="false" autocomplete="off"></textarea>
		<div class="side-controls">
		<button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
		</button>
		<div class="side-controls" id="custom-filters-raw-controls">
		<button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
		<button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
		</div>
		</div>
		<h3>
		<span class="i18n_options_customFilters_widget_title io-filter-table-title"></span>
		<io-toggle class="io-filter-table-state" checked></io-toggle>
		<span class="i18n_options_filterList_state_active io-filter-table-active"></span>
		<span class="i18n_options_filterList_state_disabled io-filter-table-inactive"></span>
		</h3>
		<io-filter-table></io-filter-table>
		</div>
		</section>
		</div>

js/desktop-options.js

+14 −56

Original line number	Diff line number	Diff line
		@@ -20,10 +20,13 @@

		"use strict";

		require("./io-filter-table");
		require("./io-list-box");
		require("./io-popout");
		require("./io-toggle");

		const {$} = require("./dom");
		const port = browser.runtime.connect({name: "ui"});

		let subscriptionsMap = Object.create(null);
		let filtersMap = Object.create(null);
		@@ -488,8 +491,6 @@ function updateFilter(filter)
		else
		{
		customFilters.push(filter.text);
		if (isCustomFiltersLoaded)
		updateCustomFiltersUi();
		}

		filtersMap[filter.text] = filter;
		@@ -500,7 +501,17 @@ function loadCustomFilters(filters)
		for (const filter of filters)
		updateFilter(filter);

		setCustomFiltersView("read");
		const cfTable = $("#custom-filters io-filter-table");
		cfTable.filters = filters.filter(({text}) => customFilters.includes(text));
		const toggle = $("#custom-filters io-toggle.io-filter-table-state");
		cfTable.disabled = !toggle.checked;
		toggle.addEventListener("change", toggleFiltersTable);
		}

		function toggleFiltersTable(event)
		{
		const cfTable = $("#custom-filters io-filter-table");
		cfTable.disabled = !event.currentTarget.checked;
		}

		function removeCustomFilter(text)
		@@ -508,14 +519,6 @@ function removeCustomFilter(text)
		const index = customFilters.indexOf(text);
		if (index >= 0)
		customFilters.splice(index, 1);

		updateCustomFiltersUi();
		}

		function updateCustomFiltersUi()
		{
		const customFiltersListElement = $("#custom-filters-raw");
		customFiltersListElement.value = customFilters.join("\n");
		}

		function getLanguageTitle(item)
		@@ -612,18 +615,12 @@ function execAction(action, element)
		closeDialog();
		break;
		}
		case "cancel-custom-filters":
		setCustomFiltersView("read");
		break;
		case "change-language-subscription":
		changeLanguageSubscription(findParentData(element, "access", false));
		break;
		case "close-dialog":
		closeDialog();
		break;
		case "edit-custom-filters":
		setCustomFiltersView("write");
		break;
		case "hide-more-filters-section":
		$("#more-filters").setAttribute("aria-hidden", true);
		break;
		@@ -658,17 +655,6 @@ function execAction(action, element)
		url: findParentData(element, "access", false)
		});
		break;
		case "save-custom-filters":
		sendMessageHandleErrors({
		type: "filters.importRaw",
		text: $("#custom-filters-raw").value,
		removeExisting: true
		},
		() =>
		{
		setCustomFiltersView("read");
		});
		break;
		case "show-more-filters-section":
		$("#more-filters").setAttribute("aria-hidden", false);
		break;
		@@ -780,27 +766,6 @@ function changeLanguageSubscription(url)
		}
		}

		function setCustomFiltersView(mode)
		{
		const customFiltersElement = $("#custom-filters-raw");
		updateCustomFiltersUi();
		if (mode == "read")
		{
		customFiltersElement.disabled = true;
		if (!customFiltersElement.value)
		{
		setCustomFiltersView("empty");
		return;
		}
		}
		else if (mode == "write")
		{
		customFiltersElement.disabled = false;
		}

		$("#custom-filters").dataset.mode = mode;
		}

		function onClick(e)
		{
		let actions = findParentData(e.target, "action", false);
		@@ -1012,7 +977,6 @@ function onDOMLoaded()
		getDocLink("filterdoc").then(link =>
		{
		setElementLinks("custom-filters-description", link);
		$("#link-filters").setAttribute("href", link);
		});

		getDocLink("subscriptions").then(link =>
		@@ -1020,9 +984,6 @@ function onDOMLoaded()
		$("#filter-lists-learn-more").setAttribute("href", link);
		});

		$("#custom-filters-raw").setAttribute("placeholder",
		getMessage("options_customFilters_edit_placeholder", ["/ads/track/*"]));

		// Help tab
		getDocLink("adblock_plus_report_bug").then(link =>
		{
		@@ -1207,7 +1168,6 @@ function populateLists()
		for (const property in collections)
		collections[property].clearAll();

		setCustomFiltersView("empty");
		browser.runtime.sendMessage({
		type: "subscriptions.get",
		special: true
		@@ -1454,8 +1414,6 @@ function onPrefMessage(key, value, initial)
		checkbox.setAttribute("aria-checked", value);
		}

		const port = browser.runtime.connect({name: "ui"});

		port.onMessage.addListener((message) =>
		{
		switch (message.type)