Skip to content

Commit 610a72a

Browse files
deeppatel234deeppatel234
committed
improve messaging
1 parent 8eaf909 commit 610a72a

6 files changed

Lines changed: 127 additions & 70 deletions

File tree

‎packages/devtool-extenstion/extension/core/background.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -225,8 +225,22 @@ const setAppPopup = (isActive, tabId) => {
225225
128: `assets/icons/icon128${isActive ? "" : "-disabled"}.png`,
226226
},
227227
});
228-
chrome.browserAction.setPopup({
229-
tabId,
230-
popup: "popup/popup.html",
231-
});
228+
if (isActive) {
229+
chrome.storage.local.get(
230+
["startDebugWhen"],
231+
(settings) => {
232+
if (settings.startDebugWhen === "pageLoad") {
233+
chrome.browserAction.setPopup({
234+
tabId,
235+
popup: "popup/popup.html",
236+
});
237+
} else {
238+
chrome.browserAction.setPopup({
239+
tabId,
240+
popup: "popup/extenstionLoad.html",
241+
});
242+
}
243+
}
244+
);
245+
}
232246
};

‎packages/devtool-extenstion/extension/popup/disabled.html‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
}
99

1010
html, body {
11-
width: 400px;
12-
height: 100px;
11+
width: 300px;
12+
height: 70px;
1313
}
1414

