Finish ImprovePerformance

embeddedXMLViewer.js

@@ -1,6 +1,7 @@
 var iibpd = {
     debug: false,
     options: {
+        discardMetadata: true,
         hide_metadata: true,
         autoOpenDepth: 1
     },
@@ -54,17 +55,18 @@ var iibpd = {
 
     loadOptions: function () {
         chrome.storage.sync.get({
+            discardMetadata: true,
             hide_metadata: true,
             autoOpenDepth: 1
         }, function (items) {
+            iibpd.options.discardMetadata = items.discardMetadata;
             iibpd.options.hide_metadata = items.hide_metadata;
             iibpd.options.autoOpenDepth = items.autoOpenDepth;
             var element, arrEl = document.getElementsByTagName('pre');
             for (var i=0; i < arrEl.length; i++) {
                 element = arrEl[i];
-                LoadXMLString(element, Encoder.htmlDecode(element.innerHTML));
+                LoadXMLString(element, element.textContent);
             }
-            //iibpd.processConfigOptions();
         });
     },
 
@@ -90,6 +92,9 @@ var iibpd = {
                 if (key === "autoOpenDepth") {
                     iibpd.options.autoOpenDepth = storageChange.newValue;
                 }
+                if (key === "discardMetadata") {
+                    iibpd.options.discardMetadata = storageChange.newValue;
+                }
             }
         });
     },

loadxml.css

@@ -1,11 +1,15 @@
 @charset "utf-8";
 /* CSS Document */
+pre {
+	/* using line-height rather than Element.padding so to ease max-height calculations*/
+	line-height: 1.5em;
+}
 .Utility {
-        color: black;
-}   
+    color: black;
+}
 .NodeName {
     font-weight:bold;
-    color: #800080; 
+    color: #800080;
 }
 .AttributeName {
     font-weight:bold;
@@ -17,14 +21,35 @@
 .NodeValue {
     color: green;
 }
+.endTag {
+   opacity: 1;
+   transition: opacity .50s ease-in-out;
+}
+.fade {
+   opacity: 0;
+   transition: opacity .25s ease-in-out;
+}
 .Element {
     border-left-color:#C2C2C2;
     border-left-width:thin;
     border-left-style:solid;
-    padding-top:0px;
-    /*margin-top:10px;*/
-    margin: 2px 0px;
+    padding: 0px 0px;
     position: relative;
+
+    /*max-height: set by javascript*/
+    overflow: hidden;
+    /*opacity: 1;*/
+    transition: max-height 0.4s ease-in-out;/*, opacity .5s ease-in;*/
+}
+.Element > .Element {
+    left:15px;
+}
+.Element_hide, .hide_metadata {
+    max-height: 0 !important;
+    /*opacity: 0;*/
+    transition: max-height 0.4s ease-in-out; /*, opacity .5s ease-out;*/
+    overflow: hidden;
+
 }
 .Clickable {    
     font-weight:900;
@@ -36,14 +61,3 @@
     vertical-align:middle;
     user-select: none;
 }
-
-.metadata { 
-    max-height: 1000px;
-    overflow: hidden;
-    transition: max-height 0.8s ease-in;
-}
-.hide_metadata {
-    max-height: 0;
-    transition: max-height 0.8s ease-out;
-    overflow: hidden;
-}