Skip to content

Commit 92bfd93

Browse files
localjolocaljo
committed
match native devtools styles
1 parent 72edecb commit 92bfd93

4 files changed

Lines changed: 91 additions & 34 deletions

File tree

‎views/devpanel.css‎

Lines changed: 81 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
body, html {
2+
font-family: 'Lucida Grande', 'Segoe UI', Tahoma, sans-serif;
23
height: 100%;
34
position: fixed;
45
top: 0;
@@ -8,76 +9,129 @@ body, html {
89
}
910

1011
@font-face {
11-
font-family: 'solidusicons';
12-
src:url('solidusicons.woff?8i2fev') format('woff');
13-
font-weight: normal;
14-
font-style: normal;
12+
font-family: 'solidusicons';
13+
src:url('solidusicons.woff?8i2fev') format('woff');
14+
font-weight: normal;
15+
font-style: normal;
1516
}
1617

1718
[class^="icon-"], [class*=" icon-"] {
18-
font-family: 'solidusicons';
19-
speak: none;
20-
font-style: normal;
21-
font-weight: normal;
22-
font-variant: normal;
23-
text-transform: none;
24-
line-height: 1;
19+
font-family: 'solidusicons';
20+
speak: none;
21+
font-style: normal;
22+
font-weight: normal;
23+
font-variant: normal;
24+
text-transform: none;
25+
line-height: 1;
2526

26-
/* Better Font Rendering =========== */
27-
-webkit-font-smoothing: antialiased;
28-
-moz-osx-font-smoothing: grayscale;
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
2929
}
3030

31-
[class^="icon-"]:before {
31+
[class^="icon-"]:before {
3232
margin-right: 1em;
3333
}
3434

3535
.icon-console:before {
36-
content: "\e603";
36+
content: "\e603";
3737
}
3838
.icon-info:before {
39-
content: "\e601";
39+
content: "\e601";
40+
}
41+
.icon-clear:before {
42+
content: "\e600";
4043
}
4144
.icon-json:before {
42-
content: "\e602";
45+
content: "\e602";
4346
}
4447

4548

4649
.scroll-panel {
47-
height: 100%;
4850
overflow: scroll;
51+
border-top-color: #E6E6E6;
52+
padding: 10px;
53+
}
54+
55+
pre.scroll-panel {
56+
border-width: 1px 0 0 0;
57+
font-size: 11px;
58+
font-family: Menlo, monospace;
59+
background: #fff;
60+
border-radius: 0;
61+
max-height: 90%;
4962
}
5063

5164
.sidetab-column {
5265
height: 100%;
5366
padding: 0;
5467
position: static;
55-
border-right: 1px solid #ddd;
68+
border-right: 1px solid #a3a3a3;
69+
background: #e8e8e8;
70+
width: 200px;
71+
}
72+
73+
.nav-tabs>li>a {
74+
font-size: 12px;
75+
line-height: 12px;
76+
color: #303942;
77+
border-radius: 0;
78+
border: 0;
79+
}
80+
81+
.nav-tabs>li>a:hover {
82+
border-right: 1px;
83+
border-right-color: #a3a3a3;
84+
background: inherit;
85+
}
86+
87+
.nav-tabs>li.active>a {
88+
background: #3879d9;
89+
border: 0;
90+
color: #fff;
91+
text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
92+
}
93+
94+
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
95+
border: 0;
96+
color: #fff;
97+
background: #3879d9;
5698
}
5799

58100
.panel-column {
59101
height: 100%;
60102
position: static;
61103
padding: 0;
62-
width: 70%;
63-
padding: 10px;
104+
width: 100%;
105+
float: none;
64106
}
65107

66108
.tab-content, .tab-pane {
67109
height: 100%;
68-
padding-bottom: 30px;
69110
}
70111

71112
.tab-pane :first-child {
72113
margin-top: 0;
73114
}
74115

75-
.inspector-json {
76-
padding: 0;
116+
.server-log-buttons {
117+
height: 23px;
118+
font-size: 12px;
119+
color: #303942;
120+
background: white;
121+
}
122+
123+
.server-log-buttons .btn {
124+
padding: 0 10px;
125+
line-height: 23px;
126+
border: 0;
127+
border-radius: 0;
128+
color: #676767;
129+
font-size: 14px;
77130
}
78131

79-
.btn-group {
80-
margin-bottom: 10px;
132+
.server-log-buttons .btn:hover {
133+
color: #404040;
134+
background-color: inherit;
81135
}
82136

83137
.tabs-left {

‎views/devpanel.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<body>
1616
<div class="sidetab-column col-xs-3">
1717
<ul class="nav nav-tabs tabs-left" id="panelTabs">
18-
<li><a href="#context" data-toggle="tab"><span class="icon-json"></span> Context</a></li>
18+
<li class="active"><a href="#context" data-toggle="tab"><span class="icon-json"></span> Context</a></li>
1919
<li><a href="#logs" data-toggle="tab"><span class="icon-console"></span> Logs</a></li>
2020
<li><a href="#info" data-toggle="tab"><span class="icon-info"></span> Info</a></li>
2121
</ul>
@@ -26,15 +26,17 @@
2626
<div id="pagecontext" class="scroll-panel"></div>
2727
</div>
2828
<div class="tab-pane" id="logs">
29-
<div class="btn-group">
30-
<button type="button" id="logclear" title="Clear server log." class="btn btn-default"><i class="glyphicon glyphicon-ban-circle"></i></button>
29+
<div class="btn-group server-log-buttons">
30+
<button type="button" id="logclear" title="Clear server log." class="btn btn-default"><span class="icon-clear"></span></button>
3131
</div>
3232
<pre id="serverlogs" class="scroll-panel"></pre>
3333
</div>
3434
<div class="tab-pane" id="info">
35-
<h3>Solidus DevTools v0.1.0</h3>
36-
<p>The site you are inspecting is <span id="pluginstatus">a mystery</span>.</p>
37-
<div id="messageholder"></div>
35+
<div class="scroll-panel">
36+
<h3>Solidus DevTools v0.1.0</h3>
37+
<p>The site you are inspecting is <span id="pluginstatus">a mystery</span>.</p>
38+
<div id="messageholder"></div>
39+
</div>
3840
</div>
3941
</div>
4042
</div>

‎views/devpanel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ function processMainIncomingMessage(msg) {
3838
destroyInspector();
3939
$('#panelTabs a[href="#info"]').tab('show');
4040
var contextPane = document.querySelector('#pagecontext');
41-
contextPane.innerHTML = 'No context. See Info tab.';
41+
var cStatus = createAlert('No context. See Info tab.', '', 'danger');
42+
contextPane.innerHTML = cStatus;
4243
break;
4344
case 'reload':
4445
clearAlerts();

‎views/solidusicons.woff‎

116 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)