Commit 644169bf authored by Andrea Giammarchi's avatar Andrea Giammarchi

Issue 7292 - Cumulative fixes for io-table/list/search

parent 6ddc86db
......@@ -117,6 +117,7 @@ io-filter-table .footer .error
color: #db394b;
text-transform: none;
flex-grow: 1;
white-space: pre;
}
io-filter-table .footer .error:not([data-filter])
......
......@@ -477,7 +477,8 @@ class IOFilterList extends IOElement
<th data-column="rule">${{i18n: "options_filter_list_rule"}}</th>
<th data-column="warning">${
// for the header, just return always the same warning icon
warnings.get(this) || createImageFor(warnings, this)
warnings.get(this) ||
warnings.set(this, createImageForType(false)).get(this)
}</th>
</thead>
<tbody>${list.map(getRow, this)}</tbody>
......@@ -585,11 +586,10 @@ const warnings = new WeakMap();
const warningSlow = browser.i18n.getMessage("filter_slow");
// relate either issues or warnings to a filter
const createImageFor = (weakMap, filter) =>
const createImageForFilter = (weakMap, filter) =>
{
const isIssue = weakMap === issues;
const image = new Image();
image.src = `skin/icons/${isIssue ? "error" : "alert"}.svg`;
const image = createImageForType(isIssue);
if (isIssue)
image.title = filter.reason;
else
......@@ -598,6 +598,13 @@ const createImageFor = (weakMap, filter) =>
return image;
};
const createImageForType = (isIssue) =>
{
const image = new Image();
image.src = `skin/icons/${isIssue ? "error" : "alert"}.svg`;
return image;
};
function focusTheNextFilterIfAny(tr)
{
const i = this.filters.indexOf(this._filter) + 1;
......@@ -622,6 +629,12 @@ function focusTheNextFilterIfAny(tr)
}
}
function animateAndDrop(target)
{
target.addEventListener("animationend", dropSavedClass);
target.classList.add("saved");
}
function dropSavedClass(event)
{
const {currentTarget} = event;
......@@ -652,31 +665,54 @@ function getScrollTop(value, scrollHeight)
function getWarning(filter)
{
if (filter.reason)
return issues.get(filter) || createImageFor(issues, filter);
return issues.get(filter) || createImageForFilter(issues, filter);
if (filter.slow)
return warnings.get(filter) || createImageFor(warnings, filter);
return warnings.get(filter) || createImageForFilter(warnings, filter);
return "";
}
function replaceFilter(filter, currentTarget)
{
const {text} = filter;
const old = prevFilterText.get(filter);
// if same text, no need to bother the extension at all
if (old === text)
{
animateAndDrop(currentTarget);
return;
}
browser.runtime.sendMessage({
type: "filters.replace",
old: prevFilterText.get(filter),
new: text
new: text,
old
}).then(errors =>
{
if (errors.length)
{
filter.reason = errors[0];
this.render();
return;
}
prevFilterText.set(filter, text);
delete filter.reason;
currentTarget.addEventListener("animationend", dropSavedClass);
currentTarget.classList.add("saved");
else
{
// see https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/issues/338
// until that lands, we remove the filter and add it at the end
// of the table so, before rendering, drop the new filter and update
// the current known one
const {filters} = this;
let i = filters.length;
let newFilter;
while (i--)
{
newFilter = filters[i];
if (newFilter.text === text)
break;
}
filters.splice(i, 1);
delete filter.reason;
Object.assign(filter, newFilter);
prevFilterText.set(filter, text);
animateAndDrop(currentTarget);
}
this.render();
});
}
......
......@@ -241,6 +241,7 @@ function addFilter(data)
// in case of multi line don't bother the search
if (isMultiLine(value))
{
value = clearMultiLine(value);
dispatch.call(this, "filter:add", value);
}
else
......@@ -269,6 +270,14 @@ function hasValue(filter)
return filter.text == this;
}
function clearMultiLine(data)
{
return data.split(/[\r\n]/)
.map(text => text.trim())
.filter(text => text.length)
.join("\n");
}
function isMultiLine(data)
{
return /[\r\n]/.test(data.trim());
......
......@@ -116,12 +116,12 @@ class IOFilterTable extends IOElement
this.updateFooter();
this.footer.classList.add("visible");
const {filter, errors} = event.detail;
const node = this.querySelector(".footer .error");
const footerError = this.querySelector(".footer .error");
if (filter)
node.dataset.filter = filter;
footerError.dataset.filter = filter;
else
delete node.dataset.filter;
bind(node)`${
delete footerError.dataset.filter;
bind(footerError)`${
errors ?
errors.join("\n") :
{i18n: "filter_action_failed"}
......@@ -266,9 +266,9 @@ IOFilterTable.define("io-filter-table");
function cleanErrors()
{
const error = this.querySelector(".footer .error");
if (error)
error.textContent = "";
const footerError = this.querySelector(".footer .error");
if (footerError)
bind(footerError)``;
this.updateFooter();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment