Add tree view test

README.references.txt

@@ -11,3 +11,17 @@ https://www.w3schools.com/tags/tag_input.asp
 
 Input types
 https://www.w3schools.com/tags/att_input_type.asp
+
+
+Tree view
+https://www.w3schools.com/howto/howto_js_treeview.asp
+
+Nested table
+https://codepen.io/st-iv/pen/xxbRxEj
+
+
+
+Tree table
+https://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js
+http://maxdesign.com.au/articles/tree-table/
+

webext/css/options.css

@@ -37,6 +37,69 @@ body {font-family: Arial;}
     border-top: none;
 }
 
+
+/* check box tree view */
+.box {
+  cursor: pointer;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none;
+}
+
+.box::before {
+  content: "\2610";
+  color: grey;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.check-box::before {
+  content: "\2611"; 
+  color: dodgerblue;
+}
+
+ /* Remove default bullets */
+ul, #myUL {
+  list-style-type: none;
+}
+
+/* Remove margins and padding from the parent ul */
+#myUL {
+  margin: 0;
+  padding: 0;
+}
+
+/* Style the caret/arrow */
+.caret {
+  cursor: pointer;
+  user-select: none; /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.caret::before {
+  content: "\25B6";
+  color: black;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.caret-down::before {
+  transform: rotate(90deg);
+}
+
+/* Hide the nested list */
+.nested {
+  display: none;
+}
+
+/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
+.active {
+  display: block;
+} 
+
+
 /* Style the tree */
 ul.tree li {
     list-style-type: none;

webext/js/options_treeview.js

@@ -0,0 +1,17 @@
+var toggler = document.getElementsByClassName("caret");
+var i;
+
+for (i = 0; i < toggler.length; i++) {
+  toggler[i].addEventListener("click", function() {
+    this.parentElement.querySelector(".nested").classList.toggle("active");
+    this.classList.toggle("caret-down");
+  });
+}
+
+var togglerBox = document.getElementsByClassName("box");
+
+for (i = 0; i < toggler.length; i++) {
+  togglerBox[i].addEventListener("click", function() {
+    this.classList.toggle("check-box");
+  });
+}

webext/manifest.json

@@ -20,6 +20,7 @@
   "default_locale": "en-US",
 
   "permissions": [
+    "accountsRead",
     "storage"
   ],
   

webext/options.html

@@ -37,6 +37,34 @@
   <form>
     <h3>Icon</h3>
     <p>Icon options here.</p>
+    
+    <ul id="myUL">
+      <li><span class="caret">Beverages</span>
+        <ul class="nested">
+          <li><span class="box">Water</li>
+          <li><span class="box">Coffee</li>
+          <li><span class="caret">Tea</span>
+            <ul class="nested">
+              <li>
+                <input type="checkbox" name="blacktea" value="BlackTea">Black Tea<br>
+              </li>
+              <li>
+                <input type="checkbox" name="blacktea" value="BlackTea">White Tea<br>
+              </li>
+              <li><span class="caret">Green Tea</span>
+                <ul class="nested">
+                  <li>Sencha</li>
+                  <li>Gyokuro</li>
+                  <li>Matcha</li>
+                  <li>Pi Lo Chun</li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+
   </form>
 </div>
 
@@ -177,6 +205,7 @@
 
 <script src='js/options_tabbutton.js'></script>
 <script src='js/options_treetable.js'></script>
+<script src='js/options_treeview.js'></script>
 
 <script src="options.js"></script>