From a74fb89cbe84dc755000b83a8f2e37e71e06fcc0 Mon Sep 17 00:00:00 2001 From: ictinus Date: Mon, 4 Aug 2014 00:34:24 +1000 Subject: [PATCH 01/12] Replace utility elements with before/after css content, reducing content/increasing performance. --- loadxml.css | 21 +++++++++++++++++++++ loadxml.js | 20 ++++++++++---------- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/loadxml.css b/loadxml.css index 66bc23c..1e4a587 100644 --- a/loadxml.css +++ b/loadxml.css @@ -11,10 +11,27 @@ pre { font-weight:bold; color: #800080; } +.NodeName:not(.endTag):before { + content:"<"; + color: #000; +} +.NodeName.endTag:before { + content:""; + color: #000; +} + .AttributeName { font-weight:bold; color: black; } +.AttributeName:after { + content:"="; +} + .AttributeValue { color:blue; } @@ -61,3 +78,7 @@ pre { vertical-align:middle; user-select: none; } + +#content { + margin: 5px 0px; +} diff --git a/loadxml.js b/loadxml.js index f7ef647..56f1b3f 100644 --- a/loadxml.js +++ b/loadxml.js @@ -135,13 +135,13 @@ function ShowXML(xmlHolderElement, RootNode, indent) { if (RootNode.childNodes.length === 0) { var ClickableElement = AddTextNode(TagEmptyElement, ' ', 'Clickable'); //no action on this Clickable - TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' + //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); for (var i = 0, attLen = RootNode.attributes.length; i < attLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName'); - TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' + //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); } TagEmptyElement.appendChild(endEmptyTag.cloneNode(true)); //add ' />' @@ -175,14 +175,14 @@ function ShowXML(xmlHolderElement, RootNode, indent) { ClickableElement.id = 'div_empty_' + IDCounter; } // element - TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' + //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); // element attributes for (var i = 0, attrLen = RootNode.attributes.length; i < attrLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName'); - TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' + //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); } @@ -197,12 +197,12 @@ function ShowXML(xmlHolderElement, RootNode, indent) { var endOfElement = openEndTag.cloneNode(true); endOfElement.classList.add('endTag'); if (indent < iibpd.options.autoOpenDepth) { endOfElement.classList.add('fade'); } - TagEmptyElement.appendChild(endOfElement); //add '' + //TagEmptyElement.appendChild(endOfElement); //add '>' xmlHolderElement.appendChild(TagEmptyElement); @@ -226,9 +226,9 @@ function ShowXML(xmlHolderElement, RootNode, indent) { // end the expanded xml object AddTextNode(TagElement, ' ', 'Clickable'); - TagElement.appendChild(openEndTag.cloneNode(true)); //add '' + //TagElement.appendChild(openEndTag.cloneNode(true)); //add '' xmlHolderElement.appendChild(TagElement); @@ -281,7 +281,7 @@ function clearParentMaxHeight (element) { } function setMaxHeight(element, bIncludeParents) { if (!!element && element.nodeName.toLowerCase() != 'pre') { - var LAST_TAG_LEN = 3; + var LAST_TAG_LEN = 0; arrChildren = element.children; var iChildrenHeight = 0; for (var i=0, len=arrChildren.length - LAST_TAG_LEN; i < len; i++) { From 56a3d66c2de0c4bba1aac66432a1a5fe6faa305e Mon Sep 17 00:00:00 2001 From: ictinus Date: Tue, 26 Aug 2014 00:24:35 +1000 Subject: [PATCH 02/12] Add ability to enable/disable iibpd. Add colour configuration options. --- embeddedXMLViewer.js | 51 +++++++++++++++++++++++++++++++++---------- loadxml.css | 10 ++++++--- loadxml.js | 46 +++++++++++++++++++-------------------- manifest.json | 4 ++-- options.css | 17 +++++++++++++-- options.html | 13 +++++++++-- options.js | 52 ++++++++++++++++++++++++++++++++++++++------ 7 files changed, 143 insertions(+), 50 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index d3249b0..47e8f27 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -1,11 +1,12 @@ var iibpd = { debug: false, options: { + enableIIBPD: true, discardMetadata: true, hide_metadata: true, autoOpenDepth: 1 }, - + simulateClick: function (elem) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent( @@ -27,7 +28,7 @@ var iibpd = { ); elem.dispatchEvent(evt); }, - + processKey: function (e) { //e is event object passed from function invocation var kc, btnStep, btnRun; //sk e = e || window.event || ""; @@ -52,24 +53,50 @@ var iibpd = { } } }, - + loadOptions: function () { chrome.storage.sync.get({ + enableIIBPD: true, discardMetadata: true, hide_metadata: true, - autoOpenDepth: 1 + autoOpenDepth: 1, + colourTagEnds: '#000000', + colourTagName: '#800080', + colourAttrName: '#000000', + colourAttrValue: '#0000FF', + colourData: '#008000' }, function (items) { + iibpd.options.enableIIBPD = items.enableIIBPD; 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, element.textContent); + iibpd.options.colourTagEnds = items.colourTagEnds; + iibpd.options.colourTagName = items.colourTagName; + iibpd.options.colourAttrName = items.colourAttrName; + iibpd.options.colourAttrValue = items.colourAttrValue; + iibpd.options.colourData = items.colourData; + + if (iibpd.options.enableIIBPD) { + var element, arrEl = document.getElementsByTagName('pre'); + for (var i=0; i < arrEl.length; i++) { + element = arrEl[i]; + LoadXMLString(element, element.textContent); + } } + + //load colour styles + var styleEl = document.createElement('style'), + styleSheet; + document.head.appendChild(styleEl); + styleSheet = styleEl.sheet; + styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + "}", 0); + styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + "}", 0); + styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + "}", 0); + styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + "}", 0); + styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:nth-last-child(3):after, .AttributeValue:nth-last-child(2):after, .AttributeValue:last-child:after {color:"+ iibpd.options.colourTagEnds +"}", 0); }); }, - + init: function () { iibpd.loadOptions(); @@ -98,7 +125,7 @@ var iibpd = { } }); }, - + processConfigOptions: function () { //hide/show metadata var arrMetadata = document.querySelectorAll("div.metadata"); @@ -107,8 +134,10 @@ var iibpd = { arrMetadata[i].classList.toggle("hide_metadata", iibpd.options.hide_metadata); } } + + }, - + load: function () { document.addEventListener("readystatechange", function () { if (document.readyState === "complete") { diff --git a/loadxml.css b/loadxml.css index 1e4a587..94699c0 100644 --- a/loadxml.css +++ b/loadxml.css @@ -19,7 +19,7 @@ pre { content:""; color: #000; } @@ -35,6 +35,10 @@ pre { .AttributeValue { color:blue; } +.AttributeValue:last-child:after { + content: " />"; + color: #000; +} .NodeValue { color: green; } @@ -68,10 +72,10 @@ pre { overflow: hidden; } -.Clickable { +.Clickable { font-weight:900; font-size:large; - color: #800080; + color: #800080; cursor:pointer; padding-left: 5px; padding-right:5px; diff --git a/loadxml.js b/loadxml.js index 56f1b3f..ad90e2a 100644 --- a/loadxml.js +++ b/loadxml.js @@ -9,7 +9,7 @@ */ /* Modified by Paul Blackman, July 2014, - * for use in IBM BPM Debug pages. + * for use in IBM BPM Debug pages. */ var emptyDiv = document.createElement('div'); @@ -29,7 +29,7 @@ var endEmptyTag = equalsSpan.cloneNode(false); endEmptyTag.textContent = " />"; var nodeName = emptySpan.cloneNode(false); nodeName.className = "NodeName"; - + function LoadXML(ParentElementID, URL) { var xmlHolderElement = GetParentElement(ParentElementID); if (xmlHolderElement == null) { @@ -46,7 +46,7 @@ function LoadXMLDom(ParentElementID, xmlDoc) { } xmlHolderElement.innerHTML = ''; - + ShowXML(xmlHolderElement, xmlDoc.documentElement, 0); return true; @@ -126,7 +126,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } var Result = true; var TagEmptyElement = emptyDiv.cloneNode(false); // div.Element - + if (RootNode.nodeName === "metadata") { TagEmptyElement.classList.add("metadata"); //to allow hiding of metadata elements TagEmptyElement.classList.toggle("hide_metadata", iibpd.options.hide_metadata); @@ -135,22 +135,22 @@ function ShowXML(xmlHolderElement, RootNode, indent) { if (RootNode.childNodes.length === 0) { var ClickableElement = AddTextNode(TagEmptyElement, ' ', 'Clickable'); //no action on this Clickable - //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' + //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); - + for (var i = 0, attLen = RootNode.attributes.length; i < attLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName'); //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); } - TagEmptyElement.appendChild(endEmptyTag.cloneNode(true)); //add ' />' + //TagEmptyElement.appendChild(endEmptyTag.cloneNode(true)); //add ' />' xmlHolderElement.appendChild(TagEmptyElement); - + } else { // mo child nodes // build collapsed display elements - //Look for text content and display in single line + //Look for text content and display in single line var NodeContent = null; for (var i = 0, childNodesLen=RootNode.childNodes.length; i < childNodesLen; ++i) { if (RootNode.childNodes.item(i).nodeName === '#text') { @@ -167,15 +167,15 @@ function ShowXML(xmlHolderElement, RootNode, indent) { if (indent < iibpd.options.autoOpenDepth) { ClickableElement = AddTextNode(TagEmptyElement, '-', 'Clickable'); } else { - ClickableElement = AddTextNode(TagEmptyElement, '+', 'Clickable'); + ClickableElement = AddTextNode(TagEmptyElement, '+', 'Clickable'); } ClickableElement.onclick = function(e) { ToggleElementVisibility(this, e.ctrlKey); } ClickableElement.id = 'div_empty_' + IDCounter; } - // element - //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' + // element + //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); // element attributes for (var i = 0, attrLen = RootNode.attributes.length; i < attrLen; ++i) { @@ -187,8 +187,8 @@ function ShowXML(xmlHolderElement, RootNode, indent) { AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); } - TagEmptyElement.appendChild(endTag.cloneNode(true)); //add '>' - + //TagEmptyElement.appendChild(endTag.cloneNode(true)); //add '>' + if (bSimpleContentExists) { //display inline simple content AddTextNode(TagEmptyElement, NodeContent, 'NodeValue'); } @@ -197,7 +197,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { var endOfElement = openEndTag.cloneNode(true); endOfElement.classList.add('endTag'); if (indent < iibpd.options.autoOpenDepth) { endOfElement.classList.add('fade'); } - //TagEmptyElement.appendChild(endOfElement); //add '
+

Configuration

- fastest!


Auto open depth: 0
- +

+
+ Colours + ↺
+ ↺
+ ↺
+ ↺
+ ↺ +

Action/Hotkeys

@@ -23,7 +32,7 @@

Action/Hotkeys

With thanks to:

+
diff --git a/options.js b/options.js index ad1dc72..75797b6 100644 --- a/options.js +++ b/options.js @@ -1,8 +1,12 @@ var iibpdOptions = { updateAutoOpenDepthDisplay: function () { - document.getElementById('autoOpenDepthDisplay').textContent = document.getElementById('autoOpenDepth').value; + document.getElementById('autoOpenDepthDisplay').textContent = document.getElementById('autoOpenDepth').value; }, - + + updateColours: function () { + + }, + toggleDisabled: function (element, bDisabled) { if (bDisabled) { element.setAttribute("disabled", "disabled"); @@ -11,14 +15,20 @@ var iibpdOptions = { } }, toggleHideMetadata: function () { - var bDiscardMetadata = document.getElementById("discardMetadata").checked; - iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), bDiscardMetadata); - }, + var bDiscardMetadata = document.getElementById("discardMetadata").checked; + iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), bDiscardMetadata); + }, saveOptions: function () { chrome.storage.sync.set({ + 'enableIIBPD': !!document.getElementById('enableIIBPD').checked, 'discardMetadata': !!document.getElementById('discardMetadata').checked, 'hide_metadata': !!document.getElementById('hide_metadata').checked, - 'autoOpenDepth': document.getElementById("autoOpenDepth").valueAsNumber + 'autoOpenDepth': document.getElementById("autoOpenDepth").valueAsNumber, + 'colourTagEnds': document.getElementById("colourTagEnds").value, + 'colourTagName': document.getElementById("colourTagName").value, + 'colourAttrName': document.getElementById("colourAttrName").value, + 'colourAttrValue': document.getElementById("colourAttrValue").value, + 'colourData': document.getElementById("colourData").value }, function() { // Update status to let user know options were saved. var status = document.getElementById('status'); @@ -33,14 +43,26 @@ var iibpdOptions = { loadOptions: function () { chrome.storage.sync.get({ + 'enableIIBPD': true, 'discardMetadata': true, 'hide_metadata': true, - 'autoOpenDepth': 1 + 'autoOpenDepth': 1, + 'colourTagEnds': '#000000', + 'colourTagName': '#800080', + 'colourAttrName': '#000000', + 'colourAttrValue': '#0000FF', + 'colourData': '#008000' }, function(items) { + document.getElementById('enableIIBPD').checked = (items.enableIIBPD)? 'checked': ''; document.getElementById('discardMetadata').checked = (items.discardMetadata)? 'checked': ''; document.getElementById('hide_metadata').checked = (items.hide_metadata)? 'checked': ''; document.getElementById('autoOpenDepth').value = items.autoOpenDepth; document.getElementById('autoOpenDepthDisplay').textContent = items.autoOpenDepth; + document.getElementById("colourTagEnds").value = items.colourTagEnds; + document.getElementById("colourTagName").value = items.colourTagName; + document.getElementById("colourAttrName").value = items.colourAttrName; + document.getElementById("colourAttrValue").value = items.colourAttrValue; + document.getElementById("colourData").value = items.colourData; iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), items.discardMetadata); }); } @@ -54,3 +76,19 @@ document.addEventListener("readystatechange", function () { document.getElementById("discardMetadata").addEventListener('click', iibpdOptions.toggleHideMetadata); } }, true); + +document.getElementById("resetColourTagEnds").addEventListener("click", function () { + document.getElementById("colourTagEnds").value = '#000000'; +}, true); +document.getElementById("resetColourTagName").addEventListener("click", function () { + document.getElementById("colourTagName").value = '#800080'; +}, true); +document.getElementById("resetColourAttrName").addEventListener("click", function () { + document.getElementById("colourAttrName").value = '#000000'; +}, true); +document.getElementById("resetColourAttrValue").addEventListener("click", function () { + document.getElementById("colourAttrValue").value = '#0000FF'; +}, true); +document.getElementById("resetColourData").addEventListener("click", function () { + document.getElementById("colourData").value = '#008000'; +}, true); From 2f2679cc72a33c641289b2d7747cf386eae38b98 Mon Sep 17 00:00:00 2001 From: ictinus Date: Wed, 27 Aug 2014 00:47:00 +1000 Subject: [PATCH 03/12] Added foreground and background colour options for tables Change layout of the options dialog --- embeddedXMLViewer.js | 31 ++++++++++++++++++------------- options.css | 17 ++++++++++++++++- options.html | 27 ++++++++++++++++++--------- options.js | 16 ++++++++++++++-- 4 files changed, 66 insertions(+), 25 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index 47e8f27..6e002d8 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -64,7 +64,9 @@ var iibpd = { colourTagName: '#800080', colourAttrName: '#000000', colourAttrValue: '#0000FF', - colourData: '#008000' + colourData: '#008000', + colourBackground: '#dae3ec', + colourForeground: '#000000' }, function (items) { iibpd.options.enableIIBPD = items.enableIIBPD; iibpd.options.discardMetadata = items.discardMetadata; @@ -75,25 +77,28 @@ var iibpd = { iibpd.options.colourAttrName = items.colourAttrName; iibpd.options.colourAttrValue = items.colourAttrValue; iibpd.options.colourData = items.colourData; - + iibpd.options.colourBackground = items.colourBackground; + iibpd.options.colourForeground = items.colourForeground; if (iibpd.options.enableIIBPD) { var element, arrEl = document.getElementsByTagName('pre'); for (var i=0; i < arrEl.length; i++) { element = arrEl[i]; LoadXMLString(element, element.textContent); } - } - //load colour styles - var styleEl = document.createElement('style'), - styleSheet; - document.head.appendChild(styleEl); - styleSheet = styleEl.sheet; - styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + "}", 0); - styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + "}", 0); - styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + "}", 0); - styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + "}", 0); - styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:nth-last-child(3):after, .AttributeValue:nth-last-child(2):after, .AttributeValue:last-child:after {color:"+ iibpd.options.colourTagEnds +"}", 0); + //load colour styles + var styleEl = document.createElement('style'), + styleSheet; + document.head.appendChild(styleEl); + styleSheet = styleEl.sheet; + styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + "; transition: background-color 1s ease;}", 0); + styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + "; transition: background-color 1s ease;", 0); + styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + "; transition: background-color 1s ease;}", 0); + styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + "; transition: background-color 1s ease;}", 0); + styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:nth-last-child(3):after, .AttributeValue:nth-last-child(2):after, .AttributeValue:last-child:after {color:"+ iibpd.options.colourTagEnds +"; transition: background-color 1s ease;}", 0); + styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + "; transition: background-color 1s ease;}", 0); + styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + "; transition: color 1s ease;}", 0); + } }); }, diff --git a/options.css b/options.css index 7865504..1712db1 100644 --- a/options.css +++ b/options.css @@ -1,5 +1,5 @@ body { - width: 300px; + width: 400px; } h4 { @@ -39,12 +39,27 @@ ul { input[type='color'] { margin-top: 4px; } + +input[type='range'] { + margin-left: 0.8em; + width: 90%; +} + fieldset { border-color: #CEE3F8; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + margin: 4px 0px; } +fieldset div { + -webkit-column-count: 2; +} +.colourPicker { display: inline-block; } + span.reset { cursor: pointer; user-select: none; } +span#autoOpenDepthDisplay { + font-size: 2em; +} diff --git a/options.html b/options.html index 6885ecc..c7fcf0d 100644 --- a/options.html +++ b/options.html @@ -9,17 +9,26 @@

Configuration

- - fastest!
-

-Auto open depth: 0
-

+
+ Metadata + - fastest!
+ +
+
+ Auto Open Depth + 0 +
Colours - ↺
- ↺
- ↺
- ↺
- ↺ +
+ ↺ + ↺ + ↺ + ↺ + ↺ + ↺ + ↺ +
diff --git a/options.js b/options.js index 75797b6..c3b2b05 100644 --- a/options.js +++ b/options.js @@ -28,7 +28,9 @@ var iibpdOptions = { 'colourTagName': document.getElementById("colourTagName").value, 'colourAttrName': document.getElementById("colourAttrName").value, 'colourAttrValue': document.getElementById("colourAttrValue").value, - 'colourData': document.getElementById("colourData").value + 'colourData': document.getElementById("colourData").value, + 'colourBackground': document.getElementById("colourBackground").value, + 'colourForeground': document.getElementById("colourForeground").value }, function() { // Update status to let user know options were saved. var status = document.getElementById('status'); @@ -51,7 +53,9 @@ var iibpdOptions = { 'colourTagName': '#800080', 'colourAttrName': '#000000', 'colourAttrValue': '#0000FF', - 'colourData': '#008000' + 'colourData': '#008000', + 'colourBackground': '#dae3ec', + 'colourForeground': '#000000', }, function(items) { document.getElementById('enableIIBPD').checked = (items.enableIIBPD)? 'checked': ''; document.getElementById('discardMetadata').checked = (items.discardMetadata)? 'checked': ''; @@ -63,6 +67,8 @@ var iibpdOptions = { document.getElementById("colourAttrName").value = items.colourAttrName; document.getElementById("colourAttrValue").value = items.colourAttrValue; document.getElementById("colourData").value = items.colourData; + document.getElementById("colourBackground").value = items.colourBackground; + document.getElementById("colourForeground").value = items.colourForeground; iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), items.discardMetadata); }); } @@ -92,3 +98,9 @@ document.getElementById("resetColourAttrValue").addEventListener("click", functi document.getElementById("resetColourData").addEventListener("click", function () { document.getElementById("colourData").value = '#008000'; }, true); +document.getElementById("resetColourBackground").addEventListener("click", function () { + document.getElementById("colourBackground").value = '#dae3ec'; +}, true); +document.getElementById("resetColourForeground").addEventListener("click", function () { + document.getElementById("colourForeground").value = '#dae3ec'; +}, true); From 1cf7f29f1b1925b0c93641b136ce44711a90743b Mon Sep 17 00:00:00 2001 From: ictinus Date: Sun, 31 Aug 2014 00:03:30 +1000 Subject: [PATCH 04/12] Changed metadata config ui to radio buttons Added attribute width config to improve readability of data --- embeddedXMLViewer.js | 34 +++++++++++++++++++++++++--------- loadxml.css | 15 ++++++++++++--- loadxml.js | 43 ++++++++++++++++++++----------------------- options.css | 15 ++++++++++++--- options.html | 19 +++++++++++++------ options.js | 19 +++++++++++++------ 6 files changed, 95 insertions(+), 50 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index 6e002d8..cdb2103 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -60,6 +60,7 @@ var iibpd = { discardMetadata: true, hide_metadata: true, autoOpenDepth: 1, + attrWidth: 7, colourTagEnds: '#000000', colourTagName: '#800080', colourAttrName: '#000000', @@ -72,6 +73,7 @@ var iibpd = { iibpd.options.discardMetadata = items.discardMetadata; iibpd.options.hide_metadata = items.hide_metadata; iibpd.options.autoOpenDepth = items.autoOpenDepth; + iibpd.options.attrWidth = items.attrWidth; iibpd.options.colourTagEnds = items.colourTagEnds; iibpd.options.colourTagName = items.colourTagName; iibpd.options.colourAttrName = items.colourAttrName; @@ -85,7 +87,6 @@ var iibpd = { element = arrEl[i]; LoadXMLString(element, element.textContent); } - //load colour styles var styleEl = document.createElement('style'), styleSheet; @@ -98,6 +99,7 @@ var iibpd = { styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:nth-last-child(3):after, .AttributeValue:nth-last-child(2):after, .AttributeValue:last-child:after {color:"+ iibpd.options.colourTagEnds +"; transition: background-color 1s ease;}", 0); styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + "; transition: background-color 1s ease;}", 0); styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + "; transition: color 1s ease;}", 0); + styleSheet.insertRule(".AttributeValue:not(.last-of-class) {min-width: " + iibpd.options.attrWidth + "em;}", 0); } }); }, @@ -107,6 +109,7 @@ var iibpd = { document.addEventListener("keydown", iibpd.processKey, true); chrome.storage.onChanged.addListener(function (changes, namespace) { + var options = {}; for (key in changes) { var storageChange = changes[key]; if (iibpd.debug) { @@ -119,7 +122,7 @@ var iibpd = { } if (key === "hide_metadata") { iibpd.options.hide_metadata = storageChange.newValue; - iibpd.processConfigOptions(); + options.metaData = true; } if (key === "autoOpenDepth") { iibpd.options.autoOpenDepth = storageChange.newValue; @@ -127,20 +130,33 @@ var iibpd = { if (key === "discardMetadata") { iibpd.options.discardMetadata = storageChange.newValue; } + if (key === "attrWidth") { + iibpd.options.attrWidth = storageChange.newValue; + options.attrWidth = true; + } } + iibpd.processConfigOptions(options); }); }, - processConfigOptions: function () { - //hide/show metadata - var arrMetadata = document.querySelectorAll("div.metadata"); - for (var i=0; i < arrMetadata.length; i++) { - if (!!arrMetadata[i]) { - arrMetadata[i].classList.toggle("hide_metadata", iibpd.options.hide_metadata); + processConfigOptions: function (options) { + if (!!options.metaData) { + //hide/show metadata + var arrMetadata = document.querySelectorAll("div.metadata"); + for (var i=0; i < arrMetadata.length; i++) { + if (!!arrMetadata[i]) { + arrMetadata[i].classList.toggle("hide_metadata", iibpd.options.hide_metadata); + } } } - + if (!!options.attrWidth) { + var styleEl = document.createElement('style'), + styleSheet; + document.head.appendChild(styleEl); + styleSheet = styleEl.sheet; + styleSheet.insertRule(".AttributeValue:not(.last-of-class) {min-width: " + iibpd.options.attrWidth + "em;}", 0); + } }, load: function () { diff --git a/loadxml.css b/loadxml.css index 94699c0..0a55318 100644 --- a/loadxml.css +++ b/loadxml.css @@ -19,7 +19,7 @@ pre { content:""; color: #000; } @@ -59,12 +59,17 @@ pre { /*max-height: set by javascript*/ overflow: hidden; - /*opacity: 1;*/ - transition: max-height 0.4s ease-in-out;/*, opacity .5s ease-in;*/ + transition: max-height 0.4s ease-in-out; } .Element > .Element { left:15px; } + +.AttributeValue:not(.last-of-class) { + display: inline-block; + min-width: 7em; +} + .Element_hide, .hide_metadata { max-height: 0 !important; /*opacity: 0;*/ @@ -86,3 +91,7 @@ pre { #content { margin: 5px 0px; } + +td { + padding: 3px; +} diff --git a/loadxml.js b/loadxml.js index ad90e2a..b403ac2 100644 --- a/loadxml.js +++ b/loadxml.js @@ -133,16 +133,17 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } if (RootNode.childNodes.length === 0) { - var ClickableElement = AddTextNode(TagEmptyElement, ' ', 'Clickable'); //no action on this Clickable + var ClickableElement = AddTextNode(TagEmptyElement, ' ', ['Clickable']); //no action on this Clickable //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); + //TagEmptyElement.classList.add('noChildren'); for (var i = 0, attLen = RootNode.attributes.length; i < attLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); - AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName'); + AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, ['AttributeName']); //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' - AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); + AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', ['AttributeValue']); } //TagEmptyElement.appendChild(endEmptyTag.cloneNode(true)); //add ' />' xmlHolderElement.appendChild(TagEmptyElement); @@ -161,13 +162,13 @@ function ShowXML(xmlHolderElement, RootNode, indent) { var ClickableElement; if (bSimpleContentExists) { // no expand button - ClickableElement = AddTextNode(TagEmptyElement, ' ', 'Clickable'); //no action on this Clickable + ClickableElement = AddTextNode(TagEmptyElement, ' ', ['Clickable']); //no action on this Clickable } else { // expand button if (indent < iibpd.options.autoOpenDepth) { - ClickableElement = AddTextNode(TagEmptyElement, '-', 'Clickable'); + ClickableElement = AddTextNode(TagEmptyElement, '-', ['Clickable']); } else { - ClickableElement = AddTextNode(TagEmptyElement, '+', 'Clickable'); + ClickableElement = AddTextNode(TagEmptyElement, '+', ['Clickable']); } ClickableElement.onclick = function(e) { ToggleElementVisibility(this, e.ctrlKey); @@ -180,29 +181,25 @@ function ShowXML(xmlHolderElement, RootNode, indent) { // element attributes for (var i = 0, attrLen = RootNode.attributes.length; i < attrLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); - AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName'); + AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, ['AttributeName']); //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' - AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', 'AttributeValue'); + if (i === attrLen-1) { + AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', ['AttributeValue', 'last-of-class']); + } else { + AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', ['AttributeValue']); + } } //TagEmptyElement.appendChild(endTag.cloneNode(true)); //add '>' if (bSimpleContentExists) { //display inline simple content - AddTextNode(TagEmptyElement, NodeContent, 'NodeValue'); + AddTextNode(TagEmptyElement, NodeContent, ['NodeValue']); } //endTag - var endOfElement = openEndTag.cloneNode(true); - endOfElement.classList.add('endTag'); - if (indent < iibpd.options.autoOpenDepth) { endOfElement.classList.add('fade'); } - //TagEmptyElement.appendChild(endOfElement); //add '' + AddNodeName(TagEmptyElement, RootNode.nodeName, true, false); // true = mark as endTag, true=fade xmlHolderElement.appendChild(TagEmptyElement); @@ -224,7 +221,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } // end the expanded xml object - AddTextNode(TagElement, ' ', 'Clickable'); + AddTextNode(TagElement, ' ', ['Clickable']); //TagElement.appendChild(openEndTag.cloneNode(true)); //add 'Configuration
Metadata - - fastest!
- -
-
- Auto Open Depth - 0 + + +
+
+
+ Auto Open Depth + 0 +
+
+ Attribute Width + 0 +
+
Colours
diff --git a/options.js b/options.js index c3b2b05..343ad97 100644 --- a/options.js +++ b/options.js @@ -1,6 +1,7 @@ var iibpdOptions = { - updateAutoOpenDepthDisplay: function () { + updateRangeDisplays: function () { document.getElementById('autoOpenDepthDisplay').textContent = document.getElementById('autoOpenDepth').value; + document.getElementById('attrWidthDisplay').textContent = document.getElementById('attrWidth').value; }, updateColours: function () { @@ -22,8 +23,9 @@ var iibpdOptions = { chrome.storage.sync.set({ 'enableIIBPD': !!document.getElementById('enableIIBPD').checked, 'discardMetadata': !!document.getElementById('discardMetadata').checked, - 'hide_metadata': !!document.getElementById('hide_metadata').checked, + 'hide_metadata': !!document.getElementById('hide_metadata').checked || !!document.getElementById('discardMetadata').checked, 'autoOpenDepth': document.getElementById("autoOpenDepth").valueAsNumber, + 'attrWidth': document.getElementById("attrWidth").valueAsNumber, 'colourTagEnds': document.getElementById("colourTagEnds").value, 'colourTagName': document.getElementById("colourTagName").value, 'colourAttrName': document.getElementById("colourAttrName").value, @@ -49,6 +51,7 @@ var iibpdOptions = { 'discardMetadata': true, 'hide_metadata': true, 'autoOpenDepth': 1, + 'attrWidth': 7, 'colourTagEnds': '#000000', 'colourTagName': '#800080', 'colourAttrName': '#000000', @@ -59,9 +62,12 @@ var iibpdOptions = { }, function(items) { document.getElementById('enableIIBPD').checked = (items.enableIIBPD)? 'checked': ''; document.getElementById('discardMetadata').checked = (items.discardMetadata)? 'checked': ''; - document.getElementById('hide_metadata').checked = (items.hide_metadata)? 'checked': ''; + document.getElementById('hide_metadata').checked = (!items.discardMetadata && items.hide_metadata)? 'checked': ''; + document.getElementById('show_metadata').checked = (!items.discardMetadata && !items.hide_metadata)? 'checked': ''; document.getElementById('autoOpenDepth').value = items.autoOpenDepth; document.getElementById('autoOpenDepthDisplay').textContent = items.autoOpenDepth; + document.getElementById('attrWidth').value = items.attrWidth; + document.getElementById('attrWidthDisplay').textContent = items.attrWidth; document.getElementById("colourTagEnds").value = items.colourTagEnds; document.getElementById("colourTagName").value = items.colourTagName; document.getElementById("colourAttrName").value = items.colourAttrName; @@ -69,7 +75,7 @@ var iibpdOptions = { document.getElementById("colourData").value = items.colourData; document.getElementById("colourBackground").value = items.colourBackground; document.getElementById("colourForeground").value = items.colourForeground; - iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), items.discardMetadata); +// iibpdOptions.toggleDisabled(document.getElementById("hide_metadata"), items.discardMetadata); }); } }; @@ -78,8 +84,9 @@ document.addEventListener("readystatechange", function () { if (document.readyState == "complete") { iibpdOptions.loadOptions(); document.getElementById("save").addEventListener('click', iibpdOptions.saveOptions); - document.getElementById("autoOpenDepth").addEventListener('input', iibpdOptions.updateAutoOpenDepthDisplay); - document.getElementById("discardMetadata").addEventListener('click', iibpdOptions.toggleHideMetadata); + document.getElementById("autoOpenDepth").addEventListener('input', iibpdOptions.updateRangeDisplays); +// document.getElementById("discardMetadata").addEventListener('click', iibpdOptions.toggleHideMetadata); + document.getElementById("attrWidth").addEventListener('input', iibpdOptions.updateRangeDisplays); } }, true); From 2de6b0f69b1463bff8697603556c551d57f762d8 Mon Sep 17 00:00:00 2001 From: ictinus Date: Tue, 9 Sep 2014 22:31:26 +1000 Subject: [PATCH 05/12] Remove credit link from config page. --- options.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/options.html b/options.html index a339d4b..f61c2fc 100644 --- a/options.html +++ b/options.html @@ -44,12 +44,6 @@

Action/Hotkeys

Step Over: SHIFT-S
Run: R
-
-

With thanks to:

- -
From a62ed9fafb3b45f270b1c1a5b409f65be1ef7b6b Mon Sep 17 00:00:00 2001 From: ictinus Date: Wed, 17 Sep 2014 22:31:13 +1000 Subject: [PATCH 06/12] Improvements to colour transitions and element display. --- embeddedXMLViewer.js | 79 ++++++++++++++++++++++++++++++++++++-------- loadxml.css | 52 +++++++++++++++++++---------- loadxml.js | 4 +-- 3 files changed, 103 insertions(+), 32 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index cdb2103..cf5e5f4 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -92,15 +92,17 @@ var iibpd = { styleSheet; document.head.appendChild(styleEl); styleSheet = styleEl.sheet; - styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + "; transition: background-color 1s ease;}", 0); - styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + "; transition: background-color 1s ease;", 0); - styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + "; transition: background-color 1s ease;}", 0); - styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + "; transition: background-color 1s ease;}", 0); - styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:nth-last-child(3):after, .AttributeValue:nth-last-child(2):after, .AttributeValue:last-child:after {color:"+ iibpd.options.colourTagEnds +"; transition: background-color 1s ease;}", 0); - styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + "; transition: background-color 1s ease;}", 0); - styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + "; transition: color 1s ease;}", 0); - styleSheet.insertRule(".AttributeValue:not(.last-of-class) {min-width: " + iibpd.options.attrWidth + "em;}", 0); + styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + ";}", 0); + styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + ";", 0); + styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + ";}", 0); + styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0); + styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); + styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0); + styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + ";}", 0); + styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0); } + + console.info("iibpd.options: " + JSON.stringify(iibpd.options)); }); }, @@ -134,6 +136,34 @@ var iibpd = { iibpd.options.attrWidth = storageChange.newValue; options.attrWidth = true; } + if (key === "colourTagEnds") { + iibpd.options.colourTagEnds = storageChange.newValue; + options.colourTagEnds = true; + } + if (key === "colourTagName") { + iibpd.options.colourTagName = storageChange.newValue; + options.colourTagName = true; + } + if (key === "colourAttrName") { + iibpd.options.colourAttrName = storageChange.newValue; + options.colourAttrName = true; + } + if (key === "colourAttrValue") { + iibpd.options.colourAttrValue = storageChange.newValue; + options.colourAttrValue = true; + } + if (key === "colourData") { + iibpd.options.colourData = storageChange.newValue; + options.colourData = true; + } + if (key === "colourForeground") { + iibpd.options.colourForeground = storageChange.newValue; + options.colourForeground = true; + } + if (key === "colourBackground") { + iibpd.options.colourBackground = storageChange.newValue; + options.colourBackground = true; + } } iibpd.processConfigOptions(options); }); @@ -150,13 +180,36 @@ var iibpd = { } } + // stylesheet updates + var styleEl = document.createElement('style'), + styleSheet; + document.head.appendChild(styleEl); + styleSheet = styleEl.sheet; if (!!options.attrWidth) { - var styleEl = document.createElement('style'), - styleSheet; - document.head.appendChild(styleEl); - styleSheet = styleEl.sheet; - styleSheet.insertRule(".AttributeValue:not(.last-of-class) {min-width: " + iibpd.options.attrWidth + "em;}", 0); + styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0); } + if (!!options.colourTagEnds) { + styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); + } + if (!!options.colourTagName) { + styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + ";}", 0); + } + if (!!options.colourAttrName) { + styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + ";", 0); + } + if (!!options.colourAttrValue) { + styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + ";}", 0); + } + if (!!options.colourData) { + styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0); + } + if (!!options.colourForeground) { + styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + ";}", 0); + } + if (!!options.colourBackground) { + styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0); + } + }, load: function () { diff --git a/loadxml.css b/loadxml.css index 0a55318..f3d44e6 100644 --- a/loadxml.css +++ b/loadxml.css @@ -3,30 +3,38 @@ pre { /* using line-height rather than Element.padding so to ease max-height calculations*/ line-height: 1.5em; + font-family: "Lucida Console", Consolas, monospace; } -.Utility { - color: black; -} + .NodeName { font-weight:bold; color: #800080; + transition: color 1s; } .NodeName:not(.endTag):before { content:"<"; color: #000; + transition: color 1s; } .NodeName.endTag:before { content:""; } -.NodeName.endTag:after, .AttributeValue.last-of-class:after { + +.NodeName.endTag:after { content:">"; color: #000; + transition: color 1s; } .AttributeName { font-weight:bold; color: black; + transition: color 1s; } .AttributeName:after { content:"="; @@ -34,21 +42,32 @@ pre { .AttributeValue { color:blue; + transition: min-width 1s; + display: inline-block; + min-width: 7em; + transition: color 1s; } + .AttributeValue:last-child:after { content: " />"; + float: right; color: #000; + transition: color 1s; +} +.AttributeValue.last-of-class:after { + content: ">"; + float: right; } .NodeValue { color: green; + transition: color 1s; } .endTag { opacity: 1; - transition: opacity .50s ease-in-out; + transition: opacity 1s; } .fade { opacity: 0; - transition: opacity .25s ease-in-out; } .Element { border-left-color:#C2C2C2; @@ -56,26 +75,18 @@ pre { border-left-style:solid; padding: 0px 0px; position: relative; - + opacity: 1; /*max-height: set by javascript*/ overflow: hidden; - transition: max-height 0.4s ease-in-out; + transition: max-height 0.5s ease-in-out, opacity 1s; } .Element > .Element { left:15px; } - -.AttributeValue:not(.last-of-class) { - display: inline-block; - min-width: 7em; -} - .Element_hide, .hide_metadata { max-height: 0 !important; - /*opacity: 0;*/ - transition: max-height 0.4s ease-in-out; /*, opacity .5s ease-out;*/ + opacity: 0; overflow: hidden; - } .Clickable { font-weight:900; @@ -86,6 +97,7 @@ pre { padding-right:5px; vertical-align:middle; user-select: none; + transition: color 1s; } #content { @@ -95,3 +107,9 @@ pre { td { padding: 3px; } + +table { + font-family: "Lucida Console", Consolas, sans-serif; +} +table tr[id] { transition: background-color 1s;} +table tr[id] td { transition: color 1s;} diff --git a/loadxml.js b/loadxml.js index b403ac2..a820651 100644 --- a/loadxml.js +++ b/loadxml.js @@ -151,7 +151,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } else { // mo child nodes // build collapsed display elements - //Look for text content and display in single line + // Look for text content and display in single line var NodeContent = null; for (var i = 0, childNodesLen=RootNode.childNodes.length; i < childNodesLen; ++i) { if (RootNode.childNodes.item(i).nodeName === '#text') { @@ -199,7 +199,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } //endTag - AddNodeName(TagEmptyElement, RootNode.nodeName, true, false); // true = mark as endTag, true=fade + AddNodeName(TagEmptyElement, RootNode.nodeName, true, (indent < iibpd.options.autoOpenDepth)); // true = mark as endTag, true=fade xmlHolderElement.appendChild(TagEmptyElement); From 3d5208470dc3ff2e5f492c6498c4e4587c578380 Mon Sep 17 00:00:00 2001 From: ictinus Date: Wed, 17 Sep 2014 22:31:48 +1000 Subject: [PATCH 07/12] Improvements to colour transitions and element display. --- options.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/options.js b/options.js index 343ad97..ee45512 100644 --- a/options.js +++ b/options.js @@ -4,10 +4,6 @@ var iibpdOptions = { document.getElementById('attrWidthDisplay').textContent = document.getElementById('attrWidth').value; }, - updateColours: function () { - - }, - toggleDisabled: function (element, bDisabled) { if (bDisabled) { element.setAttribute("disabled", "disabled"); @@ -40,7 +36,6 @@ var iibpdOptions = { status.textContent = ' Options saved.'; setTimeout(function() { status.classList.add('fade'); - //setTimeout(function () { status.textContent = ''; }, 500); }, 1000); }); }, @@ -109,5 +104,5 @@ document.getElementById("resetColourBackground").addEventListener("click", funct document.getElementById("colourBackground").value = '#dae3ec'; }, true); document.getElementById("resetColourForeground").addEventListener("click", function () { - document.getElementById("colourForeground").value = '#dae3ec'; + document.getElementById("colourForeground").value = '#000000'; }, true); From b5380151d67ddb780060c65cd25da617c230a8bc Mon Sep 17 00:00:00 2001 From: ictinus Date: Thu, 18 Sep 2014 22:49:52 +1000 Subject: [PATCH 08/12] Cleanout commented code and unused variables. --- loadxml.js | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/loadxml.js b/loadxml.js index a820651..174e8bc 100644 --- a/loadxml.js +++ b/loadxml.js @@ -15,18 +15,6 @@ var emptyDiv = document.createElement('div'); emptyDiv.className = 'Element'; var emptySpan = document.createElement('span'); -var emptyBreak = document.createElement('br'); -var equalsSpan = emptySpan.cloneNode(false); - equalsSpan.textContent = "="; - equalsSpan.className = "Utility"; -var openTag = equalsSpan.cloneNode(false); - openTag.textContent = "<"; -var openEndTag = equalsSpan.cloneNode(false); - openEndTag.textContent = ""; -var endEmptyTag = equalsSpan.cloneNode(false); - endEmptyTag.textContent = " />"; var nodeName = emptySpan.cloneNode(false); nodeName.className = "NodeName"; @@ -121,6 +109,7 @@ function CreateXMLDOM(XMLStr) { var IDCounter = 1; var NestingIndent = 15; function ShowXML(xmlHolderElement, RootNode, indent) { + if (RootNode == null || xmlHolderElement == null || (iibpd.options.discardMetadata && RootNode.nodeName === "metadata")) { return false; } @@ -135,21 +124,16 @@ function ShowXML(xmlHolderElement, RootNode, indent) { if (RootNode.childNodes.length === 0) { var ClickableElement = AddTextNode(TagEmptyElement, ' ', ['Clickable']); //no action on this Clickable - //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); - //TagEmptyElement.classList.add('noChildren'); for (var i = 0, attLen = RootNode.attributes.length; i < attLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, ['AttributeName']); - //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', ['AttributeValue']); } - //TagEmptyElement.appendChild(endEmptyTag.cloneNode(true)); //add ' />' xmlHolderElement.appendChild(TagEmptyElement); } else { // mo child nodes - // build collapsed display elements // Look for text content and display in single line var NodeContent = null; @@ -176,15 +160,12 @@ function ShowXML(xmlHolderElement, RootNode, indent) { ClickableElement.id = 'div_empty_' + IDCounter; } // element - //TagEmptyElement.appendChild(openTag.cloneNode(true)); // add '<' AddNodeName(TagEmptyElement, RootNode.nodeName); // element attributes for (var i = 0, attrLen = RootNode.attributes.length; i < attrLen; ++i) { CurrentAttribute = RootNode.attributes.item(i); AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, ['AttributeName']); - //TagEmptyElement.appendChild(equalsSpan.cloneNode(true)); // add '=' - if (i === attrLen-1) { AddTextNode(TagEmptyElement, '"' + CurrentAttribute.value + '"', ['AttributeValue', 'last-of-class']); } else { @@ -192,8 +173,6 @@ function ShowXML(xmlHolderElement, RootNode, indent) { } } - //TagEmptyElement.appendChild(endTag.cloneNode(true)); //add '>' - if (bSimpleContentExists) { //display inline simple content AddTextNode(TagEmptyElement, NodeContent, ['NodeValue']); } @@ -223,9 +202,7 @@ function ShowXML(xmlHolderElement, RootNode, indent) { // end the expanded xml object AddTextNode(TagElement, ' ', ['Clickable']); - //TagElement.appendChild(openEndTag.cloneNode(true)); //add '' xmlHolderElement.appendChild(TagElement); @@ -251,7 +228,7 @@ function AddTextNode(ParentNode, Text, Classes) { Classes.map( function(aClass) { NewNode.classList.add(aClass); }); - if (Text) { + if (!!Text) { NewNode.textContent = Text; } ParentNode.appendChild(NewNode); From 6d52d3ec01a78e293d52520c950722e5b156282a Mon Sep 17 00:00:00 2001 From: ictinus Date: Sat, 20 Sep 2014 23:18:56 +1000 Subject: [PATCH 09/12] 2 second CSS transitions. Update to NodeValue:before content. --- embeddedXMLViewer.js | 4 ++-- loadxml.css | 36 +++++++++++++++++++++--------------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index cf5e5f4..6920d4c 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -96,7 +96,7 @@ var iibpd = { styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + ";", 0); styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + ";}", 0); styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0); - styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); + styleSheet.insertRule(".NodeName + .NodeValue:before, .NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .NodeName:nth-last-child(2):after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0); styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + ";}", 0); styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0); @@ -189,7 +189,7 @@ var iibpd = { styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0); } if (!!options.colourTagEnds) { - styleSheet.insertRule(".NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); + styleSheet.insertRule(".NodeName + .NodeValue:before, .NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .NodeName:nth-last-child(2):after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); } if (!!options.colourTagName) { styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + ";}", 0); diff --git a/loadxml.css b/loadxml.css index f3d44e6..fb42bfd 100644 --- a/loadxml.css +++ b/loadxml.css @@ -9,32 +9,34 @@ pre { .NodeName { font-weight:bold; color: #800080; - transition: color 1s; + transition: color 2s; } .NodeName:not(.endTag):before { content:"<"; color: #000; - transition: color 1s; + transition: color 2s; } .NodeName.endTag:before { content:""; + color: #000; + transition: color 2s; } .NodeName.endTag:after { content:">"; color: #000; - transition: color 1s; + transition: color 2s; } .AttributeName { font-weight:bold; color: black; - transition: color 1s; + transition: color 2s; } .AttributeName:after { content:"="; @@ -42,29 +44,33 @@ pre { .AttributeValue { color:blue; - transition: min-width 1s; - display: inline-block; min-width: 7em; - transition: color 1s; + display: inline-block; + transition: min-width 2s, color 2s; } .AttributeValue:last-child:after { content: " />"; float: right; color: #000; - transition: color 1s; + transition: color 2s; } .AttributeValue.last-of-class:after { content: ">"; float: right; + transition: color 2s; } .NodeValue { color: green; - transition: color 1s; + transition: color 2s; +} +.NodeName + .NodeValue:before { + content: ">"; + color: #000; } .endTag { opacity: 1; - transition: opacity 1s; + transition: opacity 1s, color 2s; } .fade { opacity: 0; @@ -89,7 +95,7 @@ pre { overflow: hidden; } .Clickable { - font-weight:900; + font-weight: 900; font-size:large; color: #800080; cursor:pointer; @@ -97,7 +103,7 @@ pre { padding-right:5px; vertical-align:middle; user-select: none; - transition: color 1s; + transition: color 2s; } #content { @@ -111,5 +117,5 @@ td { table { font-family: "Lucida Console", Consolas, sans-serif; } -table tr[id] { transition: background-color 1s;} -table tr[id] td { transition: color 1s;} +table tr[id] { transition: background-color 2s;} +table tr[id] td { transition: color 2s;} From 91f171b1b0c534233052c494e139052e9ff794b4 Mon Sep 17 00:00:00 2001 From: ictinus Date: Sun, 21 Sep 2014 22:29:04 +1000 Subject: [PATCH 10/12] Ensure div.info1 table text is styled to selected foreground colour. --- embeddedXMLViewer.js | 4 ++-- loadxml.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/embeddedXMLViewer.js b/embeddedXMLViewer.js index 6920d4c..39b1806 100644 --- a/embeddedXMLViewer.js +++ b/embeddedXMLViewer.js @@ -98,7 +98,7 @@ var iibpd = { styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0); styleSheet.insertRule(".NodeName + .NodeValue:before, .NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .NodeName:nth-last-child(2):after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0); styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0); - styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + ";}", 0); + styleSheet.insertRule("table tr[id] td, div.info1 {color: " + iibpd.options.colourForeground + ";}", 0); styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0); } @@ -204,7 +204,7 @@ var iibpd = { styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0); } if (!!options.colourForeground) { - styleSheet.insertRule("table tr[id] td {color: " + iibpd.options.colourForeground + ";}", 0); + styleSheet.insertRule("table tr[id] td, div.info1 {color: " + iibpd.options.colourForeground + ";}", 0); } if (!!options.colourBackground) { styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0); diff --git a/loadxml.css b/loadxml.css index fb42bfd..21589bc 100644 --- a/loadxml.css +++ b/loadxml.css @@ -118,4 +118,4 @@ table { font-family: "Lucida Console", Consolas, sans-serif; } table tr[id] { transition: background-color 2s;} -table tr[id] td { transition: color 2s;} +table tr[id] td, div.info1 { transition: color 2s;} From 175244504030e5299b44d350b706f304e48e50a8 Mon Sep 17 00:00:00 2001 From: ictinus Date: Sun, 21 Sep 2014 22:57:48 +1000 Subject: [PATCH 11/12] table font CSS - Verdana, sans-serif --- loadxml.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/loadxml.css b/loadxml.css index 21589bc..73e1e6b 100644 --- a/loadxml.css +++ b/loadxml.css @@ -115,7 +115,7 @@ td { } table { - font-family: "Lucida Console", Consolas, sans-serif; + font-family: Verdana, sans-serif; } table tr[id] { transition: background-color 2s;} table tr[id] td, div.info1 { transition: color 2s;} From 540e069a47dc4179d61cd025af03d10033ca3477 Mon Sep 17 00:00:00 2001 From: ictinus Date: Sun, 21 Sep 2014 23:18:18 +1000 Subject: [PATCH 12/12] Fix background image gradient width - 100%. Reduce background colour transition duration --- loadxml.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/loadxml.css b/loadxml.css index 73e1e6b..b86cacb 100644 --- a/loadxml.css +++ b/loadxml.css @@ -106,6 +106,10 @@ pre { transition: color 2s; } +body { + background-size: auto 100%; +} + #content { margin: 5px 0px; } @@ -117,5 +121,5 @@ td { table { font-family: Verdana, sans-serif; } -table tr[id] { transition: background-color 2s;} +table tr[id] { transition: background-color 1s;} table tr[id] td, div.info1 { transition: color 2s;}