| 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);
|
| +
|
|
|