Skip to content
This repository was archived by the owner on Feb 11, 2021. It is now read-only.

Commit 3f81cdc

Browse files
benmonrobenmonro
committed
feat: improvements to element query inspector
1 parent 9b72d7c commit 3f81cdc

File tree

6 files changed

+158
-42
lines changed

6 files changed

+158
-42
lines changed

‎pages/elements-panel.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<head>
3+
<link href="node_modules/tachyons/css/tachyons.min.css">
4+
<script src="/dist/elementsPanel.js" ></script>
5+
6+
</head>
7+
<style>
8+
blockquote.good {
9+
text-rendering: optimizeLegibility;
10+
text-align: left;
11+
box-sizing: border-box;
12+
border: 0;
13+
font: inherit;
14+
vertical-align: baseline;
15+
color: #6a737d;
16+
font-size: 16px;
17+
margin: 0 0 16px;
18+
background-color: rgba(0,180,0,.1);
19+
border-left: 8px solid #005500;
20+
padding: 15px 30px 15px 15px;
21+
}
22+
blockquote.warn {
23+
text-rendering: optimizeLegibility;
24+
text-align: left;
25+
box-sizing: border-box;
26+
border: 0;
27+
font: inherit;
28+
vertical-align: baseline;
29+
color: #6a737d;
30+
font-size: 16px;
31+
margin: 0 0 16px;
32+
background-color: rgba(255,229,100,.3);
33+
border-left: 8px solid #ffe564;
34+
padding: 15px 30px 15px 15px;
35+
}
36+
code {
37+
text-rendering: optimizeLegibility;
38+
box-sizing: border-box;
39+
font: inherit;
40+
vertical-align: baseline;
41+
border-radius: 3px;
42+
border: 0;
43+
margin: 0;
44+
overflow: visible;
45+
display: block;
46+
overflow-x: auto;
47+
background: #F0F0F0;
48+
color: #444;
49+
padding: 1.25rem 1.5rem;
50+
font-size: 13px;
51+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
52+
text-align: left;
53+
white-space: pre;
54+
word-spacing: normal;
55+
word-break: normal;
56+
word-wrap: normal;
57+
line-height: 1.5;
58+
tab-size: 4;
59+
hyphens: none;
60+
}
61+
</style>
62+
<body>
63+
<h1>Suggested Query</h1>
64+
<blockquote id="message"></blockquote>
65+
<pre>
66+
<code id="query-code" >
67+
</code>
68+
</pre>
69+
<button>run in console</button>
70+
</body>
71+
</html>

‎src/background.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
const Bridge = require("crx-bridge").default;
22

3-
Bridge.onMessage(
4-
"connect",
5-
() =>
6-
new Promise((res) => {
7-
res("connected");
8-
})
9-
);
10-
113
Bridge.onMessage("show-notification", ({ data: { notification } }) => {
124
chrome.notifications.create(notification);
135
});

‎src/contentScript.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@ const Bridge = require("crx-bridge").default;
33
// eslint-disable-next-line no-unused-vars
44
const { screen, getSuggestedQuery } = require("@testing-library/dom");
55

6-
Bridge.onMessage("connect", () => {
7-
//needed to establish connection
8-
return "connected";
9-
});
10-
116
let currentElement = null;
127

