Index: third_party/polymer/v0_8/components-chromium/polymer/src/lib/expr/sinspect-extracted.js |
diff --git a/third_party/polymer/v0_8/components-chromium/polymer/src/lib/expr/sinspect-extracted.js b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/expr/sinspect-extracted.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ef13b0c4a3e12166df04166ab150d1938c18a2b8 |
--- /dev/null |
+++ b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/expr/sinspect-extracted.js |
@@ -0,0 +1,225 @@ |
+ |
+ |
+ (function(scope) { |
+ |
+ scope = scope || (window.Inspector = {}); |
+ |
+ var inspector; |
+ |
+ window.sinspect = function(inNode, inProxy) { |
+ if (!inspector) { |
+ inspector = window.open('', 'ShadowDOM Inspector', null, true); |
+ inspector.document.write(inspectorHTML); |
+ //inspector.document.close(); |
+ inspector.api = { |
+ shadowize: shadowize |
+ }; |
+ } |
+ inspect(inNode || wrap(document.body), inProxy); |
+ }; |
+ |
+ var inspectorHTML = [ |
+ '<!DOCTYPE html>', |
+ '<html>', |
+ ' <head>', |
+ ' <title>ShadowDOM Inspector</title>', |
+ ' <style>', |
+ ' body {', |
+ ' }', |
+ ' pre {', |
+ ' font: 9pt "Courier New", monospace;', |
+ ' line-height: 1.5em;', |
+ ' }', |
+ ' tag {', |
+ ' color: purple;', |
+ ' }', |
+ ' ul {', |
+ ' margin: 0;', |
+ ' padding: 0;', |
+ ' list-style: none;', |
+ ' }', |
+ ' li {', |
+ ' display: inline-block;', |
+ ' background-color: #f1f1f1;', |
+ ' padding: 4px 6px;', |
+ ' border-radius: 4px;', |
+ ' margin-right: 4px;', |
+ ' }', |
+ ' button {', |
+ ' display: inline-block;', |
+ ' color: purple;', |
+ ' font-weight: bold;', |
+ ' background: none;', |
+ ' border: none;', |
+ ' outline: none;', |
+ ' padding: 0;', |
+ ' margin: 0;', |
+ ' }', |
+ ' </style>', |
+ ' </head>', |
+ ' <body>', |
+ ' <ul id="crumbs">', |
+ ' </ul>', |
+ ' <div id="tree"></div>', |
+ ' </body>', |
+ '</html>' |
+ ].join('\n'); |
+ |
+ var crumbs = []; |
+ |
+ var displayCrumbs = function() { |
+ // alias our document |
+ var d = inspector.document; |
+ // get crumbbar |
+ var cb = d.querySelector('#crumbs'); |
+ // clear crumbs |
+ cb.textContent = ''; |
+ // build new crumbs |
+ for (var i=0, c; c=crumbs[i]; i++) { |
+ var a = d.createElement('a'); |
+ a.href = '#'; |
+ a.textContent = c.localName; |
+ a.idx = i; |
+ a.onclick = function(event) { |
+ var c; |
+ while (crumbs.length > this.idx) { |
+ c = crumbs.pop(); |
+ } |
+ inspect(c.shadow || c, c); |
+ event.preventDefault(); |
+ }; |
+ cb.appendChild(d.createElement('li')).appendChild(a); |
+ } |
+ }; |
+ |
+ var inspect = function(inNode, inProxy) { |
+ // alias our document |
+ var d = inspector.document; |
+ // reset list of drillable nodes |
+ drillable = []; |
+ // memoize our crumb proxy |
+ var proxy = inProxy || inNode; |
+ crumbs.push(proxy); |
+ // update crumbs |
+ displayCrumbs(); |
+ // reflect local tree |
+ d.body.querySelector('#tree').innerHTML = |
+ '<pre>' + output(inNode, getLocalNodes(inNode)) + '</pre>'; |
+ }; |
+ |
+ var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach); |
+ |
+ var blacklisted = {STYLE:1, SCRIPT:1, "#comment": 1, TEMPLATE: 1}; |
+ var blacklist = function(inNode) { |
+ return blacklisted[inNode.nodeName]; |
+ }; |
+ |
+ var output = function(inNode, inChildNodes, inIndent) { |
+ if (blacklist(inNode)) { |
+ return ''; |
+ } |
+ var indent = inIndent || ''; |
+ if (inNode.localName || inNode.domRoot) { |
+ var name = inNode.localName || ROOT_NAME; |
+ //inChildNodes = ShadowDOM.localNodes(inNode); |
+ var info = indent + describe(inNode); |
+ // if only textNodes |
+ // TODO(sjmiles): make correct for ShadowDOM |
+ /*if (!inNode.children.length && inNode.localName !== 'content' && inNode.localName !== 'shadow') { |
+ info += catTextContent(inChildNodes); |
+ } else*/ { |
+ // TODO(sjmiles): native <shadow> has no reference to its projection |
+ if (name == 'content' /*|| name == 'shadow'*/) { |
+ inChildNodes = getDistributedNodes(inNode); |
+ } |
+ info += '<br/>'; |
+ var ind = indent + ' '; |
+ //console.group('output ' + inNode.localName); |
+ //console.log(inChildNodes); |
+ forEach(inChildNodes, function(n) { |
+ info += output(n, getLightNodes(n), ind); |
+ }); |
+ //console.groupEnd('output ' + inNode.localName); |
+ info += indent; |
+ } |
+ if (!({br:1}[name])) { |
+ info += '<tag></' + name + '></tag>'; |
+ info += '<br/>'; |
+ } |
+ } else { |
+ var text = inNode.textContent.trim(); |
+ info = text ? indent + '"' + text + '"' + '<br/>' : ''; |
+ } |
+ return info; |
+ }; |
+ |
+ var catTextContent = function(inChildNodes) { |
+ var info = ''; |
+ forEach(inChildNodes, function(n) { |
+ info += n.textContent.trim(); |
+ }); |
+ return info; |
+ }; |
+ |
+ var drillable = []; |
+ |
+ var describe = function(inNode) { |
+ var tag = '<tag>' + '<'; |
+ var name = inNode.localName || ROOT_NAME; |
+ if (hasRoot(inNode)) { |
+ tag += '<button idx="' + drillable.length + |
+ '" onclick="api.shadowize.call(this)">' + name + '</button>'; |
+ drillable.push(inNode); |
+ } else { |
+ tag += name || ROOT_NAME; |
+ } |
+ if (inNode.attributes) { |
+ forEach(inNode.attributes, function(a) { |
+ tag += ' ' + a.name + (a.value ? '="' + a.value + '"' : ''); |
+ }); |
+ } |
+ tag += '>'+ '</tag>'; |
+ return tag; |
+ }; |
+ |
+ // remote api |
+ |
+ shadowize = function() { |
+ var idx = Number(this.attributes.idx.value); |
+ //alert(idx); |
+ var node = drillable[idx]; |
+ if (node) { |
+ inspect(node, node) |
+ } else { |
+ console.log("bad shadowize node"); |
+ console.dir(this); |
+ } |
+ }; |
+ |
+ // util |
+ |
+ var ROOT_NAME = 'local-root'; |
+ |
+ function hasRoot(node) { |
+ return (node.shadyRoot || node.shadowRoot); |
+ } |
+ |
+ function getLocalNodes(n) { |
+ return Polymer.dom.childNodes(n.root); |
+ } |
+ |
+ function getLightNodes(n) { |
+ return Polymer.dom.childNodes(n); |
+ } |
+ |
+ function getDistributedNodes(node) { |
+ Polymer.dom.distributedNodes(node); |
+ } |
+ |
+ |
+ // export |
+ |
+ scope.output = output; |
+ |
+})(window.Inspector); |
+ |