Skip to content
This repository was archived by the owner on Nov 5, 2024. It is now read-only.

Commit e729ea6

Browse files
mallowigimallowigi
committed
fix toolbar, sidebar and add keybindings
1 parent 888a639 commit e729ea6

16 files changed

+6804
-296
lines changed

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"printWidth": 120,
4+
"semi": true,
5+
"plugins": ["stylelint"]
6+
}

‎.stylelintrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"plugins": ["stylelint-prettier"],
3+
"rules": {
4+
"prettier/prettier": true,
5+
"color-hex-length": "short",
6+
"string-quotes": "single",
7+
"number-leading-zero": "always",
8+
"selector-list-comma-newline-after": "always"
9+
}
10+
}

‎background.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,14 @@
133133
primary,
134134
selectBg,
135135
selectFg,
136+
selectFg2,
136137
button,
137138
disabled,
138139
contrast,
139140
second,
140141
darkerBg = contrast,
141142
lighterBg = second,
143+
table,
142144
border,
143145
highlight,
144146
tree,
@@ -166,16 +168,16 @@
166168
return `
167169
:root {
168170
--bg: ${background};
169-
--contrast: ${darkerBg};
170-
--second: ${lighterBg};
171171
--fg: ${foreground};
172172
--text: ${primary};
173173
--selBg: ${selectBg};
174174
--selFg: ${selectFg};
175+
--selFg2: ${selectFg2};
175176
--button: ${button};
176177
--disabled: ${disabled};
177178
--contrast: ${contrast};
178179
--second: ${second};
180+
--active: ${table};
179181
--border: ${border};
180182
--hl: ${highlight};
181183
--tree: ${tree};
@@ -194,9 +196,9 @@
194196
--strings: ${strings};
195197
--numbers: ${numbers};
196198
--links: ${links};
197-
--fg: ${foreground};
198199
--parameters: ${parameters};
199200
201+
--ui-font-family: Roboto, Helvetica Neue, Arial, sans-serif;
200202
--font-family: ${fontFamily}, Menlo, Consolas, "Fira Code", monospace;
201203
--font-size: ${fontSize || 10}px;
202204
}

‎new/app/themed/_index.scss

+28-27
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
@import "accessibility/index";
2-
@import "animation/index";
3-
@import "audits/index";
4-
@import "browser_debugger/index";
5-
@import "codemirror/index";
6-
@import "colorpicker/index";
7-
@import "console/index";
8-
@import "data_grid/index";
9-
@import "elements/index";
10-
@import "help/index";
11-
@import "inline_editor/index";
12-
@import "inspector_main/index";
13-
@import "network/index";
14-
@import "object_ui/index";
15-
@import "perf_ui/index";
16-
@import "product_registry/index";
17-
@import "profiler/index";
18-
@import "quick_open/index";
19-
@import "resources/index";
20-
@import "search/index";
21-
@import "security/index";
22-
@import "settings/index";
23-
@import "source_frame/index";
24-
@import "sources/index";
25-
@import "text_editor/index";
26-
@import "timeline/index";
27-
@import "ui/index";
1+
@import 'accessibility/index';
2+
@import 'animation/index';
3+
@import 'audits/index';
4+
@import 'browser_debugger/index';
5+
@import 'codemirror/index';
6+
@import 'colorpicker/index';
7+
@import 'console/index';
8+
@import 'data_grid/index';
9+
@import 'elements/index';
10+
@import 'help/index';
11+
@import 'inline_editor/index';
12+
@import 'inspector_main/index';
13+
@import 'keybinds/index';
14+
@import 'network/index';
15+
@import 'object_ui/index';
16+
@import 'perf_ui/index';
17+
@import 'product_registry/index';
18+
@import 'profiler/index';
19+
@import 'quick_open/index';
20+
@import 'resources/index';
21+
@import 'search/index';
22+
@import 'security/index';
23+
@import 'settings/index';
24+
@import 'source_frame/index';
25+
@import 'sources/index';
26+
@import 'text_editor/index';
27+
@import 'timeline/index';
28+
@import 'ui/index';

‎new/app/themed/elements/_stylesSidebarPane.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.styles-section {
2+
border-color: $borderLight;
3+
}
4+
15
.styles-section.read-only {
26
background: $second;
37
}

‎new/app/themed/keybinds/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'keybindsSettingsTab';

‎new/app/themed/keybinds/_keybindsSettingsTab.scss

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
header {
2+
border-bottom-color: $borderLight;
3+
}
4+
5+
.keybinds-key {
6+
border-top-color: $borderLight;
7+
border-right-color: $borderLight;
8+
border-bottom-color: $borderLight;
9+
border-left-color: $borderLight;
10+
background-color: $button;
11+
color: $fg;
12+
}
13+
14+
.keybinds-list-item:focus-visible {
15+
background-color: $highlight;
16+
}
17+
18+
.keybinds-list-item.keybinds-editing {
19+
background-color: $contrast;
20+
}
21+
22+
.keybinds-error {
23+
color: $error-color;
24+
}
25+
26+
.keybinds-list-item button:hover .icon-mask {
27+
background-color: $accent1;
28+
}
29+
30+
.keybinds-list-item button:focus-visible {
31+
background-color: $highlight;
32+
}
33+
34+
.keybinds-list-text {
35+
color: $text;
36+
}
37+
38+
.keybinds-category-header:not(:nth-child(2)) {
39+
border-top-color: $borderLight;
40+
}
41+
42+
.keybinds-list-item:not(.keybinds-category-header):hover {
43+
background-color: $second;
44+
}
45+
46+
.keybinds-set-select label p {
47+
color: $fg;
48+
}

‎new/app/themed/ui/_inspectorCommon.scss

+24-13
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,6 @@ input {
4444
-webkit-box-shadow: none !important;
4545
}
4646

47-
48-
4947
::-webkit-scrollbar-thumb:hover {
5048
background: $accent1 !important;
5149
}
@@ -104,8 +102,7 @@ input {
104102
background-color: $selBg;
105103
}
106104

107-
108-
input[type="radio"]:focus {
105+
input[type='radio']:focus {
109106
outline-color: $accent1;
110107
}
111108

@@ -122,14 +119,14 @@ input {
122119
}
123120

124121
.harmony-input:not([type]):not(.error-input):not(:invalid):hover,
125-
.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,
126-
.harmony-input[type="text"]:not(.error-input):not(:invalid):hover {
122+
.harmony-input[type='number']:not(.error-input):not(:invalid):hover,
123+
.harmony-input[type='text']:not(.error-input):not(:invalid):hover {
127124
box-shadow: none;
128125
}
129126

130127
.harmony-input:not([type]):not(.error-input):not(:invalid):focus,
131-
.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,
132-
.harmony-input[type="text"]:not(.error-input):not(:invalid):focus {
128+
.harmony-input[type='number']:not(.error-input):not(:invalid):focus,
129+
.harmony-input[type='text']:not(.error-input):not(:invalid):focus {
133130
box-shadow: none;
134131
}
135132

@@ -138,11 +135,11 @@ input {
138135
}
139136

140137
.harmony-input:not([type]).error-input,
141-
.harmony-input[type="number"].error-input,
142-
.harmony-input[type="text"].error-input,
138+
.harmony-input[type='number'].error-input,
139+
.harmony-input[type='text'].error-input,
143140
.harmony-input:not([type]):invalid,
144-
.harmony-input[type="number"]:invalid,
145-
.harmony-input[type="text"]:invalid {
141+
.harmony-input[type='number']:invalid,
142+
.harmony-input[type='text']:invalid {
146143
box-shadow: $error-color 0px 0px 0px 1px;
147144
}
148145

@@ -203,6 +200,20 @@ input {
203200
color: $selFg;
204201
}
205202

206-
button.link[data-keyboard-focus="true"]:focus {
203+
button.link[data-keyboard-focus='true']:focus {
207204
background-color: $highlight;
208205
}
206+
207+
button {
208+
background: $button;
209+
color: $foreground;
210+
font-family: $uiFontFamily;
211+
cursor: pointer;
212+
border-color: $button;
213+
border-style: solid;
214+
215+
&:hover {
216+
background: $hl;
217+
color: $selFg;
218+
}
219+
}

‎new/app/themed/ui/_toolbar.scss

+15-11
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
}
2626

2727
.toolbar-toggled-gray:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu):hover {
28-
background-color: var(--toolbar-bg-color);
28+
background-color: $contrast;
29+
border-color: $contrast;
2930
}
3031

3132
.toolbar-glyph {
@@ -67,15 +68,15 @@
6768

6869
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph,
6970
.toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active:hover {
70-
background-color: $accent1;
71+
background-color: $accent2;
7172
}
7273

7374
.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text {
74-
color: $accent1;
75+
color: $accent2;
7576
}
7677

7778
.toolbar-toggled-gray .toolbar-button.toolbar-state-on {
78-
background-color: var(--toolbar-bg-color) !important;
79+
background-color: $highlight !important;
7980
}
8081

8182
.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
@@ -87,11 +88,11 @@
8788
color: $foreground;
8889
}
8990

90-
select.toolbar-item[data-keyboard-focus="true"]:focus {
91+
select.toolbar-item[data-keyboard-focus='true']:focus {
9192
background-color: $active;
9293
}
9394

94-
select.toolbar-item[data-keyboard-focus="true"]:focus > * {
95+
select.toolbar-item[data-keyboard-focus='true']:focus > * {
9596
background-color: $background;
9697
}
9798

@@ -135,7 +136,7 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
135136
background-color: $active;
136137
}
137138

138-
.toolbar-button[data-keyboard-focus="true"]:focus::after {
139+
.toolbar-button[data-keyboard-focus='true']:focus::after {
139140
background-color: $highlight;
140141
opacity: 0.5;
141142
}
@@ -145,12 +146,12 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
145146
border-color: $border;
146147
}
147148

148-
input[is="history-input"]:hover {
149+
input[is='history-input']:hover {
149150
box-shadow: var(--focus-ring-inactive-shadow);
150151
}
151152

152-
input[is="history-input"]:focus,
153-
input[is="history-input"]:not(:placeholder-shown) {
153+
input[is='history-input']:focus,
154+
input[is='history-input']:not(:placeholder-shown) {
154155
box-shadow: none;
155156
border-bottom-color: $accent1;
156157
}
@@ -160,11 +161,14 @@ input[is="history-input"]:not(:placeholder-shown) {
160161
}
161162

162163
.toolbar-item.toolbar-button:not(.toolbar-has-dropdown) {
164+
background: $contrast;
163165
color: $foreground;
166+
border-color: $contrast;
164167

165168
&:hover {
166-
background-image: radial-gradient(circle at center, $highlight 60%, rgba(0,0,0,0) 0) !important;
169+
background-image: radial-gradient(circle at center, $highlight 60%, rgba(0, 0, 0, 0) 0) !important;
167170
opacity: .8;
171+
color: $selFg !important;
168172

169173
> * {
170174
color: $selFg !important;

‎new/dark.scss

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
$bg: var(--bg);
12
$background: var(--bg);
23
$darkerBg: var(--contrast);
34
$lighterBg: var(--second);
5+
$fg: var(--fg);
46
$foreground: var(--fg);
57
$primary: var(--text);
8+
$text: var(--text);
69
$selBg: var(--selBg);
710
$selBgAlpha: var(--selBgAlpha);
811
$selFg: var(--selFg);
@@ -13,28 +16,40 @@ $second: var(--second);
1316
$active: var(--active);
1417
$border: var(--border);
1518
$borderLight: var(--active);
19+
$hl: var(--hl);
1620
$highlight: var(--hl);
1721
$tree: var(--tree);
1822
$notif: var(--notif);
1923
$excluded: var(--excluded);
2024
$excludedAlpha: var(--excludedAlpha);
2125
$accent1: var(--accent);
22-
$accent1Alpha: var(--accentAlpha);
23-
$accent2: var(--accent2);
24-
$accent2Alpha: var(--accent2Alpha);
25-
$accent3: var(--accent3);
26+
$accent1Alpha: var(--accent);
27+
$accent2: var(--links);
28+
$accent2Alpha: var(--links);
29+
$accent3: var(--tags);
2630

2731
$tag-name-color: var(--tags);
32+
$tags: var(--tags);
2833
$attribute-name-color: var(--attributes);
34+
$attributes: var(--attributes);
2935
$comment-color: var(--comments);
36+
$comments: var(--comments);
3037
$keyword-color: var(--keywords);
38+
$keywords: var(--keywords);
3139
$var-color: var(--vars);
40+
$vars: var(--vars);
3241
$error-color: var(--errors);
42+
$errors: var(--errors);
3343
$operator-color: var(--operators);
44+
$operators: var(--operators);
3445
$function-color: var(--functions);
46+
$functions: var(--functions);
3547
$string-color: var(--strings);
48+
$strings: var(--strings);
3649
$number-color: var(--numbers);
50+
$numbers: var(--numbers);
3751
$link-color: var(--links);
52+
$links: var(--links);
3853
$text-color: var(--text-color);
3954
$ignored-color: var(--ignored-color);
4055
$uiFontFamily: var(--ui-font-family, Roboto, sans-serif);

0 commit comments

Comments
 (0)