redesigned options page

extension/ui/bg/options.js

@@ -45,7 +45,7 @@
 		await update();
 	}, false);
 	maxResourceSizeEnabledInput.addEventListener("click", () => maxResourceSizeInput.disabled = !maxResourceSizeEnabledInput.checked, false);
-	document.getElementById("popupContent").onchange = update;
+	document.body.onchange = update;
 	refresh();
 
 	async function refresh() {

extension/ui/pages/help.html

@@ -76,42 +76,44 @@
 					<label for="confirmFilenameInput"></label>
 
 					<li>
-						<span class="option">save lazy loaded images</span>
-						<p>Check this option to save all the lazy loaded images that are not displayed. This may help to save all the images without
-							scrolling the page. This feature is not guaranteed to work on all sites.</p>
+						<span class="option">compress HTML</span>
+						<p>Check this option to remove all HTML comments, and unneeded spaces or returns. This helps to reduce the size of the
+							file without altering the document.</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">compress HTML</span>
-						<p>Check this option to remove all HTML comments, and unneeded spaces or returns. This helps to reduce the size of the
-							file without altering the document.</p>
+						<span class="option">remove HTML import</span>
+						<p>Check this option to remove all link elements used to import HTML documents. This can reduce the size of the file without
+							altering the document most of the time.</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">compress CSS</span>
-						<p>Check this option to minify CSS stylesheets. This helps to reduce the size of the file without altering the document.</p>
+						<span class="option">remove frames</span>
+						<p>Check this option to remove all frame and iframe elements. This can considerably reduce the size of the file without
+							altering the document most of the time.</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">remove unused CSS rules</span>
-						<p>Check this option to remove all CSS rules that do not match any element. Checking this this option should not alter
-							the document and can considerably reduce the size of the file.</p>
+						<span class="option">remove hidden elements</span>
+						<p>Check this option to remove all hidden elements (
+							<code>visibility = "hidden"</code>,&nbsp;or&nbsp;
+							<code>display = "none"</code>,&nbsp;or&nbsp;
+							<code>opacity = "0"</code> CSS property values). This option may alter the document but can considerably reduce the size of the file.</p>
 						<p class="notice">It is recommended to
-							<u>check</u> this option</p>
+							<u>uncheck</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">remove HTML import</span>
-						<p>Check this option to remove all link elements used to import HTML documents. This can reduce the size of the file without
-							altering the document most of the time.</p>
+						<span class="option">save raw page</span>
+						<p>Check this option to save the page without interpreting JavaScript. Checking this option may alter the document.</p>
 						<p class="notice">It is recommended to
-							<u>check</u> this option</p>
+							<u>uncheck</u> this option</p>
 					</li>
 
 					<li>
@@ -122,28 +124,26 @@
 					</li>
 
 					<li>
-						<span class="option">remove frames</span>
-						<p>Check this option to remove all frame and iframe elements. This can considerably reduce the size of the file without
-							altering the document most of the time.</p>
+						<span class="option">compress CSS</span>
+						<p>Check this option to minify CSS stylesheets. This helps to reduce the size of the file without altering the document.</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">remove hidden elements</span>
-						<p>Check this option to remove all hidden elements (
-							<code>visibility = "hidden"</code>,&nbsp;or&nbsp;
-							<code>display = "none"</code>,&nbsp;or&nbsp;
-							<code>opacity = "0"</code> CSS property values). This option may alter the document but can considerably reduce the size of the file.</p>
+						<span class="option">remove unused CSS rules</span>
+						<p>Check this option to remove all CSS rules that do not match any element. Checking this this option should not alter
+							the document and can considerably reduce the size of the file.</p>
 						<p class="notice">It is recommended to
-							<u>uncheck</u> this option</p>
+							<u>check</u> this option</p>
 					</li>
 
 					<li>
-						<span class="option">save raw page</span>
-						<p>Check this option to save the page without interpreting JavaScript. Checking this option may alter the document.</p>
+						<span class="option">save lazy loaded images</span>
+						<p>Check this option to save all the lazy loaded images that are not displayed. This may help to save all the images without
+							scrolling the page. This feature is not guaranteed to work on all sites.</p>
 						<p class="notice">It is recommended to
-							<u>uncheck</u> this option</p>
+							<u>check</u> this option</p>
 					</li>
 
 					<li>

extension/ui/pages/options.css

@@ -1,14 +1,12 @@
 body {
     background-color: #fff;
-}
-
-body>div {
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
     font-family: sans-serif;
     text-align: justify;
     max-width: 600px;
+    height: auto;
 }
 
 button {
@@ -17,27 +15,14 @@ button {
     border-style: solid;
     height: 25px;
     border-radius: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 button:active {
     border-color: rgb(237, 237, 237);
 }
 
-#popupContent {
-    height: auto;
-    padding-right: 5px;
-}
-
-#popupContent .option {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-}
-
-#popupContent .bottom {
-    padding-top: 15px;
-}
-
 input[type="checkbox"] {
     margin-left: 30px;
     position: relative;
@@ -52,19 +37,31 @@ input[type="number"] {
     top: -2px;
 }
 
-button {
-    padding-left: 10px;
-    padding-right: 10px;
+h3 {
+    padding-left: 14px;
+    margin-bottom: 10px;
+    margin-top: 10px;
 }
 
-h2 {
-    margin-bottom: 14px;
-    margin-top: 14px;
+details {
+    padding-left: 12px;
+    padding-right: 12px;
+    border-top: gray 1px dashed;
 }
 
-h3 {
+details:last-of-type {
+    border-bottom: gray 1px dashed;
+}
+
+details>summary {
     margin-bottom: 10px;
     margin-top: 10px;
+    min-width: 350px;
+    cursor: pointer;
+}
+
+details>summary:focus {
+    outline-width: 0px;
 }
 
 a {
@@ -72,11 +69,25 @@ a {
     padding-top: 5px;
 }
 
-#reloadButton {
-    background: lightGrey;
-    margin-left: 5px;
-}
-
 .option.second-level {
     margin-left: 10px;
+}
+
+.option {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    padding-left: 12px;
+}
+
+.option:last-of-type {
+    padding-bottom: 12px;
+}
+
+.option:first-of-type {
+    padding-top: 6px;
+}
+
+.option.bottom {
+    padding-top: 24px;
 }

extension/ui/pages/options.html

@@ -8,77 +8,81 @@
 </head>
 
 <body>
-	<div>
-		<div id="popupContent">
-			<h3>Options</h3>
-			<h4>User interface</h4>
-			<div class="option">
-				<label for="contextMenuEnabledInput">add entry in the context menu</label>
-				<input type="checkbox" id="contextMenuEnabledInput">
-			</div>
-			<div class="option">
-				<label for="shadowEnabledInput">overlay a shadow on the page during processing</label>
-				<input type="checkbox" id="shadowEnabledInput">
-			</div>
-			<h4>File name</h4>
-			<div class="option">
-				<label for="appendSaveDateInput">append the save date to the file name</label>
-				<input type="checkbox" id="appendSaveDateInput">
-			</div>
-			<div class="option">
-				<label for="confirmFilenameInput">enter file name before saving the page</label>
-				<input type="checkbox" id="confirmFilenameInput">
-			</div>
-			<h4>Page content</h4>
-			<div class="option">
-				<label for="lazyLoadImagesInput">save lazy loaded images</label>
-				<input type="checkbox" id="lazyLoadImagesInput">
-			</div>
-			<div class="option">
-					<label for="compressHTMLInput">compress HTML</label>
-					<input type="checkbox" id="compressHTMLInput">
-				</div>
-				<div class="option">
-					<label for="compressCSSInput">compress CSS</label>
-					<input type="checkbox" id="compressCSSInput">
-			</div>
-			<div class="option">
-				<label for="removeUnusedCSSRulesInput">remove unused CSS rules</label>
-				<input type="checkbox" id="removeUnusedCSSRulesInput">
-			</div>
-			<div class="option">
-				<label for="removeImportsInput">remove HTML imports</label>
-				<input type="checkbox" id="removeImportsInput">
-			</div>
-			<div class="option">
-				<label for="removeScriptsInput">remove scripts</label>
-				<input type="checkbox" id="removeScriptsInput">
-			</div>
-			<div class="option">
-				<label for="removeFramesInput">remove frames</label>
-				<input type="checkbox" id="removeFramesInput">
-			</div>
-			<div class="option">
-				<label for="removeHiddenElementsInput">remove hidden elements</label>
-				<input type="checkbox" id="removeHiddenElementsInput">
-			</div>
-			<div class="option">
-				<label for="saveRawPageInput">save raw page</label>
-				<input type="checkbox" id="saveRawPageInput">
-			</div>
-			<div class="option">
-				<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>
-				<input type="checkbox" id="maxResourceSizeEnabledInput">
-			</div>
-			<div class="option second-level">
-				<label for="maxResourceSizeInput">maximum size (Mb)</label>
-				<input type="number" id="maxResourceSizeInput" min="1">
-			</div>
-			<div class="option bottom">
-				<a href="help.html" target="SingleFileHelpPage">help</a>
-				<button id="resetButton" title="Reset all the options to default values">Reset</button>
-			</div>
+	<details>
+		<summary>User interface</summary>
+		<div class="option">
+			<label for="contextMenuEnabledInput">add entry in the context menu</label>
+			<input type="checkbox" id="contextMenuEnabledInput">
 		</div>
+		<div class="option">
+			<label for="shadowEnabledInput">overlay a shadow on the page during processing</label>
+			<input type="checkbox" id="shadowEnabledInput">
+		</div>
+	</details>
+	<details>
+		<summary>File name</summary>
+		<div class="option">
+			<label for="appendSaveDateInput">append the save date to the file name</label>
+			<input type="checkbox" id="appendSaveDateInput">
+		</div>
+		<div class="option">
+			<label for="confirmFilenameInput">enter file name before saving the page</label>
+			<input type="checkbox" id="confirmFilenameInput">
+		</div>
+	</details>
+	<details>
+		<summary>Page content</summary>
+		<div class="option">
+			<label for="compressHTMLInput">compress HTML</label>
+			<input type="checkbox" id="compressHTMLInput">
+		</div>
+		<div class="option">
+			<label for="removeImportsInput">remove HTML imports</label>
+			<input type="checkbox" id="removeImportsInput">
+		</div>
+		<div class="option">
+			<label for="removeFramesInput">remove frames</label>
+			<input type="checkbox" id="removeFramesInput">
+		</div>
+		<div class="option">
+			<label for="removeHiddenElementsInput">remove hidden elements</label>
+			<input type="checkbox" id="removeHiddenElementsInput">
+		</div>
+		<div class="option">
+			<label for="saveRawPageInput">save raw page</label>
+			<input type="checkbox" id="saveRawPageInput">
+		</div>
+	</details>
+	<details>
+		<summary>Pages resources</summary>
+		<div class="option">
+			<label for="removeScriptsInput">remove scripts</label>
+			<input type="checkbox" id="removeScriptsInput">
+		</div>
+		<div class="option">
+			<label for="compressCSSInput">compress CSS</label>
+			<input type="checkbox" id="compressCSSInput">
+		</div>
+		<div class="option">
+			<label for="removeUnusedCSSRulesInput">remove unused CSS rules</label>
+			<input type="checkbox" id="removeUnusedCSSRulesInput">
+		</div>
+		<div class="option">
+			<label for="lazyLoadImagesInput">save lazy loaded images</label>
+			<input type="checkbox" id="lazyLoadImagesInput">
+		</div>
+		<div class="option">
+			<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>
+			<input type="checkbox" id="maxResourceSizeEnabledInput">
+		</div>
+		<div class="option second-level">
+			<label for="maxResourceSizeInput">maximum size (Mb)</label>
+			<input type="number" id="maxResourceSizeInput" min="1">
+		</div>
+	</details>
+	<div class="option bottom">
+		<a href="help.html" target="SingleFileHelpPage">help</a>
+		<button id="resetButton" title="Reset all the options to default values">Reset</button>
 	</div>
 	<script type="text/javascript" src="/lib/browser-polyfill/custom-browser-polyfill.js"></script>
 	<script type="text/javascript" src="../bg/options.js"></script>