Collapsible list

Added functionality of hiding/displaying sub-list upon click.
Added Font Awesome icons for open and closed list indicators.
Changed "information" icon (picked another Font Awesome icon).
Removed Font Awesome icons from the source tre, will download them each time.
Added plenty of comments to make code readable.

.gitignore

 build/
 node_modules/
 package-lock.json
+source/common/includes/fontawesome/*.svg

README.md

@@ -97,8 +97,10 @@ To get started, follow these steps:
 1. Download official [Node.js](https://nodejs.org/) installer and install it
 2. Clone this repo somewhere and `cd` into that folder
 3. Install all dependencies with `npm i`
-4. Build the extension with `npm run build`
-5. Make changes to files in `source/` and repeat step 4 to rebuild the extension
+4. Download [Font Awesome](https://fontawesome.com/) icons with `npm run icons`
+5. Now you can build and rebuild the extension with `npm run build`
+
+Just edit files in `source/common` and rebuild the extension (step 5) and test it.
 
 ## Dependencies
 

package.json

@@ -13,7 +13,9 @@
   },
   "scripts": {
     "test": "test",
-    "build": "webpack"
+    "build": "webpack",
+    "clean": "rm -rf build;",
+    "icons": "curl https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/question-circle-o.svg -o source/common/includes/fontawesome/question-circle-o.svg && curl https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/caret-down.svg -o source/common/includes/fontawesome/caret-down.svg && curl https://raw.githubusercontent.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/caret-right.svg -o source/common/includes/fontawesome/caret-right.svg"
   },
   "repository": {
     "type": "git",

source/common/includes/fontawesome/README.md

-The icons in this folder were provided by 
+The icons in this folder were originally developed by 
 [*Font Awesome*](https://fontawesome.com/) 
-licensed under the Creative Commons Attribution 4.0 International license.
-See details [here](https://fontawesome.com/license).
\ No newline at end of file
+and licensed under the Creative Commons Attribution 4.0 International license,
+see details [here](https://fontawesome.com/license). The actual files are 
+downloaded from [Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG).
\ No newline at end of file

source/common/includes/fontawesome/info-circle-solid.svg

-<svg aria-hidden="true" data-prefix="fas" data-icon="info-circle" class="svg-inline--fa fa-info-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>
\ No newline at end of file

source/common/pages/popup/popup.css

+/* Remove all margins to make window properly fit the contents */
 body {
 	margin: 0;
 	padding: 0;
 	font-family: sans-serif;
 }
 
+h1, h2, h3, p {
+	margin: 0;
+	padding: 5px;
+	padding-top: 10px;
+}
+
+/* Size of the window on non-restricted pages */
 #content {
 	height: 600px;
 	width: 600px;
 }
 
+/* Style of the main menu */
 #main-menu {
 	width: 50%;
 	height: 100%;
@@ -16,6 +25,7 @@ body {
 	background-color: #eeeeee;
 }
 
+/* Style of the Details section */
 #details {
 	width: 50%;
 	height: 100%;
@@ -42,6 +52,7 @@ body {
 	height: 30%;
 }
 
