diff --git a/manage.html b/manage.html
index 7c8803be..d1ccede7 100644
--- a/manage.html
+++ b/manage.html
@@ -59,8 +59,10 @@
@@ -361,7 +363,7 @@
-
+
diff --git a/manage/events.js b/manage/events.js
index 0686688a..2dfcbf0b 100644
--- a/manage/events.js
+++ b/manage/events.js
@@ -77,6 +77,13 @@ const Events = {
},
expandTargets(event, entry) {
+ if (event.type === 'contextmenu') {
+ event.preventDefault();
+ const ex = '.expanded';
+ $$(`.has-more${$(ex, entry) ? ex : `:not(${ex})`} .expander`)
+ .forEach(el => el.click());
+ return;
+ }
if (!entry._allTargetsRendered) {
createTargetsElement({entry, expanded: true});
getFaviconSrc(entry);
@@ -100,10 +107,11 @@ const Events = {
entryClicked(event) {
const target = event.target;
const entry = target.closest('.entry');
- for (const selector in Events.ENTRY_ROUTES) {
+ const routes = Events['ENTRY_ROUTES' + (event.type === 'contextmenu' ? '_CTX' : '')];
+ for (const selector in routes) {
for (let el = target; el && el !== entry; el = el.parentElement) {
if (el.matches(selector)) {
- return Events.ENTRY_ROUTES[selector].call(el, event, entry);
+ return routes[selector].call(el, event, entry);
}
}
}
@@ -146,6 +154,9 @@ Events.ENTRY_ROUTES = {
'.applies-to .expander': Events.expandTargets,
'.configure-usercss': Events.config,
};
+Events.ENTRY_ROUTES_CTX = {
+ '.applies-to .expander': Events.expandTargets,
+};
/* exported handleBulkChange */
function handleBulkChange() {
diff --git a/manage/manage.css b/manage/manage.css
index eae810f5..b5ffb2e2 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -611,16 +611,13 @@ button .svg-icon,
padding-top: .25rem;
padding-bottom: .25rem;
}
-
.newUI .targets {
overflow: hidden;
max-height: calc(var(--num-targets) * 18px);
}
-
.newUI .applies-to.expanded .targets {
max-height: none;
}
-
.newUI .target {
display: block;
overflow: hidden;
@@ -631,25 +628,23 @@ button .svg-icon,
padding-right: 1rem;
line-height: 18px;
}
-
-.newUI .applies-to .expander {
- margin: 0;
+.expander {
cursor: pointer;
- font-size: 3ex;
- line-height: .5ex;
- vertical-align: super;
- letter-spacing: .1ex;
- text-decoration: none;
+ position: absolute;
+ right: 4px;
+}
+.expander svg {
+ width: 16px;
+ height: 16px;
+ fill: var(--c50);
+}
+.expanded .expander {
+ transform: rotate(180deg);
+ transform-origin: 8px 8px;
}
-
.newUI .applies-to:not(.has-more) .expander {
display: none;
}
-
-.newUI .has-favicons .applies-to .expander {
- margin-left: 20px;
-}
-
.newUI .target:hover {
background-color: inherit;
}
diff --git a/manage/manage.js b/manage/manage.js
index 84abe0b7..b2a1ba32 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -48,6 +48,7 @@ newUI.renderClass();
prefs.ready,
]);
installed.on('click', Events.entryClicked);
+ installed.on('contextmenu', Events.entryClicked);
installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true});
installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true});
$('#sync-styles').onclick =