Skip to content

Commit 050b51a

Browse files
MustafaHiMustafaHi
committed
Update #1 v1.0
μSciter : - Home page of last 5 opened projects (sorted by the most recent) - Home page button - Pin to top - Remove trayIcon on loading new project - Guide detached - Click on launch inspector to bring it front and focus command line - Close Inspector with uSciter - Visual fixes - Setting fixes Inspector : - CTRL + Click to open file links in VS Code - CTRL + Up/Down arrow scroll commands history - Group up CSS properties - Render SVG images - Render color - Double click on color to copy it - Command line fixed to bottom - Tab key to focus command line - Visual improvements - Fix sources doubling - Fix uSciter sources showing up in other projects
1 parent 1e8a657 commit 050b51a

21 files changed

Lines changed: 436 additions & 319 deletions

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
# Sciter-Dev-Tool-Kit
1+
# Sciter-Dev-Tool-Kit
2+
3+
Sciter Developer tool Kit (SDTK)
4+
Brings quality-of-life improvements and fixes to [Sciter](https://sciter.com/)'s μSciter and Inspector.
5+
For more details check the links below
6+
7+
8+
> Version : 1.0
9+
> [Binary Release](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/releases)
10+
> [Change Log](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/wiki/Change-log)
11+
> [Dev Guide](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/wiki/Dev-Guide)
12+
> More information in the [wiki](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/wiki)
13+
14+
This is an open source project taking the original source from [Sciter](https://sciter.com/) and Improving upon it.
15+
You are welcome to [contribute](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/wiki/Dev-Guide) with any new features, fixes or ideas.
16+
If you face any issues [submit one](https://github.com/MustafaHi/Sciter-Dev-Tool-Kit/issues) with details.

‎inspector/res/dom-element-details.tis‎

Lines changed: 134 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22
class ElementDetails : Element
33
{
44
this var shownUID = null;
5+
var NotToDisplay = ["padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left",
6+
"border-top-left-radius-x", "border-top-left-radius-y", "border-top-right-radius-x", "border-top-right-radius-y",
7+
"border-bottom-left-radius-x", "border-bottom-left-radius-y", "border-bottom-right-radius-x", "border-bottom-right-radius-y",
8+
"background-position-top", "background-position-right", "background-position-bottom", "background-position-left",
9+
"foreground-position-top", "foreground-position-right", "foreground-position-bottom", "foreground-position-left",
10+
"border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
11+
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color",
12+
"border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
13+
"foreground-image", "background-image"
14+
];
515

616
function attached()
717
{
@@ -30,7 +40,69 @@ class ElementDetails : Element
3040
}
3141

3242
function detached() { this.driver.off(".element-details"); }
33-
43+
44+
function renderProps(props)
45+
{
46+
const usedStylesList = this.usedStylesList;
47+
48+
usedStylesList.clear();
49+
var props_names = [];
50+
if(props)
51+
for(var name in props) props_names.push(name);
52+
props_names.sort();
53+
54+
if(props) {
55+
var padding = [props["padding-top"], props["padding-right"], props["padding-bottom"], props["padding-left"]];
56+
debug: padding;
57+
if ((props["padding-top"] && props["padding-right"] && props["padding-bottom"] && props["padding-left"]) !== undefined) {
58+
usedStylesList.$append(<dt>Padding :</dt><dd>{ props["padding-top"].toCssString() } | {props["padding-right"].toCssString()} | {props["padding-bottom"].toCssString()} | {props["padding-left"].toCssString()}</dd>);
59+
}
60+
if ((props["margin-top"] && props["margin-right"] && props["margin-bottom"] && props["margin-left"]) !== undefined) {
61+
usedStylesList.$append(<dt>Margin :</dt><dd>{ props["margin-top"].toCssString() } | {props["margin-right"].toCssString()} | {props["margin-bottom"].toCssString()} | {props["margin-left"].toCssString()}</dd>);
62+
}
63+
if ((props["border-top-left-radius-x"] && props["border-top-left-radius-x"] && props["border-bottom-left-radius-x"] && props["border-bottom-left-radius-x"]) !== undefined) {
64+
usedStylesList.$append(<dt>Border-radius :</dt><dd>{ props["border-top-left-radius-x"].toCssString() } | {props["border-top-right-radius-x"].toCssString()} | {props["border-bottom-right-radius-x"].toCssString()} | {props["border-bottom-left-radius-x"].toCssString()}</dd>);
65+
}
66+
if ((props["border-top-width"] && props["border-top-style"] && props["border-top-color"]) !== undefined) {
67+
usedStylesList.$append(<dt>Border-top :</dt><dd>{ props["border-top-width"].toCssString() } {props["border-top-style"].toCssString()} <span style="color:{props["border-top-color"].toCssString()}">{props["border-top-color"].toCssString()}</span></dd>);
68+
}
69+
if ((props["border-right-width"] && props["border-right-style"] && props["border-right-color"]) !== undefined) {
70+
usedStylesList.$append(<dt>Border-right :</dt><dd>{ props["border-right-width"].toCssString() } {props["border-right-style"].toCssString()} <span style="color:{props["border-right-color"].toCssString()}">{props["border-right-color"].toCssString()}</span></dd>);
71+
}
72+
if ((props["border-bottom-width"] && props["border-bottom-style"] && props["border-bottom-color"]) !== undefined) {
73+
usedStylesList.$append(<dt>Border-bottom :</dt><dd>{ props["border-bottom-width"].toCssString() } {props["border-bottom-style"].toCssString()} <span style="color:{props["border-bottom-color"].toCssString()}">{props["border-bottom-color"].toCssString()}</span></dd>);
74+
}
75+
if ((props["border-left-width"] && props["border-left-style"] && props["border-left-color"]) !== undefined) {
76+
usedStylesList.$append(<dt>Border-left :</dt><dd>{ props["border-left-width"].toCssString() } {props["border-left-style"].toCssString()} <span style="color:{props["border-left-color"].toCssString()}">{props["border-left-color"].toCssString()}</span></dd>);
77+
}
78+
if ((props["background-position-top"] && props["background-position-right"] && props["background-position-bottom"] && props["background-position-left"]) !== undefined) {
79+
usedStylesList.$append(<dt>Background-position :</dt><dd>{ props["background-position-top"].toCssString() } | {props["background-position-right"].toCssString()} | {props["background-position-bottom"].toCssString()} | {props["background-position-left"].toCssString()}</dd>);
80+
}
81+
if ((props["foreground-position-top"] && props["foreground-position-right"] && props["foreground-position-bottom"] && props["foreground-position-left"]) !== undefined) {
82+
usedStylesList.$append(<dt>Foreground-position :</dt><dd>{ props["foreground-position-top"].toCssString() } | {props["foreground-position-right"].toCssString()} | {props["foreground-position-bottom"].toCssString()} | {props["foreground-position-left"].toCssString()}</dd>);
83+
}
84+
if (props["background-image"] !== undefined) {
85+
if (props["background-image"][4] == ":") { usedStylesList.$append(<dt>Background-image</dt><dd><img src="{props["background-image"]}" style="max-width:40dip; fill:#777;"/></dd>); }
86+
else { usedStylesList.$append(<dt>Background-image</dt><dd>{props["background-image"]}</dd>); }
87+
}
88+
if (props["foreground-image"] !== undefined) {
89+
if (props["foreground-image"][4] == ":") { usedStylesList.$append(<dt>Foreground-image</dt><dd><img src="{props["foreground-image"]}" style="max-width:40dip; fill:#777;"/></dd>); }
90+
else { usedStylesList.$append(<dt>Foreground-image</dt><dd>{props["foreground-image"]}</dd>); }
91+
}
92+
}
93+
94+
for(var name in props_names) {
95+
var prop_val = props[name];
96+
if( prop_val !== undefined && prop_val !== null && NotToDisplay.indexOf(name) == -1 ) {
97+
if(name.indexOf("color") !== -1 || name.indexOf("fill") !== -1 || name.indexOf("stroke") !== -1) {
98+
usedStylesList.$append(<dt>{name}:</dt><dd style="color: {prop_val.toCssString()}">{ prop_val.toCssString() }</dd>);
99+
} else { usedStylesList.$append(<dt>{name}:</dt><dd>{ prop_val }</dd>); }
100+
// } else { usedStylesList.$append(<dt>{name}:</dt><dd>{ prop_val.toCssString() }</dd>); }
101+
// .toCssString() don't do shit
102+
}
103+
}
104+
usedStylesList.parent.attributes.toggleClass("no-items", props_names.length == 0);
105+
}
34106
function renderStyleRules(rules)
35107
{
36108
const styleRulesList = this.styleRulesList;
@@ -54,38 +126,62 @@ class ElementDetails : Element
54126
var props_names = [];
55127
for(var name in props) props_names.push(name);
56128
props_names.sort();
129+
130+
if(props) {
131+
if ((props["padding-top"] && props["padding-right"] && props["padding-bottom"] && props["padding-left"]) !== undefined) {
132+
styleRulesList.$append(<dt>Padding :</dt><dd>{ props["padding-top"].toCssString() } | {props["padding-right"].toCssString()} | {props["padding-bottom"].toCssString()} | {props["padding-left"].toCssString()}</dd>);
133+
}
134+
if ((props["margin-top"] && props["margin-right"] && props["margin-bottom"] && props["margin-left"]) !== undefined) {
135+
styleRulesList.$append(<dt>Margin :</dt><dd>{ props["margin-top"].toCssString() } | {props["margin-right"].toCssString()} | {props["margin-bottom"].toCssString()} | {props["margin-left"].toCssString()}</dd>);
136+
}
137+
if ((props["border-top-left-radius-x"] && props["border-top-left-radius-x"] && props["border-bottom-left-radius-x"] && props["border-bottom-left-radius-x"]) !== undefined) {
138+
styleRulesList.$append(<dt>Border-radius :</dt><dd>{ props["border-top-left-radius-x"].toCssString() } | {props["border-top-right-radius-x"].toCssString()} | {props["border-bottom-right-radius-x"].toCssString()} | {props["border-bottom-left-radius-x"].toCssString()}</dd>);
139+
}
140+
if ((props["border-top-width"] && props["border-top-style"] && props["border-top-color"]) !== undefined) {
141+
styleRulesList.$append(<dt>Border-top :</dt><dd>{ props["border-top-width"].toCssString() } {props["border-top-style"].toCssString()} <span style="color:{props["border-top-color"].toCssString()}">{props["border-top-color"].toCssString()}</span></dd>);
142+
}
143+
if ((props["border-right-width"] && props["border-right-style"] && props["border-right-color"]) !== undefined) {
144+
styleRulesList.$append(<dt>Border-right :</dt><dd>{ props["border-right-width"].toCssString() } {props["border-right-style"].toCssString()} <span style="color:{props["border-right-color"].toCssString()}">{props["border-right-color"].toCssString()}</span></dd>);
145+
}
146+
if ((props["border-bottom-width"] && props["border-bottom-style"] && props["border-bottom-color"]) !== undefined) {
147+
styleRulesList.$append(<dt>Border-bottom :</dt><dd>{ props["border-bottom-width"].toCssString() } {props["border-bottom-style"].toCssString()} <span style="color:{props["border-bottom-color"].toCssString()}">{props["border-bottom-color"].toCssString()}</span></dd>);
148+
}
149+
if ((props["border-left-width"] && props["border-left-style"] && props["border-left-color"]) !== undefined) {
150+
styleRulesList.$append(<dt>Border-left :</dt><dd>{ props["border-left-width"].toCssString() } {props["border-left-style"].toCssString()} <span style="color:{props["border-left-color"].toCssString()}">{props["border-left-color"].toCssString()}</span></dd>);
151+
}
152+
if ((props["background-position-top"] && props["background-position-right"] && props["background-position-bottom"] && props["background-position-left"]) !== undefined) {
153+
styleRulesList.$append(<dt>Background-position :</dt><dd>{ props["background-position-top"].toCssString() } | {props["background-position-right"].toCssString()} | {props["background-position-bottom"].toCssString()} | {props["background-position-left"].toCssString()}</dd>);
154+
}
155+
if ((props["foreground-position-top"] && props["foreground-position-right"] && props["foreground-position-bottom"] && props["foreground-position-left"]) !== undefined) {
156+
usedStylesList.$append(<dt>Foreground-position :</dt><dd>{ props["foreground-position-top"].toCssString() } | {props["foreground-position-right"].toCssString()} | {props["foreground-position-bottom"].toCssString()} | {props["foreground-position-left"].toCssString()}</dd>);
157+
}
158+
if (props["background-image"] !== undefined) {
159+
if (props["background-image"][4] == ":") { styleRulesList.$append(<dt>Background-image</dt><dd><img src="{props["background-image"]}" style="max-width:40dip; fill:#777;"/></dd>); }
160+
else { styleRulesList.$append(<dt>Background-image</dt><dd>{props["background-image"]}</dd>); }
161+
}
162+
if (props["foreground-image"] !== undefined) {
163+
if (props["foreground-image"][4] == ":") { styleRulesList.$append(<dt>Foreground-image</dt><dd><img src="{props["foreground-image"]}" style="max-width:40dip; fill:#777;"/></dd>); }
164+
else { styleRulesList.$append(<dt>Foreground-image</dt><dd>{props["foreground-image"]}</dd>); }
165+
}
166+
}
167+
57168
for(var name in props_names) {
58169
var prop_val = props[name];
59-
if( prop_val !== undefined && prop_val !== null) {
170+
if( prop_val !== undefined && prop_val !== null && NotToDisplay.indexOf(name) == -1) {
60171
if(typeof prop_val == #tuple && prop_val.tag == symbol("!important"))
61172
styleRulesList.$append(<dt>{name}:</dt><dd>{ prop_val[0].toCssString() } !important</dd>);
173+
else if(name.indexOf("color") !== -1 || name.indexOf("fill") !== -1 || name.indexOf("stroke") !== -1)
174+
styleRulesList.$append(<dt>{name}:</dt><dd style="color:{prop_val.toCssString()}">{ prop_val.toCssString() }</dd>);
62175
else
63-
styleRulesList.$append(<dt>{name}:</dt><dd>{ prop_val.toCssString() }</dd>);
176+
styleRulesList.$append(<dt>{name}:</dt><dd>{ prop_val }</dd>);
177+
// styleRulesList.$append(<dt>{name}:</dt><dd>{ prop_val.toCssString() }</dd>);
64178
}
65179
}
66180
++cnt;
67181
}
68182
styleRulesList.parent.attributes.toggleClass("no-items", cnt == 0);
69183
}
70184

71-
function renderProps(props)
72-
{
73-
const usedStylesList = this.usedStylesList;
74-
75-
usedStylesList.clear();
76-
var props_names = [];
77-
if(props)
78-
for(var name in props) props_names.push(name);
79-
props_names.sort();
80-
for(var name in props_names) {
81-
var prop_val = props[name];
82-
if( prop_val !== undefined && prop_val !== null) {
83-
usedStylesList.$append(<dt>{name}:</dt><dd>{ prop_val.toCssString() }</dd>);
84-
}
85-
}
86-
usedStylesList.parent.attributes.toggleClass("no-items", props_names.length == 0);
87-
}
88-
89185
function renderStates(states)
90186
{
91187
const statesList = this.statesList;
@@ -115,26 +211,26 @@ class ElementDetails : Element
115211
function renderMetrics(metrics)
116212
{
117213
this.metricsForm.value = {
118-
ml: metrics.margin[0] || "-",
119-
mt: metrics.margin[1] || "-",
120-
mr: metrics.margin[2] || "-",
121-
mb: metrics.margin[3] || "-",
122-
bl: metrics.border[0] || "-",
123-
bt: metrics.border[1] || "-",
124-
br: metrics.border[2] || "-",
125-
bb: metrics.border[3] || "-",
214+
ml: metrics.margin[0] || "-",
215+
mt: metrics.margin[1] || "-",
216+
mr: metrics.margin[2] || "-",
217+
mb: metrics.margin[3] || "-",
218+
bl: metrics.border[0] || "-",
219+
bt: metrics.border[1] || "-",
220+
br: metrics.border[2] || "-",
221+
bb: metrics.border[3] || "-",
126222
pl: metrics.padding[0] || "-",
127223
pt: metrics.padding[1] || "-",
128224
pr: metrics.padding[2] || "-",
129225
pb: metrics.padding[3] || "-",
130-
x : metrics.inner[0] || "-",
131-
y : metrics.inner[1] || "-",
132-
w : metrics.inner[2] || "-",
133-
h : metrics.inner[3] || "-",
134-
minx: metrics.intrinsics[0],
135-
miny: metrics.intrinsics[1],
136-
maxx: metrics.intrinsics[2],
137-
maxy: metrics.intrinsics[3],
226+
x : metrics.inner[0] || "-",
227+
y : metrics.inner[1] || "-",
228+
w : metrics.inner[2] || "-",
229+
h : metrics.inner[3] || "-",
230+
minx: metrics.intrinsics[0] || "-",
231+
miny: metrics.intrinsics[1] || "-",
232+
maxx: metrics.intrinsics[2] || "-",
233+
maxy: metrics.intrinsics[3] || "-"
138234
};
139235
}
140236

@@ -177,5 +273,5 @@ class ElementDetails : Element
177273
}
178274
*/
179275
}
180-
276+
event dblclick $(span, dd[style]) (e, it) { view.clipboard(#put, it.value); }
181277
}

0 commit comments

Comments
 (0)