138
document.addEventListener(
@@ -20,6 +15,13 @@ document.addEventListener(
2015
true
2116
);
2217

18+
Bridge.onMessage("run-query-in-console", ({ data: { query } }) => {
19+
/* eslint-disable */
20+
console.log(query);
21+
console.log(eval(query));
22+
/* eslint-enable */
23+
});
24+
2325
const CANT_COPY_NOTIFICATION = {
2426
type: "basic",
2527
iconUrl: "icons/icon64.png",
@@ -101,17 +103,21 @@ function getClosestQuery(element, variant, { doValidate = false } = {}) {
101103
return { suggestedQuery, ...validations };
102104
}
103105

104-
function showElement(el) {
105-
const { suggestedQuery, length, exactIndex } = getClosestQuery(el, "get", {
106-
doValidate: true,
107-
});
106+
function showElement(element) {
107+
const { suggestedQuery, length, exactIndex } = getClosestQuery(
108+
element,
109+
"get",
110+
{
111+
doValidate: true,
112+
}
113+
);
108114
Bridge.sendMessage(
109115
"show-suggestion",
110116
{
111117
suggestedQuery: suggestedQuery.toString(),
112118
length,
113119
exactIndex,
114-
element: el,
120+
element,
115121
},
116122
"devtools"
117123
);

‎src/devtools.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const Bridge = require("crx-bridge").default;
1+
// const Bridge = require("crx-bridge").default;
22

3-
async function main() {
4-
//need to establish connection between background & contentScript.
5-
await Bridge.sendMessage("connect", { really: true }, "content-script");
6-
}
3+
// async function main() {
4+
// //need to establish connection between background & contentScript.
5+
// await Bridge.sendMessage("connect", { really: true }, "content-script");
6+
// }
77

8-
main();
8+
// main();
99

1010
chrome.devtools.panels.create(
1111
"Which Query?",
@@ -14,25 +14,27 @@ chrome.devtools.panels.create(
1414
);
1515

1616
chrome.devtools.panels.elements.createSidebarPane("Which Query?", (sidebar) => {
17-
Bridge.onMessage(
18-
"show-suggestion",
19-
({ data: { suggestedQuery, exactIndex, length } }) => {
20-
const isExact = exactIndex >= 0;
21-
if (length > 1) {
22-
suggestedQuery = suggestedQuery.replace("get", "getAll");
17+
sidebar.setPage("pages/elements-panel.html");
18+
// Bridge.onMessage(
19+
// "show-suggestion",
20+
// ({ data: { suggestedQuery, exactIndex, length } }) => {
21+
// const isExact = exactIndex >= 0;
22+
// if (length > 1) {
23+
// suggestedQuery = suggestedQuery.replace("get", "getAll");
2324

24-
if (isExact) {
25-
suggestedQuery += `[${exactIndex}]`;
26-
}
27-
}
28-
sidebar.setObject(
29-
{ suggestedQuery },
30-
isExact
31-
? "This query will get this precise element"
32-
: "{!} Closest available query, try improving a11y of this element.."
33-
);
34-
}
35-
);
25+
// if (isExact) {
26+
// suggestedQuery += `[${exactIndex}]`;
27+
// }
28+
// }
29+
// console.log(suggestedQuery)
30+
// // sidebar.setObject(
31+
// // { suggestedQuery },
32+
// // isExact
33+
// // ? "This query will get this precise element"
34+
// // : "{!} Closest available query, try improving a11y of this element.."
35+
// // );
36+
// }
37+
// );
3638
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
3739
chrome.devtools.inspectedWindow.eval("window.showElement($0)", {
3840
useContentScriptContext: true,

‎src/elementsPanel.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const Bridge = require("crx-bridge").default;
2+
3+
Bridge.onMessage(
4+
"show-suggestion",
5+
({ data: { suggestedQuery, exactIndex, length } }) => {
6+
const isExact = exactIndex >= 0;
7+
if (length > 1) {
8+
suggestedQuery = suggestedQuery.replace("get", "getAll");
9+
10+
if (isExact) {
11+
suggestedQuery += `[${exactIndex}]`;
12+
}
13+
}
14+
const message = document.querySelector("#message");
15+
message.className = isExact ? "good" : "warn";
16+
message.innerHTML = isExact
17+
? "<span style='font-size:20px;'>&#9989;</span> This query will get this precise element"
18+
: "<span style='font-size:20px;'>&#9888;</span> This is the closest available query, try improving accessibility of this element.";
19+
document.querySelector(
20+
"#query-code"
21+
).innerText = `screen.${suggestedQuery}`;
22+
// document.write(suggestedQuery)
23+
24+
// sidebar.setObject(
25+
// { suggestedQuery },
26+
// isExact
27+
// ? "This query will get this precise element"
28+
// : "{!} Closest available query, try improving a11y of this element.."
29+
// );
30+
}
31+
);
32+
33+
document.addEventListener("DOMContentLoaded", () => {
34+
// Handler when the DOM is fully loaded
35+
// console.log("Hereeeee")
36+
// document.write("Foo")
37+
document.querySelector("button").addEventListener("click", () => {
38+
Bridge.sendMessage(
39+
"run-query-in-console",
40+
{ query: document.querySelector("#query-code").innerText },
41+
"content-script"
42+
);
43+
});
44+
});

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
background: "./src/background.js",
66
contentScript: "./src/contentScript.js",
77
devtools: "./src/devtools.js",
8+
elementsPanel: "./src/elementsPanel.js",
89
},
910
output: {
1011
path: path.resolve(__dirname, "dist"),

0 commit comments

Comments
 (0)