maxjhandsome
/
react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
react/packages/react-devtools-shared/src/devtools/views/root.css

290 lines
14 KiB
CSS
Raw Normal View History

Added stub search row (not connected to anythign yet)
2019-02-01 01:42:07 +08:00
:root {
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
/**
* IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
*/
Cleaned up style vars
2019-02-05 19:23:37 +08:00
/* Light theme */
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-attribute-name: #ef6632;
DevTools editable props tweaks (#18954) 1. Made non-editable prop text higher contrast (easier to read) 2. Also makes it stand out as different from dimmer placeholder text for "new prop"
2020-05-20 00:42:00 +08:00
--light-color-attribute-name-not-editable: #23272f;
Added HOC badge to owners stack breadcrumbs
2019-06-02 09:05:59 +08:00
--light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-attribute-value: #1a1aa6;
Added HOC badge to owners stack breadcrumbs
2019-06-02 09:05:59 +08:00
--light-color-attribute-value-inverted: #ffffff;
Support editable props, state, and context values
2019-02-18 05:07:39 +08:00
--light-color-attribute-editable-value: #1a1aa6;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-background: #ffffff;
Tweaked guideline background color style
2019-06-02 00:34:39 +08:00
--light-color-background-hover: rgba(0, 136, 250, 0.1);
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--light-color-background-inactive: #e5e5e5;
Standalone NPM packages and React Native support (#335) * Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage. * Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed. * Adds support for React Native (paper renderer) * Adds a style editor for react-native and react-native-web
2019-07-14 01:05:04 +08:00
--light-color-background-invalid: #fff0f0;
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--light-color-background-selected: #0088fa;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-button-background: #ffffff;
Tweaking focus/active colors and only showing focus rect on tab
2019-04-21 06:44:24 +08:00
--light-color-button-background-focus: #ededed;
--light-color-button: #5f6673;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-button-disabled: #cfd1d5;
Tweaking focus/active colors and only showing focus rect on tab
2019-04-21 06:44:24 +08:00
--light-color-button-active: #0088fa;
Tweaked hover and focus colors. Temporarily disabled Tooltip.
2019-04-21 23:23:20 +08:00
--light-color-button-focus: #23272f;
--light-color-button-hover: #23272f;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-border: #eeeeee;
Improve scanning Profiler chart for deep renders
2019-05-16 05:15:14 +08:00
--light-color-commit-did-not-render-fill: #cfd1d5;
--light-color-commit-did-not-render-fill-text: #000000;
--light-color-commit-did-not-render-pattern: #cfd1d5;
Tweaked did-not-render text color to be slightly dimmer
2019-05-22 23:32:10 +08:00
--light-color-commit-did-not-render-pattern-text: #333333;
Plugged react-window into commit selector
2019-03-14 05:57:52 +08:00
--light-color-commit-gradient-0: #37afa9;
--light-color-commit-gradient-1: #63b19e;
--light-color-commit-gradient-2: #80b393;
--light-color-commit-gradient-3: #97b488;
--light-color-commit-gradient-4: #abb67d;
--light-color-commit-gradient-5: #beb771;
--light-color-commit-gradient-6: #cfb965;
--light-color-commit-gradient-7: #dfba57;
--light-color-commit-gradient-8: #efbb49;
--light-color-commit-gradient-9: #febc38;
Implemented ranked chart
2019-03-17 05:06:41 +08:00
--light-color-commit-gradient-text: #000000;
Improve contrast for light mode
2019-04-18 02:40:55 +08:00
--light-color-component-name: #6a51b2;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-component-name-inverted: #ffffff;
Batched tweaks and bug fixes: 1. Bugfix: Hide tree grouping/background coloring when inside of collapsed subtree. 2. Bugfix: Don't measure and udpate indentation when Components tab is hidden. 3. Tweak: Lower background color for selected subtree in light theme to increase contrast for text. 4. Tweak: Remove FB-specific displayName check/hack since we will address that by modifying the internal require JS transform.
2019-06-04 03:47:26 +08:00
--light-color-component-badge-background: rgba(0, 0, 0, 0.1);
CSS tweaks
2019-05-14 05:51:56 +08:00
--light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
Refactored badges to share code and show +count
2019-06-02 09:48:24 +08:00
--light-color-component-badge-count: #777d88;
--light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
Expose DEV-mode warnings in devtools UI (#20463) Co-authored-by: Brian Vaughn <bvaughn@fb.com>
2020-12-23 00:09:29 +08:00
--light-color-console-error-badge-text: #ffffff;
--light-color-console-error-background: #fff0f0;
--light-color-console-error-border: #ffd6d6;
--light-color-console-error-icon: #eb3941;
--light-color-console-error-text: #fe2e31;
--light-color-console-warning-badge-text: #000000;
--light-color-console-warning-background: #fffbe5;
--light-color-console-warning-border: #fff5c1;
--light-color-console-warning-icon: #f4bd00;
--light-color-console-warning-text: #64460c;
DevTools context menu (#17608) * Added rudimentary context menu hook and menu UI * Added backend support for copying a value at a specific path for the inspected element * Added backend support for storing a value (at a specified path) as a global variable * Added special casing to enable copying undefined/unserializable values to the clipboard * Added copy and store-as-global context menu options to selected element props panel * Store global variables separately, with auto-incremented name (like browsers do) * Added tests for new copy and store-as-global backend functions * Fixed some ownerDocument/contentWindow edge cases * Refactored context menu to support dynamic options Used this mechanism to add a conditional menu option for inspecting the current value (if it's a function) * Renamed "safeSerialize" to "serializeToString" and added inline comment
2019-12-19 04:12:34 +08:00
--light-color-context-background: rgba(0,0,0,.9);
--light-color-context-background-hover: rgba(255, 255, 255, 0.1);
--light-color-context-background-selected: #178fb9;
--light-color-context-border: #3d424a;
--light-color-context-text: #ffffff;
--light-color-context-text-selected: #ffffff;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-dim: #777d88;
--light-color-dimmer: #cfd1d5;
--light-color-dimmest: #eff0f1;
DevTools: Improve error boundary (#18956) 1. Add support for dark mode 2. Add retry option for case where Profiler data is corrupted
2020-05-22 02:21:22 +08:00
--light-color-error-background: hsl(0, 100%, 97%);
--light-color-error-border: hsl(0, 100%, 92%);
--light-color-error-text: #ff0000;
Added new color-expand-collapse-toggle CSS var
2019-04-11 02:03:32 +08:00
--light-color-expand-collapse-toggle: #777d88;
DevTools: Improve error boundary (#18956) 1. Add support for dark mode 2. Add retry option for case where Profiler data is corrupted
2020-05-22 02:21:22 +08:00
--light-color-link: #0000ff;
Store screenshots after each commit when profiling
2019-04-03 06:04:04 +08:00
--light-color-modal-background: rgba(255, 255, 255, 0.75);
DevTools: Add Bridge protocol version backend/frontend (#21331) Add an explicit Bridge protocol version to the frontend and backend components as well as a check during initialization to ensure that both are compatible. If not, the frontend will display either upgrade or downgrade instructions. Note that only the `react-devtools-core` (React Native) and `react-devtools-inline` (Code Sandbox) packages implement this check. Browser extensions inject their own backend and so the check is unnecessary. (Arguably the `react-devtools-inline` check is also unlikely to be necessary _but_ has been added as an extra guard for use cases such as Replay.io.)
2021-04-28 05:26:07 +08:00
--light-color-bridge-version-npm-background: #eff0f1;
--light-color-bridge-version-npm-text: #000000;
--light-color-bridge-version-number: #0088fa;
Fixed primitive hook badge colors for light theme (#21034)
2021-03-19 21:52:59 +08:00
--light-color-primitive-hook-badge-background: #e5e5e5;
--light-color-primitive-hook-badge-text: #5f6673;
Initial profiling shell added Lots of TODOs and unfinished views here.
2019-03-11 00:01:05 +08:00
--light-color-record-active: #fc3a4b;
Added export and clear buttons for Profiler, cleaned up record toggle
2019-03-31 00:01:52 +08:00
--light-color-record-hover: #3578e5;
--light-color-record-inactive: #0088fa;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-resize-bar: #eeeeee;
--light-color-resize-bar-active: #dcdcdc;
--light-color-resize-bar-border: #d1d1d1;
--light-color-resize-bar-dot: #333333;
Scheduling profiler: Improve native events UI (#21966) Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)
2021-07-27 07:30:43 +08:00
--light-color-scheduling-profiler-native-event: #ccc;
--light-color-scheduling-profiler-native-event-hover: #aaa;
[DevTools] Add native events to the scheduling profiler (#21947)
2021-07-26 22:36:16 +08:00
--light-color-scheduling-profiler-priority-background: #f6f6f6;
--light-color-scheduling-profiler-priority-border: #eeeeee;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--light-color-scheduling-profiler-user-timing: #c9cacd;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-scheduling-profiler-user-timing-hover: #93959a;
--light-color-scheduling-profiler-react-idle: #d3e5f6;
--light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--light-color-scheduling-profiler-react-render: #9fc3f3;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-scheduling-profiler-react-render-hover: #83afe9;
--light-color-scheduling-profiler-react-commit: #c88ff0;
--light-color-scheduling-profiler-react-commit-hover: #b281d6;
--light-color-scheduling-profiler-react-layout-effects: #b281d6;
--light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
--light-color-scheduling-profiler-react-passive-effects: #b281d6;
--light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--light-color-scheduling-profiler-react-schedule: #9fc3f3;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-scheduling-profiler-react-schedule-hover: #2683E2;
--light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
--light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
--light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
--light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
--light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
--light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
Scheduling profiler: Improve native events UI (#21966) Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)
2021-07-27 07:30:43 +08:00
--light-color-scheduling-profiler-text-color: #000000;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-scheduling-profiler-react-work-border: #ffffff;
Fixed an overflow bug. Added mode-specific CSS style for Firefox.
2019-06-07 01:39:07 +08:00
--light-color-scroll-thumb: #c2c2c2;
--light-color-scroll-track: #fafafa;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--light-color-search-match: yellow;
--light-color-search-match-current: #f7923b;
Make children selection lighter
2019-06-11 10:10:24 +08:00
--light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
Renamed <Guideline> to <SelectedTreeHighlight>
2019-06-04 00:39:31 +08:00
--light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-scroll-caret: rgba(150, 150, 150, 0.5);
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--light-color-tab-selected-border: #0088fa;
Renamed CSS var color-text-color to color-text
2019-04-21 23:29:51 +08:00
--light-color-text: #000000;
Standalone NPM packages and React Native support (#335) * Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage. * Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed. * Adds support for React Native (paper renderer) * Adds a style editor for react-native and react-native-web
2019-07-14 01:05:04 +08:00
--light-color-text-invalid: #ff0000;
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--light-color-text-selected: #ffffff;
Added filter UI (but with a lot of $FlowFixMe comments)
2019-05-02 01:43:40 +08:00
--light-color-toggle-background-invalid: #fc3a4b;
--light-color-toggle-background-on: #0088fa;
--light-color-toggle-background-off: #cfd1d5;
--light-color-toggle-text: #ffffff;
Use new @reach/tooltip
2019-04-21 05:20:48 +08:00
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
--light-color-tooltip-text: #ffffff;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--light-color-warning-background: #fb3655;
--light-color-warning-background-hover: #f82042;
--light-color-warning-text-color: #ffffff;
--light-color-warning-text-color-inverted: #fd4d69;
Added stub search row (not connected to anythign yet)
2019-02-01 01:42:07 +08:00
Misc cleanup and prep for dark mode CSS
2019-02-12 22:45:00 +08:00
/* Dark theme */
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-attribute-name: #9d87d2;
DevTools editable props tweaks (#18954) 1. Made non-editable prop text higher contrast (easier to read) 2. Also makes it stand out as different from dimmer placeholder text for "new prop"
2020-05-20 00:42:00 +08:00
--dark-color-attribute-name-not-editable: #ededed;
Added HOC badge to owners stack breadcrumbs
2019-06-02 09:05:59 +08:00
--dark-color-attribute-name-inverted: #282828;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-attribute-value: #cedae0;
Added HOC badge to owners stack breadcrumbs
2019-06-02 09:05:59 +08:00
--dark-color-attribute-value-inverted: #ffffff;
Support editable props, state, and context values
2019-02-18 05:07:39 +08:00
--dark-color-attribute-editable-value: yellow;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-background: #282c34;
Tweaked guideline background color style
2019-06-02 00:34:39 +08:00
--dark-color-background-hover: rgba(255, 255, 255, 0.1);
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--dark-color-background-inactive: #3d424a;
Standalone NPM packages and React Native support (#335) * Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage. * Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed. * Adds support for React Native (paper renderer) * Adds a style editor for react-native and react-native-web
2019-07-14 01:05:04 +08:00
--dark-color-background-invalid: #5c0000;
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--dark-color-background-selected: #178fb9;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-button-background: #282c34;
--dark-color-button-background-focus: #3d424a;
Tweaking focus/active colors and only showing focus rect on tab
2019-04-21 06:44:24 +08:00
--dark-color-button: #afb3b9;
--dark-color-button-active: #61dafb;
Decreased contrast of disabled button icons to look more obviously disabled
2019-05-25 07:00:12 +08:00
--dark-color-button-disabled: #4f5766;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-button-focus: #a2e9fc;
Tweaked hover and focus colors. Temporarily disabled Tooltip.
2019-04-21 23:23:20 +08:00
--dark-color-button-hover: #ededed;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-border: #3d424a;
Improve scanning Profiler chart for deep renders
2019-05-16 05:15:14 +08:00
--dark-color-commit-did-not-render-fill: #777d88;
--dark-color-commit-did-not-render-fill-text: #000000;
--dark-color-commit-did-not-render-pattern: #666c77;
--dark-color-commit-did-not-render-pattern-text: #ffffff;
Plugged react-window into commit selector
2019-03-14 05:57:52 +08:00
--dark-color-commit-gradient-0: #37afa9;
--dark-color-commit-gradient-1: #63b19e;
--dark-color-commit-gradient-2: #80b393;
--dark-color-commit-gradient-3: #97b488;
--dark-color-commit-gradient-4: #abb67d;
--dark-color-commit-gradient-5: #beb771;
--dark-color-commit-gradient-6: #cfb965;
--dark-color-commit-gradient-7: #dfba57;
--dark-color-commit-gradient-8: #efbb49;
--dark-color-commit-gradient-9: #febc38;
Implemented ranked chart
2019-03-17 05:06:41 +08:00
--dark-color-commit-gradient-text: #000000;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-component-name: #61dafb;
Refactored badges to share code and show +count
2019-06-02 09:48:24 +08:00
--dark-color-component-name-inverted: #282828;
CSS tweaks
2019-05-14 05:51:56 +08:00
--dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
--dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
Refactored badges to share code and show +count
2019-06-02 09:48:24 +08:00
--dark-color-component-badge-count: #8f949d;
--dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
Expose DEV-mode warnings in devtools UI (#20463) Co-authored-by: Brian Vaughn <bvaughn@fb.com>
2020-12-23 00:09:29 +08:00
--dark-color-console-error-badge-text: #000000;
--dark-color-console-error-background: #290000;
--dark-color-console-error-border: #5c0000;
--dark-color-console-error-icon: #eb3941;
--dark-color-console-error-text: #fc7f7f;
--dark-color-console-warning-badge-text: #000000;
--dark-color-console-warning-background: #332b00;
--dark-color-console-warning-border: #665500;
--dark-color-console-warning-icon: #f4bd00;
--dark-color-console-warning-text: #f5f2ed;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--dark-color-context-background: rgba(255,255,255,.95);
DevTools context menu (#17608) * Added rudimentary context menu hook and menu UI * Added backend support for copying a value at a specific path for the inspected element * Added backend support for storing a value (at a specified path) as a global variable * Added special casing to enable copying undefined/unserializable values to the clipboard * Added copy and store-as-global context menu options to selected element props panel * Store global variables separately, with auto-incremented name (like browsers do) * Added tests for new copy and store-as-global backend functions * Fixed some ownerDocument/contentWindow edge cases * Refactored context menu to support dynamic options Used this mechanism to add a conditional menu option for inspecting the current value (if it's a function) * Renamed "safeSerialize" to "serializeToString" and added inline comment
2019-12-19 04:12:34 +08:00
--dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
--dark-color-context-background-selected: #0088fa;
--dark-color-context-border: #eeeeee;
--dark-color-context-text: #000000;
--dark-color-context-text-selected: #ffffff;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-dim: #8f949d;
--dark-color-dimmer: #777d88;
--dark-color-dimmest: #4f5766;
DevTools: Improve error boundary (#18956) 1. Add support for dark mode 2. Add retry option for case where Profiler data is corrupted
2020-05-22 02:21:22 +08:00
--dark-color-error-background: #200;
--dark-color-error-border: #900;
--dark-color-error-text: #f55;
Added new color-expand-collapse-toggle CSS var
2019-04-11 02:03:32 +08:00
--dark-color-expand-collapse-toggle: #8f949d;
DevTools: Improve error boundary (#18956) 1. Add support for dark mode 2. Add retry option for case where Profiler data is corrupted
2020-05-22 02:21:22 +08:00
--dark-color-link: #61dafb;
Store screenshots after each commit when profiling
2019-04-03 06:04:04 +08:00
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
DevTools: Add Bridge protocol version backend/frontend (#21331) Add an explicit Bridge protocol version to the frontend and backend components as well as a check during initialization to ensure that both are compatible. If not, the frontend will display either upgrade or downgrade instructions. Note that only the `react-devtools-core` (React Native) and `react-devtools-inline` (Code Sandbox) packages implement this check. Browser extensions inject their own backend and so the check is unnecessary. (Arguably the `react-devtools-inline` check is also unlikely to be necessary _but_ has been added as an extra guard for use cases such as Replay.io.)
2021-04-28 05:26:07 +08:00
--dark-color-bridge-version-npm-background: rgba(0, 0, 0, 0.25);
--dark-color-bridge-version-npm-text: #ffffff;
--dark-color-bridge-version-number: yellow;
Fixed primitive hook badge colors for light theme (#21034)
2021-03-19 21:52:59 +08:00
--dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
--dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
Initial profiling shell added Lots of TODOs and unfinished views here.
2019-03-11 00:01:05 +08:00
--dark-color-record-active: #fc3a4b;
Added export and clear buttons for Profiler, cleaned up record toggle
2019-03-31 00:01:52 +08:00
--dark-color-record-hover: #a2e9fc;
--dark-color-record-inactive: #61dafb;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-resize-bar: #282c34;
--dark-color-resize-bar-active: #31363f;
--dark-color-resize-bar-border: #3d424a;
--dark-color-resize-bar-dot: #cfd1d5;
Scheduling profiler: Improve native events UI (#21966) Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)
2021-07-27 07:30:43 +08:00
--dark-color-scheduling-profiler-native-event: #b2b2b2;
--dark-color-scheduling-profiler-native-event-hover: #949494;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--dark-color-scheduling-profiler-priority-background: #1d2129;
--dark-color-scheduling-profiler-priority-border: #282c34;
--dark-color-scheduling-profiler-user-timing: #c9cacd;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-scheduling-profiler-user-timing-hover: #93959a;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--dark-color-scheduling-profiler-react-idle: #3d485b;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-scheduling-profiler-react-idle-hover: #465269;
--dark-color-scheduling-profiler-react-render: #2683E2;
--dark-color-scheduling-profiler-react-render-hover: #1a76d4;
--dark-color-scheduling-profiler-react-commit: #731fad;
--dark-color-scheduling-profiler-react-commit-hover: #611b94;
--dark-color-scheduling-profiler-react-layout-effects: #611b94;
--dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
--dark-color-scheduling-profiler-react-passive-effects: #611b94;
--dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
--dark-color-scheduling-profiler-react-schedule: #2683E2;
--dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
--dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
--dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
--dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
--dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
--dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
--dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
Scheduling profiler: Improve native events UI (#21966) Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)
2021-07-27 07:30:43 +08:00
--dark-color-scheduling-profiler-text-color: #000000;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-scheduling-profiler-react-work-border: #ffffff;
Fixed an overflow bug. Added mode-specific CSS style for Firefox.
2019-06-07 01:39:07 +08:00
--dark-color-scroll-thumb: #afb3b9;
--dark-color-scroll-track: #313640;
Style, theme, and button CSS cleanup
2019-02-15 05:20:24 +08:00
--dark-color-search-match: yellow;
--dark-color-search-match-current: #f7923b;
Renamed <Guideline> to <SelectedTreeHighlight>
2019-06-04 00:39:31 +08:00
--dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
--dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-scroll-caret: #4f5766;
Misc improvements based on user feedback from Tim * Added shadow to modals * Change default "collapse new nodes" to be disabled rather than enabled * Changed setting label "Collapse newly added components by default" to "Expand component tree by default" * Change CSS media query for settings popup to show labels at smaller size * Hide "Inspect the matching DOM element" button (since it doesnt really serve a purpose in standalone) * Fixed small size bug for settings icon (viewbox of 20x20 instead of 24x24) * bugfix: window.addEventListener/window.removeEventListener is not defined in Hermes.
2019-07-25 02:25:11 +08:00
--dark-color-shadow: rgba(0, 0, 0, 0.5);
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--dark-color-tab-selected-border: #178fb9;
Renamed CSS var color-text-color to color-text
2019-04-21 23:29:51 +08:00
--dark-color-text: #ffffff;
Standalone NPM packages and React Native support (#335) * Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage. * Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed. * Adds support for React Native (paper renderer) * Adds a style editor for react-native and react-native-web
2019-07-14 01:05:04 +08:00
--dark-color-text-invalid: #ff8080;
Tidied up CSS variables
2019-04-21 23:38:58 +08:00
--dark-color-text-selected: #ffffff;
Added filter UI (but with a lot of $FlowFixMe comments)
2019-05-02 01:43:40 +08:00
--dark-color-toggle-background-invalid: #fc3a4b;
--dark-color-toggle-background-on: #178fb9;
--dark-color-toggle-background-off: #777d88;
--dark-color-toggle-text: #ffffff;
[DRAFT] Import scheduling profiler into DevTools Profiler (#21897)
2021-07-23 01:58:57 +08:00
--dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
Use new @reach/tooltip
2019-04-21 05:20:48 +08:00
--dark-color-tooltip-text: #000000;
Scheduling profiler UX changes (#21990)
2021-08-02 21:23:48 +08:00
--dark-color-warning-background: #ee1638;
--dark-color-warning-background-hover: #da1030;
--dark-color-warning-text-color: #ffffff;
--dark-color-warning-text-color-inverted: #ee1638;
Added stub search row (not connected to anythign yet)
2019-02-01 01:42:07 +08:00
Improve contrast for light mode
2019-04-18 02:40:55 +08:00
/* Font smoothing */
--light-font-smoothing: auto;
--dark-font-smoothing: antialiased;
--font-smoothing: auto;
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
/* Compact density */
Added ErrorBoundary with GitHub bug link
2019-04-12 08:19:03 +08:00
--compact-font-size-monospace-small: 9px;
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
--compact-font-size-monospace-normal: 11px;
--compact-font-size-monospace-large: 15px;
Added ErrorBoundary with GitHub bug link
2019-04-12 08:19:03 +08:00
--compact-font-size-sans-small: 10px;
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
--compact-font-size-sans-normal: 12px;
--compact-font-size-sans-large: 14px;
--compact-line-height-data: 18px;
Display density preference updates :root fontSize As a result, paddings and sizes (e.g. tab bar heights) will also be impacted now by this preference. More importantly, Profile charts will also use the line height preference, so the 'comfortable' setting will hopefully make profiling data easier to read.
2019-06-04 22:24:14 +08:00
--compact-root-font-size: 16px;
Cleaned up style vars
2019-02-05 19:23:37 +08:00
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
/* Comfortable density */
Added ErrorBoundary with GitHub bug link
2019-04-12 08:19:03 +08:00
--comfortable-font-size-monospace-small: 10px;
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
--comfortable-font-size-monospace-normal: 13px;
--comfortable-font-size-monospace-large: 17px;
Added ErrorBoundary with GitHub bug link
2019-04-12 08:19:03 +08:00
--comfortable-font-size-sans-small: 12px;
Added new tabs UI and theme/display-density preferences
2019-02-13 09:41:39 +08:00
--comfortable-font-size-sans-normal: 14px;
--comfortable-font-size-sans-large: 16px;
--comfortable-line-height-data: 22px;
Display density preference updates :root fontSize As a result, paddings and sizes (e.g. tab bar heights) will also be impacted now by this preference. More importantly, Profile charts will also use the line height preference, so the 'comfortable' setting will hopefully make profiling data easier to read.
2019-06-04 22:24:14 +08:00
--comfortable-root-font-size: 20px;
Added stub search row (not connected to anythign yet)
2019-02-01 01:42:07 +08:00
/* GitHub.com system fonts */
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
Courier, monospace;
Added properties panel and selected element context
2019-02-03 05:57:32 +08:00
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
Added stub search row (not connected to anythign yet)
2019-02-01 01:42:07 +08:00
}