Skip to content

Commit d6918ea

Browse files
sashafirsovsashafirsov
committed
First draft, working
1 parent 1e95abf commit d6918ea

File tree

8 files changed

+128
-0
lines changed

8 files changed

+128
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,4 @@ dist
102102

103103
# TernJS port file
104104
.tern-port
105+
/.idea/

‎about.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html>
2+
<head>
3+
<style>
4+
body{ min-width: 16rem;}
5+
var{color: navy; font-family: monospace; font-weight: bold; font-size: large; font-style: normal; text-decoration: none;}</style>
6+
</head>
7+
<body>
8+
<h3>@epa-wg/custom-element</h3>
9+
<p>
10+
<b>Transformation</b> tab of DOM inspector shows:
11+
</p>
12+
<ul>
13+
<li><var>current</var> selected in DOM inspector node</li>
14+
<li>Parent <var>customElement</var></li>
15+
<li>Declarative Custom Element <var>dce</var> for custom element ^^</li>
16+
<li><var>current</var> selected in DOM inspector node</li>
17+
</ul>
18+
<p>
19+
Data source for transformation:
20+
</p>
21+
<ul>
22+
<li><var>xml-as-object</var> for easier inspection </li>
23+
<li><var>xml-string</var> as a string</li>
24+
<li><var>xslt</var> as a string</li>
25+
</ul>
26+
<h3>Debugging</h3>
27+
<var>xml-string</var> and <var>xslt</var> can be saved to file via for "copy string contents"
28+
into clipboard. <br/>
29+
The XSLT debugger from your favorite IDE can set the breakpoints
30+
withing those files and run transformation under debugger.
31+
<br/>
32+
<br/>
33+
More info on <a href="https://github.com/EPA-WG/custom-element-chrome-plugin">GitHub repo</a>
34+
35+
<script src="popup.js"></script>
36+
</body>
37+
</html>

‎background.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const rule1 = {
2+
conditions: [
3+
new chrome.declarativeContent.PageStateMatcher({
4+
css: ["custom-element"]
5+
})
6+
],
7+
// And shows the extension's page action.
8+
actions: [new chrome.declarativeContent.ShowAction()]
9+
};
10+
const rule2 = {
11+
conditions: [
12+
new chrome.declarativeContent.PageStateMatcher({
13+
css: ["custom-element"]
14+
})
15+
],
16+
// And shows the extension's page action.
17+
actions: [new chrome.declarativeContent.ShowAction()]
18+
};
19+
20+
// When the extension is installed or upgraded ...
21+
chrome.runtime.onInstalled.addListener(function (details) {
22+
// chrome.action.disable();
23+
24+
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
25+
chrome.declarativeContent.onPageChanged.addRules([rule1]);
26+
});
27+
});

‎devtools.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Transformation</title>
6+
<script src="devtools.js"></script>
7+
</head>
8+
<body>
9+
custom-element "Transformation" tab of DOM inspector
10+
</body>
11+
</html>

‎devtools.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const getProperties = function()
2+
{
3+
const xml2str = x => x?.nodeType ? new XMLSerializer().serializeToString( x ): undefined;
4+
const tagNattrs = h => h.substring(1, h.indexOf('>'))
5+
const xml2obj = x => {
6+
if(!x)
7+
return;
8+
if( !x.children?.length )
9+
return x?.textContent;
10+
const ret = { __proto__: null };
11+
[ ...x.children ].map( c => ret[ tagNattrs(c.outerHTML) ] = xml2obj( c ) );
12+
return ret;
13+
}
14+
const parentByProp = ( el, prop )=> el && (prop in el ? el: parentByProp( el.parentNode, prop ));
15+
16+
const current = $0
17+
, customElement = parentByProp( current, 'xml' )
18+
, xml = customElement?.xml
19+
, dce = customElement?.dce || parentByProp( current, 'dce' )?.dce;
20+
return { current, customElement, dce
21+
, xslt: xml2str( dce?.xslt )
22+
, 'xml-string': xml2str(xml)
23+
, 'xml-as-object': xml2obj(xml)
24+
, __proto__: null };
25+
}
26+
27+
chrome.devtools.panels.elements.createSidebarPane(
28+
"Transformation",
29+
function( sidebar )
30+
{
31+
const updateElementProperties = () => sidebar.setExpression( "(" + getProperties.toString() + ")()" );
32+
33+
updateElementProperties();
34+
chrome.devtools.panels.elements.onSelectionChanged.addListener( updateElementProperties );
35+
} );

‎hello_extensions.png

319 Bytes
Loading

‎manifest.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "@epa-wg/custom-element",
3+
"description": "devtools helper for `@epa-wg/custom-element` as 'Transformation' tab of DOM inspector ",
4+
"version": "0.0.1",
5+
"manifest_version": 3,
6+
"devtools_page": "devtools.html",
7+
"action": {
8+
"default_popup": "about.html",
9+
"default_icon": "hello_extensions.png"
10+
},
11+
"background": {
12+
"service_worker": "background.js",
13+
"type": "module"
14+
},
15+
"permissions":["declarativeContent","activeTab"]
16+
}

‎popup.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log("This is a popup!");

0 commit comments

Comments
 (0)