Ver código fonte

added "expand/collapse all" button

Gildas 7 anos atrás
pai
commit
4cbfdc44c9

+ 9 - 1
extension/ui/bg/options.js

@@ -89,6 +89,7 @@
 	const removeAlternativeFontsInput = document.getElementById("removeAlternativeFontsInput");
 	const removeSrcSetInput = document.getElementById("removeSrcSetInput");
 	const removeAlternativeMediasInput = document.getElementById("removeAlternativeMediasInput");
+	const expandAllButton = document.getElementById("expandAllButton");
 	let pendingSave = Promise.resolve();
 	resetButton.addEventListener("click", async () => {
 		await bgPage.singlefile.config.reset();
@@ -110,8 +111,15 @@
 		}
 		await bgPage.singlefile.ui.autosave.refresh();
 	}, false);
+	expandAllButton.addEventListener("click", () => {
+		if (expandAllButton.className) {
+			expandAllButton.className = "";
+		} else {
+			expandAllButton.className = "opened";
+		}
+		document.querySelectorAll("details").forEach(detailElement => detailElement.open = Boolean(expandAllButton.className));
+	}, false);
 	document.body.onchange = update;
-
 	removeHiddenElementsLabel.textContent = browser.i18n.getMessage("optionRemoveHiddenElements");
 	removeUnusedStylesLabel.textContent = browser.i18n.getMessage("optionRemoveUnusedStyles");
 	removeFramesLabel.textContent = browser.i18n.getMessage("optionRemoveFrames");

+ 23 - 1
extension/ui/pages/options.css

@@ -39,7 +39,7 @@ input[type="number"] {
 }
 
 h3 {
-    padding-left: 14px;
+    padding-left: 8px;
     margin-bottom: 10px;
     margin-top: 10px;
 }
@@ -94,6 +94,28 @@ a {
     padding-right: 12px;
 }
 
+#expandAllButton {
+    opacity: .3;
+    transition: opacity 250ms;
+    cursor: pointer;
+    font-size: .9em;
+    margin-right: 1px;
+}
+
+#expandAllButton::after {
+    content: '▷';    
+}
+
+#expandAllButton.opened::after {
+    content: '▽';
+    position: relative;
+    top: 1px;    
+}
+
+#expandAllButton:hover {
+    opacity: 1;
+}
+
 @media (max-width:400px) {
     body {
         font-size: 11px;

+ 1 - 1
extension/ui/pages/options.html

@@ -8,7 +8,7 @@
 </head>
 
 <body>
-	<h3 id="titleLabel"></h3>
+	<h3><span id="expandAllButton"></span> <span id="titleLabel"></span></h3>
 	<details>
 		<summary id="userInterfaceLabel"></summary>
 		<div class="option">