Improved visual style of Profiling-disabled button
Brian Vaughn committed
May 23, 2019 at 08:52 UTC
74d8207e06afb484bc2714cf2c43f1480f150577
2 files changed
+21
-3
src/devtools/views/Profiler/RecordToggle.css
+13
@@ -23,3 +23,16 @@
23
.InactiveRecordToggle:active {
24
color: var(--color-record-hover);
25
}
26
+
27
+.DisabledRecordToggle {
28
+ color: var(--color-button-disabled);
29
+}
30
+.DisabledRecordToggle:hover {
31
+ color: var(--color-button-disabled);
32
+}
33
+.DisabledRecordToggle:focus {
34
+ color: var(--color-button-disabled);
35
+}
36
+.DisabledRecordToggle:active {
37
+ color: var(--color-button-disabled);
38
+}
src/devtools/views/Profiler/RecordToggle.js
+8
-3
@@ -16,11 +16,16 @@ export default function RecordToggle({ disabled }: Props) {
16
ProfilerContext
17
);
18
19
+ let className = styles.InactiveRecordToggle;
20
+ if (disabled) {
21
+ className = styles.DisabledRecordToggle;
22
+ } else if (isProfiling) {
23
+ className = styles.ActiveRecordToggle;
24
+ }
25
+
26
return (
27
<Button
21
- className={
22
- isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
23
- }
28
+ className={className}
29
disabled={disabled}
30
onClick={isProfiling ? stopProfiling : startProfiling}
31
title={isProfiling ? 'Stop profiling' : 'Start profiling'}