Style, theme, and button CSS cleanup

src/devtools/views/Button.css

@@ -0,0 +1,26 @@
+.Button {
+  border: none;
+  background: var(--color-button-background);
+  color: var(--color-button);
+  border-radius: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.Button:hover {
+  background: var(--color-button-background-hover);
+  color: var(--color-button-hover);
+}
+.Button:active,
+.Button:focus {
+  background: var(--color-button-background-focus);
+  color: var(--color-button-focus);
+  outline: none;
+}
+.Button:disabled {
+  background: var(--color-button-background);
+  color: var(--color-button-disabled);
+  cursor: default;
+}

src/devtools/views/Button.js

@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react';
+
+import styles from './Button.css';
+
+type Props = {
+  className?: string,
+};
+
+export default function Button({ className, ...rest }: Props) {
+  return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
+}

src/devtools/views/Element.css

@@ -18,16 +18,13 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
-  --color-arrow: var(--color-arrow-inverted);
-  --color-tree-jsx-arrow-brackets: var(
-    --color-tree-jsx-arrow-brackets-inverted
-  );
+  --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
   --color-attribute-name: var(--color-tree-node-hover);
   --color-attribute-value: var(--color-component-name-inverted);
 }
 
 .DollarR {
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .Component {
@@ -36,12 +33,12 @@
 .Component:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 .Component:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .AttributeName {

src/devtools/views/OwnersStack.css

@@ -5,24 +5,6 @@
   overflow-x: auto;
 }
 
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-.IconButton:disabled {
-  color: var(--color-dimmer);
-  cursor: default;
-}
-
 .Component,
 .FocusedComponent {
   padding: 0.25rem;

src/devtools/views/OwnersStack.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useCallback, useContext } from 'react';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from './context';
@@ -19,13 +20,13 @@ export default function OwnerStack() {
 
   return (
     <div className={styles.OwnerStack}>
-      <button
+      <Button
         className={styles.IconButton}
         onClick={resetOwnerStack}
         title="Back to tree view"
       >
         <ButtonIcon type="close" />
-      </button>
+      </Button>
       <div className={styles.VRule} />
       {elements}
     </div>

src/devtools/views/SearchInput.css

@@ -25,24 +25,6 @@
   font-size: var(--font-size-sans-normal);
 }
 
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-.IconButton:disabled {
-  color: var(--color-dimmer);
-  cursor: default;
-}
-
 .LeftVRule,
 .RightVRule {
   height: 20px;

src/devtools/views/SearchInput.js

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { TreeContext } from './TreeContext';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import Icon from './Icon';
 
@@ -74,30 +75,30 @@ export default function SearchInput(props: Props) {
         </span>
       )}
       <div className={styles.LeftVRule} />
-      <button
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={goToPreviousSearchResult}
         title="Scroll to previous search result"
       >
         <ButtonIcon type="up" />
-      </button>
-      <button
+      </Button>
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={goToNextSearchResult}
         title="Scroll to next search result"
       >
         <ButtonIcon type="down" />
-      </button>
-      <button
+      </Button>
+      <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={resetSearch}
         title="Reset search"
       >
         <ButtonIcon type="close" />
-      </button>
+      </Button>
       <div className={styles.RightVRule} />
     </div>
   );

src/devtools/views/SelectedElement.css

@@ -16,20 +16,6 @@
   padding: 0.5rem;
 }
 
-.IconButton {
-  flex: 0 0 auto;
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}
-
 .SelectedComponentName {
   flex: 1 1 auto;
   overflow: hidden;
@@ -51,13 +37,13 @@
 .Owner:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 .Component:after,
 .Owner:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-jsx-arrow-brackets);
+  color: var(--color-jsx-arrow-brackets);
 }
 
 .Component {

src/devtools/views/SelectedElement.js

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { TreeContext } from './TreeContext';
 import { BridgeContext, StoreContext } from './context';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
@@ -64,20 +65,20 @@ export default function SelectedElement(_: Props) {
           </div>
         </div>
 
-        <button
+        <Button
           className={styles.IconButton}
           onClick={handleClick}
           title="Highlight this element in the page"
         >
           <ButtonIcon type="view-dom" />
-        </button>
+        </Button>
         {source !== null && (
-          <button
+          <Button
             className={styles.IconButton}
             title="View source for this element"
           >
             <ButtonIcon type="view-source" />
-          </button>
+          </Button>
         )}
       </div>
 

src/devtools/views/SettingsContext.js

@@ -103,86 +103,42 @@ function setStyleVariable(name: string, value: string) {
   (document.documentElement: any).style.setProperty(name, value);
 }
 
+function updateStyleHelper(themeKey: string, style: string) {
+  setStyleVariable(`--${style}`, `var(--${themeKey}-${style})`);
+}
+
 function updateDisplayDensity(displayDensity: DisplayDensity): void {
-  setStyleVariable(
-    '--font-size-monospace-normal',
-    `var(--${displayDensity}-font-size-monospace-normal)`
-  );
-  setStyleVariable(
-    '--font-size-monospace-large',
-    `var(--${displayDensity}-font-size-monospace-large)`
-  );
-  setStyleVariable(
-    '--font-size-sans-normal',
-    `var(--${displayDensity}-font-size-sans-normal)`
-  );
-  setStyleVariable(
-    '--font-size-sans-large',
-    `var(--${displayDensity}-font-size-sans-large)`
-  );
-  setStyleVariable(
-    '--line-height-data',
-    `var(--${displayDensity}-line-height-data)`
-  );
+  updateStyleHelper(displayDensity, 'font-size-monospace-normal');
+  updateStyleHelper(displayDensity, 'font-size-monospace-large');
+  updateStyleHelper(displayDensity, 'font-size-sans-normal');
+  updateStyleHelper(displayDensity, 'font-size-sans-large');
+  updateStyleHelper(displayDensity, 'line-height-data');
 }
 
 function updateThemeVariables(theme: Theme): void {
-  setStyleVariable('--color-arrow', `var(--theme-${theme}-arrow)`);
-  setStyleVariable(
-    '--color-arrow-inverted',
-    `var(--theme-${theme}-arrow-inverted)`
-  );
-  setStyleVariable(
-    '--color-attribute-name',
-    `var(--theme-${theme}-attribute-name)`
-  );
-  setStyleVariable(
-    '--color-attribute-value',
-    `var(--theme-${theme}-attribute-value)`
-  );
-  setStyleVariable('--color-background', `var(--theme-${theme}-background)`);
-  setStyleVariable('--color-border', `var(--theme-${theme}-color-border)`);
-  setStyleVariable('--color-button', `var(--theme-${theme}-button)`);
-  setStyleVariable(
-    '--color-button-hover',
-    `var(--theme-${theme}-button-hover)`
-  );
-  setStyleVariable(
-    '--color-component-name',
-    `var(--theme-${theme}-component-name)`
-  );
-  setStyleVariable(
-    '--color-component-name-inverted',
-    `var(--theme-${theme}-component-name-inverted)`
-  );
-  setStyleVariable('--color-dim', `var(--theme-${theme}-dim)`);
-  setStyleVariable('--color-dimmer', `var(--theme-${theme}-dimmer)`);
-  setStyleVariable('--color-dimmest', `var(--theme-${theme}-dimmest)`);
-  setStyleVariable(
-    '--color-search-match',
-    `var(--theme-${theme}-search-match)`
-  );
-  setStyleVariable(
-    '--color-search-match-current',
-    `var(--theme-${theme}-search-match-current)`
-  );
-  setStyleVariable('--color-text-color', `var(--theme-${theme}-text-color)`);
-  setStyleVariable(
-    '--color-tree-jsx-arrow-brackets',
-    `var(--theme-${theme}-jsx-arrow-brackets)`
-  );
-  setStyleVariable(
-    '--color-tree-jsx-arrow-brackets-inverted',
-    `var(--theme-${theme}-jsx-arrow-brackets-inverted)`
-  );
-  setStyleVariable(
-    '--color-tree-node-selected',
-    `var(--theme-${theme}-tree-node-selected)`
-  );
-  setStyleVariable(
-    '--color-tree-node-hover',
-    `var(--theme-${theme}-tree-node-hover)`
-  );
+  updateStyleHelper(theme, 'color-attribute-name');
+  updateStyleHelper(theme, 'color-attribute-value');
+  updateStyleHelper(theme, 'color-background');
+  updateStyleHelper(theme, 'color-border');
+  updateStyleHelper(theme, 'color-button-background');
+  updateStyleHelper(theme, 'color-button-background-focus');
+  updateStyleHelper(theme, 'color-button-background-hover');
+  updateStyleHelper(theme, 'color-button');
+  updateStyleHelper(theme, 'color-button-disabled');
+  updateStyleHelper(theme, 'color-button-focus');
+  updateStyleHelper(theme, 'color-button-hover');
+  updateStyleHelper(theme, 'color-component-name');
+  updateStyleHelper(theme, 'color-component-name-inverted');
+  updateStyleHelper(theme, 'color-dim');
+  updateStyleHelper(theme, 'color-dimmer');
+  updateStyleHelper(theme, 'color-dimmest');
+  updateStyleHelper(theme, 'color-search-match');
+  updateStyleHelper(theme, 'color-search-match-current');
+  updateStyleHelper(theme, 'color-text-color');
+  updateStyleHelper(theme, 'color-jsx-arrow-brackets');
+  updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
+  updateStyleHelper(theme, 'color-tree-node-selected');
+  updateStyleHelper(theme, 'color-tree-node-hover');
 }
 
 export { SettingsContext, SettingsContextController };

src/devtools/views/Tree.css

@@ -26,17 +26,3 @@
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
-
-.IconButton {
-  border: none;
-  background: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: var(--color-button);
-  flex: 0 0 auto;
-}
-.IconButton:hover {
-  color: var(--color-button-hover);
-}

src/devtools/views/Tree.js

@@ -11,6 +11,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
 import { SettingsContext } from './SettingsContext';
+import Button from './Button';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import OwnersStack from './OwnersStack';
@@ -86,12 +87,12 @@ export default function Tree(props: Props) {
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
         {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
-        <button
+        <Button
           className={styles.IconButton}
           title="Select an element in the page to inspect it"
         >
           <ButtonIcon type="search" />
-        </button>
+        </Button>
       </div>
       <div className={styles.AutoSizerWrapper}>
         <AutoSizer>

src/devtools/views/root.css

@@ -4,48 +4,54 @@
    */
 
   /* Light theme */
-  --theme-light-arrow: #777d88;
-  --theme-light-arrow-inverted: #ffffff;
-  --theme-light-attribute-name: #ef6632;
-  --theme-light-attribute-value: #1a1aa6;
-  --theme-light-background: #ffffff;
-  --theme-light-button: #0088fa;
-  --theme-light-button-hover: #3578e5;
-  --theme-light-color-border: #eeeeee;
-  --theme-light-component-name: #8155cb;
-  --theme-light-component-name-inverted: #ffffff;
-  --theme-light-dim: #777d88;
-  --theme-light-dimmer: #cfd1d5;
-  --theme-light-dimmest: #eff0f1;
-  --theme-light-jsx-arrow-brackets: #333333;
-  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --theme-light-search-match: yellow;
-  --theme-light-search-match-current: #f7923b;
-  --theme-light-text-color: #000000;
-  --theme-light-tree-node-selected: #0088fa;
-  --theme-light-tree-node-hover: #ebf1fb;
+  --light-color-attribute-name: #ef6632;
+  --light-color-attribute-value: #1a1aa6;
+  --light-color-background: #ffffff;
+  --light-color-button-background: #ffffff;
+  --light-color-button-background-focus: #ebf1fb;
+  --light-color-button-background-hover: #ffffff;
+  --light-color-button: #0088fa;
+  --light-color-button-disabled: #cfd1d5;
+  --light-color-button-focus: #3578e5;
+  --light-color-button-hover: #3578e5;
+  --light-color-border: #eeeeee;
+  --light-color-component-name: #8155cb;
+  --light-color-component-name-inverted: #ffffff;
+  --light-color-dim: #777d88;
+  --light-color-dimmer: #cfd1d5;
+  --light-color-dimmest: #eff0f1;
+  --light-color-jsx-arrow-brackets: #333333;
+  --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-search-match: yellow;
+  --light-color-search-match-current: #f7923b;
+  --light-color-text-color: #000000;
+  --light-color-tree-node-selected: #0088fa;
+  --light-color-tree-node-hover: #ebf1fb;
 
   /* Dark theme */
-  --theme-dark-arrow: #777d88;
-  --theme-dark-arrow-inverted: #282828;
-  --theme-dark-attribute-name: #9d87d2;
-  --theme-dark-attribute-value: #cedae0;
-  --theme-dark-background: #282c34;
-  --theme-dark-button: #61dafb;
-  --theme-dark-button-hover: #a2e9fc;
-  --theme-dark-color-border: #3d424a;
-  --theme-dark-component-name: #61dafb;
-  --theme-dark-component-name-inverted: ##282828;
-  --theme-dark-dim: #8f949d;
-  --theme-dark-dimmer: #777d88;
-  --theme-dark-dimmest: #4f5766;
-  --theme-dark-jsx-arrow-brackets: #777d88;
-  --theme-dark-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
-  --theme-dark-search-match: yellow;
-  --theme-dark-search-match-current: #f7923b;
-  --theme-dark-text-color: #ffffff;
-  --theme-dark-tree-node-selected: #178fb9;
-  --theme-dark-tree-node-hover: #3d424a;
+  --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-value: #cedae0;
+  --dark-color-background: #282c34;
+  --dark-color-button-background: #282c34;
+  --dark-color-button-background-focus: #3d424a;
+  --dark-color-button-background-hover: #282c34;
+  --dark-color-button: #61dafb;
+  --dark-color-button-disabled: #777d88;
+  --dark-color-button-focus: #a2e9fc;
+  --dark-color-button-hover: #a2e9fc;
+  --dark-color-border: #3d424a;
+  --dark-color-component-name: #61dafb;
+  --dark-color-component-name-inverted: ##282828;
+  --dark-color-dim: #8f949d;
+  --dark-color-dimmer: #777d88;
+  --dark-color-dimmest: #4f5766;
+  --dark-color-jsx-arrow-brackets: #777d88;
+  --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-search-match: yellow;
+  --dark-color-search-match-current: #f7923b;
+  --dark-color-text-color: #ffffff;
+  --dark-color-tree-node-selected: #178fb9;
+  --dark-color-tree-node-hover: #3d424a;
 
   /* Compact density */
   --compact-font-size-monospace-normal: 11px;