+/* The style modifier for selecter main menu item */
 .main-menu-item--active {
 	background-color: #ffcc66;
 	transition: background-color 0.5s;
@@ -53,17 +64,12 @@ body {
 	padding-top: 10px;
 }
 
-h1, h2, h3, p {
-	margin: 0;
-	padding: 5px;
-	padding-top: 10px;
-}
-
-
+/* Unselected details section is hidden */
 .details-item {
 	display: none;
 }
 
+/* Style of the selected details section */
 .details-item--active {
 	display: block;
 	height: 100%;
@@ -73,7 +79,52 @@ h1, h2, h3, p {
 	overflow: auto;
 }
 
+/* The "informaton" button in the main menu */
 .info{
 	width: 1em;
 	float: right;
-}
\ No newline at end of file
+}
+
+/*
+ * COLLAPSIBLE LISTS
+ */
+
+.list-collapsible {
+	list-style: none;
+	padding-inline-start: 1em;
+}
+
+.list-collapsible > li > ul{
+	display:none
+}
+
+.list-collapsible--active > ul {
+	display:block !important
+}
+
+/*
+ * The look of the drop-down indicator
+ * on the left of collapsible list item
+ * in CLOSED position
+ */
+.list-collapsible > li::before {
+	background-image: url("/includes/fontawesome/caret-right.svg");
+	background-size: 20px;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	content:"";
+}
+
+/* The look of the drop-down indicator
+ * on the left of collapsible list item
+ * in OPEN position
+ */
+.list-collapsible > li.list-collapsible--active::before {
+	background-image: url("/includes/fontawesome/caret-down.svg");
+	background-size: 20px;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	content:"";
+}

source/common/pages/popup/popup.html

@@ -15,16 +15,16 @@
     <div id="content">
       <div id="main-menu">
         <div id="main-menu-primary" class="main-menu-item main-menu-item-large">
-          <h2>Primary resources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
+          <h2>Primary resources<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
         </div>
         <div id="main-menu-thirdparty" class="main-menu-item main-menu-item-large">
-          <h2>Third-party sources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
+          <h2>Third-party sources<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
         </div>
         <div id="main-menu-security" class="main-menu-item main-menu-item-large">
-          <h2>Security<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
+          <h2>Security<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
         </div>
         <div id="main-menu-debug" class="main-menu-item main-menu-item-small">
-          <h2>Something broke?<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
+          <h2>Something broke?<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
         </div>
       </div>
       <div id="details">
@@ -62,7 +62,7 @@
             </select>
           </div>
           <p>Enabling some of these options may break the site functionality. In that case, you might have to revert back.</p>
-          <ul id="details-security-list"></ul>
+          <ul id="details-security-list" class="list-collapsible"></ul>
         </div>
         <div id="details-debug" class="details-item">
           <h2>You chose Debugging</h2>

source/common/pages/popup/popup.js

@@ -76,27 +76,43 @@ function debugMessage(message){
 	document.body.appendChild(div)
 }
 
+/*
+ * Edit label of list entry
+ */
+function editLabel(evt) {
+	var elem = evt.target
+	// Ignore clicks outside of button
+	if (elem.nodeName === "BUTTON"){
+		var editable = elem.parentNode.getElementsByTagName("A")[0]
+		editable.contentEditable="true"
+		editable.focus()
+	}
+}
+
+// Collapsible lists can be done with <details> and <summary>,
+// but browser support is limited
+function collapsibleList(evt){
+	var target = evt.target
+	// if clicked on the label A, go level up to the LI
+	if (target.nodeName === "A")
+		target = target.parentNode
+	console.log(target)
+	if (target.nodeName === "LI"){
+		console.log("Stuff")
+		target.classList.toggle("list-collapsible--active")
+	}
+}
+
+
 /*
  * Create nested list with editable labels (optional)
  */
 function nestedList(information, editable){
-	/*
-	 * Edit label of list entry
-	 */
-	function editLabel(evt) {
-		var elem = evt.target
-		// Ignore clicks outside of button
-		if (elem.nodeName === "BUTTON"){
-			var editable = elem.parentNode.getElementsByTagName("A")[0]
-			editable.contentEditable="true"
-			editable.focus()
-		}
-	}
+
 
 	// make sure object is well-formed
-	if (information === null || information === undefined) {
+	if (information === null || information === undefined)
 		return false
-	}
 
 	if (typeof information === "string" || typeof information === "number"){
 		var elem = document.createElement("LI")
@@ -108,9 +124,6 @@ function nestedList(information, editable){
 
 	// Create list
 	var list = document.createElement("UL")
-	// Add edit event handler
-	if (editable !== false)
-		list.addEventListener("click", editLabel)
 
 	// Create LI element with specified label and, optionally, edit button
 	function createElement(label_text, editable){
@@ -151,6 +164,7 @@ function nestedList(information, editable){
 document.addEventListener("DOMContentLoaded", function() {
 	function displaySectionPrimary(information) {}
 	function displaySectionThirdparty(information) {}
+	// TODO: Do not re-create the list from scratch every time
 	function displaySectionSecurity(information) {
 		console.log("Inforinformation", information)
 		const list = document.getElementById("details-" + "security" + "-list")
@@ -158,7 +172,12 @@ document.addEventListener("DOMContentLoaded", function() {
 		// TODO: avoid complete list re-creation,
 		// since it looses information about open and closed sublists
 		const listNew = nestedList(information.observations)
+		listNew.classList.add("list-collapsible")
+		listNew.addEventListener("click", editLabel)
+		listNew.addEventListener("click", collapsibleList)
+
 		list.replaceWith(listNew)
+		listNew.id = "details-" + "security" + "-list"
 		console.log("background script sent a response:", information)
 	}
 	function displaySectionDebugging(information) {}