Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(56)

Unified Diff: third_party/polymer/v0_8/components-chromium/polymer/src/lib/expr/sinspect-extracted.js

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Also remove polymer/explainer Created 5 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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 + '&nbsp;&nbsp;';
+ //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>&lt;/' + name + '&gt;</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>' + '&lt;';
+ 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 += '&gt;'+ '</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);
+

Powered by Google App Engine
This is Rietveld 408576698