\n-

\n- \n- <\/div>\n-

\n- \n- <\/div>\n- <\/div>\n- <\/TreeContextController>\n- <\/StoreContext.Provider>\n- <\/BridgeContext.Provider>\n+

\n+

\n+ \n+ <\/div>\n+

\n+ \n+ <\/div>\n+ <\/div>\n );\n }\ndiff --git a\/src\/devtools\/views\/Icon.js b\/src\/devtools\/views\/Icon.js\nindex 16868464b6..e7b6a3d211 100644\n--- a\/src\/devtools\/views\/Icon.js\n+++ b\/src\/devtools\/views\/Icon.js\n@@ -5,7 +5,7 @@ import styles from '.\/Icon.css';\n \n type Props = {|\n className?: string,\n- type: 'arrow' | 'search',\n+ type: 'arrow' | 'elements' | 'profiler' | 'search' | 'settings',\n |};\n \n export default function Icon({ className = '', type }: Props) {\n@@ -14,9 +14,18 @@ export default function Icon({ className = '', type }: Props) {\n case 'arrow':\n pathData = PATH_ARROW;\n break;\n+ case 'elements':\n+ pathData = PATH_ELEMENTS;\n+ break;\n+ case 'profiler':\n+ pathData = PATH_PROFILER;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n+ case 'settings':\n+ pathData = PATH_SETTINGS;\n+ break;\n default:\n console.warn(`Unsupported type \"${type}\" specified for Icon`);\n break;\n@@ -37,8 +46,19 @@ export default function Icon({ className = '', type }: Props) {\n }\n \n const PATH_ARROW = 'M8 5v14l11-7z';\n+const PATH_ELEMENTS =\n+ 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z';\n+const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';\n const PATH_SEARCH = `\n M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91\n 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99\n 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\n `;\n+const PATH_SETTINGS = `\n+ M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12\n+ 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39\n+ 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69\n+ 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58\n+ 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0\n+ .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z\n+`;\ndiff --git a\/src\/devtools\/views\/OwnersStack.css b\/src\/devtools\/views\/OwnersStack.css\nindex 5b00134f0c..28ac5ae858 100644\n--- a\/src\/devtools\/views\/OwnersStack.css\n+++ b\/src\/devtools\/views\/OwnersStack.css\n@@ -29,7 +29,7 @@\n margin-right: 0.5rem;\n color: var(--color-component-name);\n font-family: var(--font-family-monospace);\n- font-size: var(--font-size-normal);\n+ font-size: var(--font-size-monospace-normal);\n white-space: nowrap;\n border-radius: 0.125rem;\n }\ndiff --git a\/src\/devtools\/views\/Profiler.css b\/src\/devtools\/views\/Profiler.css\nnew file mode 100644\nindex 0000000000..440c241c03\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler.css\n@@ -0,0 +1,12 @@\n+.Profiler {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: center;\n+ justify-content: center;\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ background-color: var(--color-background);\n+ color: var(--color-text-color);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler.js b\/src\/devtools\/views\/Profiler.js\nnew file mode 100644\nindex 0000000000..bd89d54cbb\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler.js\n@@ -0,0 +1,11 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/Profiler.css';\n+\n+export type Props = {||};\n+\n+export default function Profiler(_: Props) {\n+ return

Under development...<\/div>;\n+}\ndiff --git a\/src\/devtools\/views\/ReactLogo.css b\/src\/devtools\/views\/ReactLogo.css\nnew file mode 100644\nindex 0000000000..407562437c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.css\n@@ -0,0 +1,5 @@\n+.ReactLogo {\n+ width: 1.75rem;\n+ height: 1.75rem;\n+ margin: 0 0.75rem 0 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/ReactLogo.js b\/src\/devtools\/views\/ReactLogo.js\nnew file mode 100644\nindex 0000000000..d7f33639c7\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/ReactLogo.js\n@@ -0,0 +1,22 @@\n+\/\/ @flow\n+\n+import React from 'react';\n+\n+import styles from '.\/ReactLogo.css';\n+\n+export default function ReactLogo() {\n+ return (\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/g>\n+ <\/svg>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/SearchInput.css b\/src\/devtools\/views\/SearchInput.css\nindex b09da991e2..053e70c5cc 100644\n--- a\/src\/devtools\/views\/SearchInput.css\n+++ b\/src\/devtools\/views\/SearchInput.css\n@@ -6,7 +6,7 @@\n \n .Input {\n flex: 1;\n- font-size: 1rem;\n+ font-size: var(--font-size-sans-large);\n outline: none;\n border: none;\n background-color: var(--color-background);\n@@ -22,7 +22,7 @@\n \n .IndexLabel {\n color: var(--color-dim);\n- font-size: var(--font-size-normal);\n+ font-size: var(--font-size-sans-normal);\n }\n \n .IconButton {\ndiff --git a\/src\/devtools\/views\/SelectedElement.css b\/src\/devtools\/views\/SelectedElement.css\nindex 54611b8aa5..4b9ee97752 100644\n--- a\/src\/devtools\/views\/SelectedElement.css\n+++ b\/src\/devtools\/views\/SelectedElement.css\n@@ -11,7 +11,7 @@\n flex: 0 0 42px;\n display: flex;\n align-items: center;\n- font-size: var(--font-size-large);\n+ font-size: var(--font-size-monospace-large);\n border-bottom: 1px solid var(--color-border);\n padding: 0.5rem;\n }\n@@ -67,7 +67,7 @@\n .InspectedElement {\n overflow: auto;\n font-family: var(--font-family-monospace);\n- font-size: var(--font-size-normal);\n+ font-size: var(--font-size-monospace-normal);\n line-height: var(--line-height-data);\n }\n \ndiff --git a\/src\/devtools\/views\/Settings.css b\/src\/devtools\/views\/Settings.css\nnew file mode 100644\nindex 0000000000..cb493a402a\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings.css\n@@ -0,0 +1,54 @@\n+.Settings {\n+ width: 100%;\n+ height: 100%;\n+ padding: 0.5rem;\n+ display: flex;\n+ flex-direction: column;\n+ align-items: flex-start;\n+ justify-content: flex-start;\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-normal);\n+ background-color: var(--color-background);\n+ color: var(--color-text-color);\n+}\n+\n+.Section {\n+ display: flex;\n+ flex-direction: column;\n+ margin-right: 0.5rem;\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Header {\n+ margin-bottom: 0.5rem;\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.OptionGroup {\n+ display: flex;\n+ flex-direction: row;\n+ user-select: none;\n+}\n+\n+.Option {\n+ cursor: pointer;\n+ padding: 0.5rem;\n+ border: 1px solid var(--color-border);\n+ border-right: none;\n+}\n+\n+.Option:hover {\n+ background-color: var(--color-tree-node-hover);\n+}\n+\n+.Option:first-of-type {\n+ border-top-left-radius: 0.25rem;\n+ border-bottom-left-radius: 0.25rem;\n+}\n+\n+.Option:last-of-type {\n+ border-top-right-radius: 0.25rem;\n+ border-bottom-right-radius: 0.25rem;\n+ border-right: 1px solid var(--color-border);\n+}\ndiff --git a\/src\/devtools\/views\/Settings.js b\/src\/devtools\/views\/Settings.js\nnew file mode 100644\nindex 0000000000..37e4dd9198\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Settings.js\n@@ -0,0 +1,93 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext } from 'react';\n+import { SettingsContext } from '.\/SettingsContext';\n+\n+import styles from '.\/Settings.css';\n+\n+export type Props = {||};\n+\n+export default function Settings(_: Props) {\n+ const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(\n+ SettingsContext\n+ );\n+\n+ const updateDisplayDensity = useCallback(\n+ ({ currentTarget }) => {\n+ setDisplayDensity(currentTarget.value);\n+ },\n+ [setDisplayDensity]\n+ );\n+\n+ const updateTheme = useCallback(\n+ ({ currentTarget }) => {\n+ setTheme(currentTarget.value);\n+ },\n+ [setTheme]\n+ );\n+\n+ return (\n+

\n+

Theme<\/div>\n+

\n+ \n+ {' '}\n+ Auto\n+ <\/label>\n+ \n+ {' '}\n+ Light\n+ <\/label>\n+ \n+ {' '}\n+ Dark\n+ <\/label>\n+ <\/div>\n+ <\/div>\n+

\n+

Display density<\/div>\n+

\n+ \n+ {' '}\n+ Compact\n+ <\/label>\n+ \n+ {' '}\n+ Comfortable\n+ <\/label>\n+ <\/div>\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/SettingsContext.js b\/src\/devtools\/views\/SettingsContext.js\nnew file mode 100644\nindex 0000000000..3929ffa41e\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/SettingsContext.js\n@@ -0,0 +1,166 @@\n+\/\/ @flow\n+\n+import React, { createContext, useLayoutEffect, useMemo } from 'react';\n+import { useLocalStorage } from '.\/hooks';\n+\n+import type { BrowserTheme } from '.\/DevTools';\n+\n+export type DisplayDensity = 'compact' | 'comfortable';\n+export type Theme = 'auto' | 'light' | 'dark';\n+\n+type Context = {|\n+ displayDensity: DisplayDensity,\n+ setDisplayDensity(value: DisplayDensity): void,\n+ theme: Theme,\n+ setTheme(value: Theme): void,\n+|};\n+\n+const SettingsContext = createContext(((null: any): Context));\n+\/\/ $FlowFixMe displayName is a valid attribute of React$ConsearchText\n+SettingsContext.displayName = 'SettingsContext';\n+\n+type Props = {|\n+ browserTheme: BrowserTheme,\n+ children: React$Node,\n+|};\n+\n+function SettingsContextController({ browserTheme, children }: Props) {\n+ const [displayDensity, setDisplayDensity] = useLocalStorage(\n+ 'displayDensity',\n+ 'compact'\n+ );\n+ const [theme, setTheme] = useLocalStorage('theme', 'auto');\n+\n+ useLayoutEffect(() => {\n+ switch (displayDensity) {\n+ case 'compact':\n+ updateDisplayDensity('compact');\n+ break;\n+ case 'comfortable':\n+ updateDisplayDensity('comfortable');\n+ break;\n+ default:\n+ throw Error(`Unsupported displayDensity value \"${displayDensity}\"`);\n+ }\n+ }, [displayDensity]);\n+\n+ useLayoutEffect(() => {\n+ switch (theme) {\n+ case 'light':\n+ updateThemeVariables('light');\n+ break;\n+ case 'dark':\n+ updateThemeVariables('dark');\n+ break;\n+ case 'auto':\n+ updateThemeVariables(browserTheme);\n+ break;\n+ default:\n+ throw Error(`Unsupported theme value \"${theme}\"`);\n+ }\n+ }, [theme]);\n+\n+ const value = useMemo(\n+ () => ({\n+ displayDensity,\n+ setDisplayDensity,\n+ theme,\n+ setTheme,\n+ }),\n+ [displayDensity, setDisplayDensity, theme, setTheme]\n+ );\n+\n+ return (\n+ \n+ {children}\n+ <\/SettingsContext.Provider>\n+ );\n+}\n+\n+function setStyleVariable(name: string, value: string) {\n+ (document.documentElement: any).style.setProperty(name, value);\n+}\n+\n+function updateDisplayDensity(displayDensity: DisplayDensity): void {\n+ setStyleVariable(\n+ '--font-size-monospace-normal',\n+ `var(--${displayDensity}-font-size-monospace-normal)`\n+ );\n+ setStyleVariable(\n+ '--font-size-monospace-large',\n+ `var(--${displayDensity}-font-size-monospace-large)`\n+ );\n+ setStyleVariable(\n+ '--font-size-sans-normal',\n+ `var(--${displayDensity}-font-size-sans-normal)`\n+ );\n+ setStyleVariable(\n+ '--font-size-sans-large',\n+ `var(--${displayDensity}-font-size-sans-large)`\n+ );\n+ setStyleVariable(\n+ '--line-height-data',\n+ `var(--${displayDensity}-line-height-data)`\n+ );\n+}\n+\n+function updateThemeVariables(theme: Theme): void {\n+ setStyleVariable('--color-arrow', `var(--theme-${theme}-arrow)`);\n+ setStyleVariable(\n+ '--color-arrow-inverted',\n+ `var(--theme-${theme}-arrow-inverted)`\n+ );\n+ setStyleVariable(\n+ '--color-attribute-name',\n+ `var(--theme-${theme}-attribute-name)`\n+ );\n+ setStyleVariable(\n+ '--color-attribute-value',\n+ `var(--theme-${theme}-attribute-value)`\n+ );\n+ setStyleVariable('--color-background', `var(--theme-${theme}-background)`);\n+ setStyleVariable('--color-border', `var(--theme-${theme}-color-border)`);\n+ setStyleVariable('--color-button', `var(--theme-${theme}-button)`);\n+ setStyleVariable(\n+ '--color-button-hover',\n+ `var(--theme-${theme}-button-hover)`\n+ );\n+ setStyleVariable(\n+ '--color-component-name',\n+ `var(--theme-${theme}-component-name)`\n+ );\n+ setStyleVariable(\n+ '--color-component-name-inverted',\n+ `var(--theme-${theme}-component-name-inverted)`\n+ );\n+ setStyleVariable('--color-dim', `var(--theme-${theme}-dim)`);\n+ setStyleVariable('--color-dimmer', `var(--theme-${theme}-dimmer)`);\n+ setStyleVariable('--color-dimmest', `var(--theme-${theme}-dimmest)`);\n+ setStyleVariable(\n+ '--color-search-match',\n+ `var(--theme-${theme}-search-match)`\n+ );\n+ setStyleVariable(\n+ '--color-search-match-current',\n+ `var(--theme-${theme}-search-match-current)`\n+ );\n+ setStyleVariable('--color-text-color', `var(--theme-${theme}-text-color)`);\n+ setStyleVariable(\n+ '--color-tree-jsx-arrow-brackets',\n+ `var(--theme-${theme}-jsx-arrow-brackets)`\n+ );\n+ setStyleVariable(\n+ '--color-tree-jsx-arrow-brackets-inverted',\n+ `var(--theme-${theme}-jsx-arrow-brackets-inverted)`\n+ );\n+ setStyleVariable(\n+ '--color-tree-node-selected',\n+ `var(--theme-${theme}-tree-node-selected)`\n+ );\n+ setStyleVariable(\n+ '--color-tree-node-hover',\n+ `var(--theme-${theme}-tree-node-hover)`\n+ );\n+}\n+\n+export { SettingsContext, SettingsContextController };\ndiff --git a\/src\/devtools\/views\/TabBar.css b\/src\/devtools\/views\/TabBar.css\nnew file mode 100644\nindex 0000000000..6c9ab7b6d4\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.css\n@@ -0,0 +1,51 @@\n+.TabBar {\n+ display: flex;\n+ align-items: center;\n+ padding: 0 0.5rem;\n+ background-color: var(--color-background);\n+ color: var(--color-tree-node-selected);\n+ border-top: 1px solid var(--color-border);\n+ font-family: var(--font-family-sans);\n+ font-size: var(--font-size-sans-large);\n+}\n+\n+.Tabs {\n+ flex: 1 1 auto;\n+ display: flex;\n+ flex-direction: row;\n+ align-items: center;\n+ justify-content: flex-end;\n+ overflow-x: auto;\n+}\n+\n+.TabCurrent,\n+.Tab {\n+ display: flex;\n+ align-items: center;\n+ padding: 0.5rem 1rem;\n+ cursor: pointer;\n+ border-top: 3px solid transparent;\n+ border-bottom: 3px solid transparent;\n+ cursor: pointer;\n+ user-select: none;\n+}\n+.TabCurrent:hover,\n+.Tab:hover {\n+ background-color: var(--color-tree-node-hover);\n+}\n+\n+.TabCurrent {\n+ border-bottom: 3px solid var(--color-tree-node-selected);\n+}\n+\n+.Input {\n+ width: 0;\n+ margin: 0;\n+ opacity: 0;\n+}\n+\n+.Icon {\n+ margin-right: 0.5rem;\n+ width: 1.5rem;\n+ height: 1.5rem;\n+}\ndiff --git a\/src\/devtools\/views\/TabBar.js b\/src\/devtools\/views\/TabBar.js\nnew file mode 100644\nindex 0000000000..6819cb553c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/TabBar.js\n@@ -0,0 +1,71 @@\n+\/\/ @flow\n+\n+import React, { useCallback } from 'react';\n+import Icon from '.\/Icon';\n+import ReactLogo from '.\/ReactLogo';\n+\n+import styles from '.\/TabBar.css';\n+\n+import type { TabID } from '.\/DevTools';\n+\n+export type Props = {|\n+ currentTab: TabID,\n+ selectTab: (tabID: TabID) => void,\n+|};\n+\n+export default function TabBar({ currentTab, selectTab }: Props) {\n+ const onChange = useCallback(\n+ ({ currentTarget }) => selectTab(currentTarget.value),\n+ [selectTab]\n+ );\n+\n+ return (\n+

\n+ DevTools {process.env.DEVTOOLS_VERSION}\n+

\n+ \n+ \n+ \n+ Elements\n+ <\/label>\n+ \n+ \n+ \n+ Profiler\n+ <\/label>\n+ \n+ \n+ \n+ Settings\n+ <\/label>\n+ <\/div>\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Tree.css b\/src\/devtools\/views\/Tree.css\nindex f43c12e7a2..fab177f808 100644\n--- a\/src\/devtools\/views\/Tree.css\n+++ b\/src\/devtools\/views\/Tree.css\n@@ -10,7 +10,6 @@\n flex: 0 0 42px;\n display: flex;\n align-items: center;\n- font-size: var(--font-size-large);\n border-bottom: 1px solid var(--color-border);\n padding: 0.5rem;\n }\n@@ -24,7 +23,7 @@\n \n .List {\n font-family: var(--font-family-monospace);\n- font-size: var(--font-size-normal);\n+ font-size: var(--font-size-monospace-normal);\n line-height: var(--line-height-data);\n }\n \ndiff --git a\/src\/devtools\/views\/hooks.js b\/src\/devtools\/views\/hooks.js\nnew file mode 100644\nindex 0000000000..0e18914863\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/hooks.js\n@@ -0,0 +1,43 @@\n+\/\/ @flow\n+\n+import { useState } from 'react';\n+\n+\/\/ https:\/\/usehooks.com\/useLocalStorage\/\n+export function useLocalStorage(\n+ key: string,\n+ initialValue: T\n+): [T, (value: T | (() => T)) => void] {\n+ \/\/ State to store our value\n+ \/\/ Pass initial state function to useState so logic is only executed once\n+ const [storedValue, setStoredValue] = useState(() => {\n+ try {\n+ \/\/ Get from local storage by key\n+ const item = window.localStorage.getItem(key);\n+ \/\/ Parse stored json or if none return initialValue\n+ return item ? JSON.parse(item) : initialValue;\n+ } catch (error) {\n+ \/\/ If error also return initialValue\n+ console.log(error);\n+ return initialValue;\n+ }\n+ });\n+\n+ \/\/ Return a wrapped version of useState's setter function that ...\n+ \/\/ ... persists the new value to localStorage.\n+ const setValue = value => {\n+ try {\n+ \/\/ Allow value to be a function so we have same API as useState\n+ const valueToStore =\n+ value instanceof Function ? value(storedValue) : value;\n+ \/\/ Save state\n+ setStoredValue(valueToStore);\n+ \/\/ Save to local storage\n+ window.localStorage.setItem(key, JSON.stringify(valueToStore));\n+ } catch (error) {\n+ \/\/ A more advanced implementation would handle the error case\n+ console.log(error);\n+ }\n+ };\n+\n+ return [storedValue, setValue];\n+}\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nindex 8e9b4fc974..1df9ed50ff 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -1,4 +1,8 @@\n :root {\n+ \/**\n+ * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()\n+ *\/\n+\n \/* Light theme *\/\n --theme-light-arrow: #777d88;\n --theme-light-arrow-inverted: #ffffff;\n@@ -6,7 +10,7 @@\n --theme-light-attribute-value: #1a1aa6;\n --theme-light-background: #ffffff;\n --theme-light-button: #0088fa;\n- --theme-light-button-hover: #1a1aa6;\n+ --theme-light-button-hover: #3578e5;\n --theme-light-color-border: #eeeeee;\n --theme-light-component-name: #8155cb;\n --theme-light-component-name-inverted: #ffffff;\n@@ -41,35 +45,21 @@\n --theme-dark-search-match-current: #f7923b;\n --theme-dark-text-color: #ffffff;\n --theme-dark-tree-node-selected: #31a38d;\n- --theme-dark-tree-node-hover: #23272f;\n+ --theme-dark-tree-node-hover: #303846;\n \n- \/* \"theme\" values referenced by other stylesheets *\/\n- --color-arrow: var(--theme-light-arrow);\n- --color-arrow-inverted: var(--theme-light-arrow-inverted);\n- --color-attribute-name: var(--theme-light-attribute-name);\n- --color-attribute-value: var(--theme-light-attribute-value);\n- --color-background: var(--theme-light-background);\n- --color-border: var(--theme-light-color-border);\n- --color-button: var(--theme-light-button);\n- --color-button-hover: var(--theme-light-button-hover);\n- --color-component-name: var(--theme-light-component-name);\n- --color-component-name-inverted: var(--theme-light-component-name-inverted);\n- --color-dim: var(--theme-light-dim);\n- --color-dimmer: var(--theme-light-dimmer);\n- --color-dimmest: var(--theme-light-dimmest);\n- --color-search-match: var(--theme-light-search-match);\n- --color-search-match-current: var(--theme-light-search-match-current);\n- --color-text-color: var(--theme-light-text-color);\n- --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);\n- --color-tree-jsx-arrow-brackets-inverted: var(\n- --theme-light-jsx-arrow-brackets-inverted\n- );\n- --color-tree-node-selected: var(--theme-light-tree-node-selected);\n- --color-tree-node-hover: var(--theme-light-tree-node-hover);\n+ \/* Compact density *\/\n+ --compact-font-size-monospace-normal: 11px;\n+ --compact-font-size-monospace-large: 15px;\n+ --compact-font-size-sans-normal: 12px;\n+ --compact-font-size-sans-large: 14px;\n+ --compact-line-height-data: 18px;\n \n- --font-size-normal: 11px;\n- --font-size-large: 15px;\n- --line-height-data: 18px;\n+ \/* Comfortable density *\/\n+ --comfortable-font-size-monospace-normal: 13px;\n+ --comfortable-font-size-monospace-large: 17px;\n+ --comfortable-font-size-sans-normal: 14px;\n+ --comfortable-font-size-sans-large: 16px;\n+ --comfortable-line-height-data: 22px;\n \n \/* GitHub.com system fonts *\/\n --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,\n","commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-02-12T20:41:39-05:00","subject":"Added new tabs UI and theme\/display-density preferences","shortRevision":"d203ebf165","revision":"d203ebf1655e9bbaa039ffc34855bbe3396dde35"}}

dillon1000/react

Files changed