Skip to content

Commit c360d6d

Browse files
localjolocaljo
committed
Merge pull request #2 from solidusjs/nice-ui
Add CSS and Tabbed Layout to Panel
2 parents b2259b8 + 6cbda1f commit c360d6d

6 files changed

Lines changed: 405 additions & 67 deletions

File tree

‎background.js‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,29 @@ chrome.runtime.onConnect.addListener(function (port) {
1414
if (i !== -1) ports.splice(i, 1);
1515
});
1616
port.onMessage.addListener(function (msg) {
17-
console.log('Background.js Recieved Message', msg);
18-
processBackgroundIncomingMessage(msg);
17+
if (msg.tabId) {
18+
tabInspected = msg.tabId;
19+
getJsonResource(tabInspected);
20+
} else {
21+
console.log(msg);
22+
}
1923
});
2024
});
2125

2226
chrome.tabs.onUpdated.addListener(function (tabId, changes) {
2327
if (tabId === tabInspected && changes.status === 'complete') {
2428
getJsonResource(tabId);
29+
notifyDevtools('action', 'reload');
2530
}
2631
});
2732

28-
function processBackgroundIncomingMessage(msg) {
29-
console.log('Processing Message in Background', msg);
30-
if (msg.tabId) {
31-
tabInspected = msg.tabId;
32-
getJsonResource(tabInspected);
33-
} else {
34-
console.log(msg);
35-
}
36-
}
37-
3833
// Function to send a message to main.js
39-
function notifyDevtools(msg) {
40-
console.log('Background.js Sending Message', msg);
34+
function notifyDevtools(msgType, payload) {
35+
var packagedMessage = {};
36+
packagedMessage.msgType = msgType;
37+
packagedMessage.payload = payload;
4138
ports.forEach(function (port) {
42-
port.postMessage(msg);
39+
port.postMessage(packagedMessage);
4340
});
4441
}
4542

@@ -49,23 +46,29 @@ function getJsonResource(tabID) {
4946
var xhr = new XMLHttpRequest();
5047
xhr.open('GET', jsonResourceURL, true);
5148
xhr.onreadystatechange = function() {
52-
var isSolidus, errMsg;
53-
isSolidus = (xhr.getResponseHeader('X-Powered-By').match(/Solidus/i));
54-
if (xhr.readyState === 4 && isSolidus) { // Is complete Solidus response?
55-
if(xhr.status !== 200){ // Check that Solidus response didn't fail
56-
errMsg = 'Failed to get Solidus context. Status: ' + xhr.status;
57-
notifyDevtools(JSON.parse('{"error":"' + errMsg + '"}'));
58-
} else {
59-
try {
60-
// Send Solidus JSON to devpanel
61-
notifyDevtools(JSON.parse(xhr.responseText));
62-
} catch (e) {
63-
notifyDevtools(JSON.parse('{"error":"' + e + '"}'));
64-
}
49+
if (xhr.readyState !== 4) return; //quickly return if not complete request
50+
var xpbHeader = xhr.getResponseHeader('X-Powered-By') || 'unknown';
51+
if (!xpbHeader.match(/Solidus/i)) { //quickly return if not solidus
52+
notifyDevtools('error', 'No Solidus header detected.');
53+
notifyDevtools('status', '<b>not</b> running Solidus 0.1.7 or greater');
54+
notifyDevtools('action', 'shutdown');
55+
return;
56+
}
57+
notifyDevtools('status', 'running ' + xpbHeader);
58+
if (xhr.status !== 200) {
59+
notifyDevtools('error', 'Solidus JSON status: ' + xhr.status);
60+
notifyDevtools('action', 'soft-shutdown');
61+
return;
62+
}
63+
if (xhr.status === 200) {
64+
try {
65+
notifyDevtools('context', JSON.parse(xhr.responseText));
66+
notifyDevtools('action', 'reload');
67+
} catch (e) {
68+
notifyDevtools('error', e);
6569
}
6670
} else {
67-
errMsg = 'Looks like you\'re not inspecting a Solidus Page.';
68-
notifyDevtools(JSON.parse('{"error":"' + errMsg + '"}'));
71+
notifyDevtools('status', 'what' + xhr.status);
6972
}
7073
};
7174
xhr.send();

‎bower.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,12 @@
2626
"tests"
2727
],
2828
"dependencies": {
29-
"ember": "~1.5.1",
3029
"bootstrap": "~3.2.0",
31-
"Inspector-JSON": "SparkartGroupInc/Inspector-JSON#e6bec9fe4cc7551cd46f44bafed6891620a5e47d"
30+
"Inspector-JSON": "SparkartGroupInc/Inspector-JSON#e6bec9fe4cc7551cd46f44bafed6891620a5e47d",
31+
"bootstrap-vertical-tabs": "~1.1.0",
32+
"jquery-ui": "~1.11.0"
33+
},
34+
"resolutions": {
35+
"bootstrap": "~3.2.0"
3236
}
3337
}

‎views/devpanel.css‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
/* Basic reset, typography, and icons */
2+
body, html {
3+
font-family: 'Lucida Grande', 'Segoe UI', Tahoma, sans-serif;
4+
height: 100%;
5+
position: fixed;
6+
top: 0;
7+
bottom: 0;
8+
left: 0;
9+
right: 0;
10+
}
11+
12+
@font-face {
13+
font-family: 'solidusicons';
14+
src:url('solidusicons.woff?8i2fev') format('woff');
15+
font-weight: normal;
16+
font-style: normal;
17+
}
18+
19+
[class^="icon-"], [class*=" icon-"] {
20+
font-family: 'solidusicons';
21+
speak: none;
22+
font-style: normal;
23+
font-weight: normal;
24+
font-variant: normal;
25+
text-transform: none;
26+
line-height: 1;
27+
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
}
31+
32+
[class^="icon-"]:before {
33+
margin-right: 1em;
34+
}
35+
36+
.icon-console:before {
37+
content: "\e603";
38+
}
39+
.icon-info:before {
40+
content: "\e601";
41+
}
42+
.icon-clear:before {
43+
content: "\e600";
44+
}
45+
.icon-json:before {
46+
content: "\e602";
47+
}
48+
49+
/*Side tabs */
50+
.sidetab-column {
51+
height: 100%;
52+
padding: 0;
53+
border-right: 1px solid #a3a3a3;
54+
background: #e8e8e8;
55+
width: 200px;
56+
max-width: 90%;
57+
}
58+
59+
.ui-resizable-e {
60+
cursor: ew-resize;
61+
}
62+
63+
.nav-tabs>li>a {
64+
font-size: 12px;
65+
line-height: 12px;
66+
color: #303942;
67+
border-radius: 0;
68+
border: 0;
69+
}
70+
71+
.nav-tabs>li>a:hover {
72+
border-right: 1px;
73+
border-right-color: #a3a3a3;
74+
background: inherit;
75+
}
76+
77+
.nav-tabs>li.active>a {
78+
background: #3879d9;
79+
border: 0;
80+
color: #fff;
81+
text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
82+
}
83+
84+
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
85+
border: 0;
86+
color: #fff;
87+
background: #3879d9;
88+
}
89+
90+
.nav-tabs>li>a[data-toggle='none'] {
91+
display: none;
92+
}
93+
94+
/* Main panel and tab content */
95+
96+
.panel-column {
97+
height: 100%;
98+
position: static;
99+
padding: 0;
100+
width: 100%;
101+
float: none;
102+
}
103+
104+
.tab-content, .tab-pane {
105+
height: 100%;
106+
}
107+
108+
.tab-pane :first-child {
109+
margin-top: 0;
110+
}
111+
112+
.tabs-left {
113+
border: 0;
114+
}
115+
116+
/* Server log toolbar */
117+
118+
.server-log-buttons {
119+
height: 23px;
120+
font-size: 12px;
121+
color: #303942;
122+
background: white;
123+
}
124+
125+
.server-log-buttons .btn {
126+
padding: 0 10px;
127+
line-height: 23px;
128+
border: 0;
129+
border-radius: 0;
130+
color: #676767;
131+
font-size: 14px;
132+
}
133+
134+
.server-log-buttons .btn:hover {
135+
color: #404040;
136+
background-color: inherit;
137+
}
138+
139+
/* Panel typography and layout */
140+
.scroll-panel {
141+
overflow: scroll;
142+
border-top-color: #E6E6E6;
143+
padding: 10px;
144+
max-height: 100%;
145+
}
146+
147+
pre.scroll-panel, .inspector-json {
148+
border-width: 1px 0 0 0;
149+
font-size: 11px;
150+
font-family: Menlo, monospace;
151+
background: #fff;
152+
border-radius: 0;
153+
max-height: 90%;
154+
}
155+
156+
.inspector-json * {
157+
white-space: pre-wrap;
158+
word-wrap: break-word;
159+
}
160+
161+
.inspector-json ol, .inspector-json ul {
162+
list-style-type: none;
163+
padding: 0 0 0 2em;
164+
}
165+
166+
.inspector-json > ol,
167+
.inspector-json > ul {
168+
padding: 0;
169+
border-left: none;
170+
}
171+
172+
.inspector-json var {
173+
font-style: normal;
174+
}
175+
176+
.inspector-json li > strong,
177+
.inspector-json li > a {
178+
margin-right: 8px;
179+
}
180+
181+
.inspector-json li > a {
182+
text-decoration: none;
183+
color: rgb(136, 19, 145);
184+
}
185+
186+
.inspector-json li > a:after {
187+
content: ':';
188+
}
189+
190+
.inspector-json li > strong {
191+
color: rgb(136, 19, 145);
192+
}
193+
194+
.inspector-json li strong {
195+
font-weight: normal;
196+
}
197+
198+
.inspector-json li.object > a:before,
199+
.inspector-json li.array > a:before {
200+
content: '\25BC'; /* down pointing triangle */
201+
display: inline-block;
202+
width: 10px;
203+
margin-right: 5px;
204+
color: #808080;
205+
}
206+
207+
.inspector-json li.collapsed > a:before {
208+
content: '\25B6'; /* right pointing triangle */
209+
}
210+
211+
.inspector-json li.collapsed > ol,
212+
.inspector-json li.collapsed > ul {
213+
display: none;
214+
}
215+
216+
.inspector-json li > span {
217+
color: rgb(196, 26, 22);
218+
}
219+
220+
.inspector-json li > em {
221+
color: rgb(48, 57, 66);
222+
font-style: normal;
223+
}
224+
225+
.inspector-json li > var {
226+
color: rgb(28, 0, 207);
227+
}
228+
229+
.inspector-json li > i {
230+
color: rgb( 150, 150, 150 );
231+
}

‎views/devpanel.html‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,47 @@
11
<!doctype html>
22
<html>
33
<head>
4+
5+
<link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
6+
7+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
8+
<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
49
<script src="../node_modules/socket.io-client/socket.io.js"></script>
510
<script src="devpanel.js"></script>
611
<script src="../bower_components/Inspector-JSON/inspector-json.js"></script>
7-
<link href="../bower_components/Inspector-JSON/inspector-json.css" media="all" rel="stylesheet" type="text/css">
12+
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
13+
14+
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
15+
<link href="../bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css" media="all" rel="stylesheet" type="text/css">
16+
<link href="devpanel.css" media="all" rel="stylesheet" type="text/css">
817
</head>
918
<body>
10-
<div id="messageholder"></div>
11-
<div id="pagecontext"></div>
12-
<pre id="serverlogs"></pre>
19+
<div class="sidetab-column col-xs-3" id="sidePanel">
20+
<ul class="nav nav-tabs tabs-left" id="panelTabs">
21+
<li class="active"><a href="#context" data-toggle="tab"><span class="icon-json"></span> Context</a></li>
22+
<li><a href="#logs" data-toggle="tab"><span class="icon-console"></span> Logs</a></li>
23+
<li><a href="#info" data-toggle="tab"><span class="icon-info"></span> Info</a></li>
24+
</ul>
25+
</div>
26+
<div class="panel-column col-xs-9">
27+
<div class="tab-content">
28+
<div class="tab-pane active" id="context">
29+
<div id="pagecontext" class="scroll-panel"></div>
30+
</div>
31+
<div class="tab-pane" id="logs">
32+
<div class="btn-group server-log-buttons">
33+
<button type="button" id="logclear" title="Clear server log." class="btn btn-default"><span class="icon-clear"></span></button>
34+
</div>
35+
<pre id="serverlogs" class="scroll-panel"></pre>
36+
</div>
37+
<div class="tab-pane" id="info">
38+
<div class="scroll-panel">
39+
<h3>Solidus DevTools v0.1.0</h3>
40+
<p>The site you are inspecting is <span id="pluginstatus">a mystery</span>.</p>
41+
<div id="messageholder"></div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
1346
</body>
1447
</html>

0 commit comments

Comments
 (0)