1515
body {
@@ -29,7 +29,7 @@
2929

3030
p {
3131
margin: 0;
32-
padding: 1rem;
32+
padding: 0.3rem;
3333
}
3434

3535
a, a:visited {
@@ -40,23 +40,9 @@
4040

4141
<body>
4242
<div class="not-found-message">
43+
<p>React is not found in this page.</p>
4344
<p>
44-
<a
45-
target="_blank"
46-
href="https://github.com/deeppatel234/react-context-devtool"
47-
>
48-
react-context-devtool
49-
</a>
50-
is not configured for this site
51-
</p>
52-
<p>
53-
<a
54-
target="_blank"
55-
href="https://github.com/deeppatel234/react-context-devtool/blob/master/README.md"
56-
>
57-
click here
58-
</a>
59-
for configure
45+
if this seems wrong please <a target="_blank" href="https://github.com/deeppatel234/react-context-devtool/issues">create issue</a>.
6046
</p>
6147
</div>
6248
</body>

‎packages/devtool-extenstion/extension/popup/extenstionLoad.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<html>
2+
<head>
3+
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
4+
<meta content="utf-8" http-equiv="encoding" />
5+
<style>
6+
html {
7+
font-size: 12px;
8+
}
9+
10+
html, body {
11+
width: 400px;
12+
height: 110px;
13+
}
14+
15+
body {
16+
margin: 0;
17+
}
18+
19+
.message {
20+
background: #222831;
21+
color: #fff;
22+
height: 100%;
23+
font-size: 1rem;
24+
}
25+
26+
p {
27+
margin: 0;
28+
padding: 1rem;
29+
}
30+
31+
hr {
32+
width: 95%;
33+
border-color: rgba(255,255,255,0.6);
34+
}
35+
36+
a, a:visited {
37+
color: #00adb5;
38+
}
39+
</style>
40+
</head>
41+
42+
<body>
43+
<div class="message">
44+
<p>Please open the developer tools and open "React Context" tab.</p>
45+
<hr />
46+
<p>if you want to load this extension on page load then you can change the settings in the "Extension options".</p>
47+
</div>
48+
</body>
49+
</html>

‎packages/devtool-extenstion/src/containers/App.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useEffect, useState } from "react";
22

33
import AppContext from "Containers/AppContext";
44
import Header from "Containers/Header";
@@ -9,18 +9,33 @@ import "./app.scss";
99

1010
const App = ({ appData, onDispatchAction }) => {
1111
const [selectedDebug, setDebug] = useState({});
12+
const [settings, setSettings] = useState({
13+
startDebugWhen: "extensionLoad",
14+
debugUseReducer: true,
15+
debugContext: true,
16+
});
17+
18+
useEffect(() => {
19+
chrome.storage.local.get(
20+
["startDebugWhen", "debugUseReducer", "debugContext"],
21+
function (result) {
22+
setSettings(result);
23+
}
24+
);
25+
}, []);
1226

1327
if (!appData || !appData.tab) {
14-
return <NotFoundMessage />
28+
return <NotFoundMessage />;
1529
}
1630

1731
return (
1832
<AppContext.Provider
1933
value={{
2034
appData,
35+
settings,
2136
selectedDebug,
2237
setDebug,
23-
onDispatchAction
38+
onDispatchAction,
2439
}}
2540
>
2641
<div id="main-app">

‎packages/devtool-extenstion/src/containers/NotFoundMessage/index.js‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,9 @@ import "./index.scss";
55
const NotFoundMessage = () => {
66
return (
77
<div className="not-found-message">
8+
<p>React is not found in this page.</p>
89
<p>
9-
<a
10-
target="_blank"
11-
href="https://github.com/deeppatel234/react-context-devtool"
12-
>
13-
react-context-devtool
14-
</a>{" "}
15-
is not configured for this site
16-
</p>
17-
<p className="setup-text">
18-
<a
19-
target="_blank"
20-
href="https://github.com/deeppatel234/react-context-devtool/blob/master/README.md"
21-
>
22-
click here
23-
</a>{" "}
24-
for configure
10+
if this seems wrong please <a target="_blank" href="https://github.com/deeppatel234/react-context-devtool/issues">create issue</a>.
2511
</p>
2612
</div>
2713
);

‎packages/devtool-extenstion/src/containers/Sidebar/index.js‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import "./index.scss";
1010
const FILTERS = ["context", "useReducer"];
1111

1212
const Sidebar = () => {
13-
const { appData, selectedDebug, setDebug } = useContext(AppContext);
13+
const { appData, selectedDebug, setDebug, settings } = useContext(AppContext);
1414
const [selectedFilters, setFilters] = useState([...FILTERS]);
1515

1616
const contextList = Object.keys(appData.context).map((key) => {
@@ -31,9 +31,9 @@ const Sidebar = () => {
3131

3232
useEffect(() => {
3333
if (contextList.length) {
34-
setDebug({ id: contextList[0].value, type: contextList[0].type })
34+
setDebug({ id: contextList[0].value, type: contextList[0].type });
3535
} else if (useReducerList.length) {
36-
setDebug({ id: useReducerList[0].value, type: useReducerList[0].type })
36+
setDebug({ id: useReducerList[0].value, type: useReducerList[0].type });
3737
}
3838
}, []);
3939

@@ -51,32 +51,39 @@ const Sidebar = () => {
5151

5252
return (
5353
<aside>
54-
<div className="filters">
55-
<div>
56-
<svg
57-
className="funnel"
58-
width="1em"
59-
height="1em"
60-
viewBox="0 0 16 16"
61-
fill="currentColor"
62-
xmlns="http://www.w3.org/2000/svg"
63-
>
64-
<path
65-
fillRule="evenodd"
66-
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"
67-
/>
68-
</svg>
54+
{settings.debugUseReducer && settings.debugContext ? (
55+
<div className="filters">
56+
<div>
57+
<svg
58+
className="funnel"
59+
width="1em"
60+
height="1em"
61+
viewBox="0 0 16 16"
62+
fill="currentColor"
63+
xmlns="http://www.w3.org/2000/svg"
64+
>
65+
<path
66+
fillRule="evenodd"
67+
d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"
68+
/>
69+
</svg>
70+
</div>
71+
{FILTERS.map((f) => (
72+
<Badge
73+
key={f}
74+
outline={!selectedFilters.includes(f)}
75+
onClick={() => onSelectFilter(f)}
76+
>
77+
{f}
78+
</Badge>
79+
))}
6980
</div>
70-
{FILTERS.map((f) => (
71-
<Badge
72-
key={f}
73-
outline={!selectedFilters.includes(f)}
74-
onClick={() => onSelectFilter(f)}
75-
>
76-
{f}
77-
</Badge>
78-
))}
79-
</div>
81+
) : (
82+
<div className="filters">
83+
{settings.debugUseReducer ? <Badge>useReducers List</Badge> : null}
84+
{settings.debugContext ? <Badge>Context List</Badge> : null}
85+
</div>
86+
)}
8087
<ul className="debuglist">
8188
{filteredList.map(({ value, text, type }) => (
8289
<li

0 commit comments

Comments
 (0)