Implement redux-devtools-themes and fix styles

packages/redux-devtools-trace-monitor/package.json

@@ -57,6 +57,7 @@
     "chalk": "^2.4.1",
     "html-entities": "^1.2.1",
     "react": "^15.4.0",
+    "redux-devtools-themes": "^1.0.0",
     "settle-promise": "^1.0.0"
   }
 }

packages/redux-devtools-trace-monitor/src/StackTraceTab.js

@@ -91,14 +91,11 @@ export default class StackTraceTab extends Component {
 
   }
 
-
   render() {
     const {stackFrames} = this.state;
 
     return (
-            <div style={{backgroundColor: 'white', color: 'black'}}>
+          <div style={{padding: '5px 10px'}}>
-                <h2>Dispatched Action Stack Trace</h2>
-                <div style={{display: 'flex', flexDirection: 'column'}}>
               <StackTrace
                   stackFrames={stackFrames}
                   errorName={"N/A"}
@@ -106,7 +103,6 @@ export default class StackTraceTab extends Component {
                   editorHandler={this.onStackLocationClicked}
               />
           </div>
-            </div>
         );
   }
 }

packages/redux-devtools-trace-monitor/src/react-error-overlay/components/CodeBlock.js

@@ -7,11 +7,11 @@
 
 /* @flow */
 import React from 'react';
-import { redTransparent, yellowTransparent } from '../styles';
 
-const _preStyle = {
+const preStyle = {
   position: 'relative',
   display: 'block',
+  backgroundColor: '#000',
   padding: '0.5em',
   marginTop: '0.5em',
   marginBottom: '0.5em',
@@ -20,16 +20,6 @@ const _preStyle = {
   borderRadius: '0.25rem',
 };
 
-const primaryPreStyle = {
-  ..._preStyle,
-  backgroundColor: redTransparent,
-};
-
-const secondaryPreStyle = {
-  ..._preStyle,
-  backgroundColor: yellowTransparent,
-};
-
 const codeStyle = {
   fontFamily: 'Consolas, Menlo, monospace',
 };
@@ -40,7 +30,6 @@ type CodeBlockPropsType = {|
 |};
 
 function CodeBlock(props: CodeBlockPropsType) {
-  const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
   const codeBlock = { __html: props.codeHTML };
 
   return (

packages/redux-devtools-trace-monitor/src/react-error-overlay/components/Collapsible.js

@@ -7,21 +7,20 @@
 
 /* @flow */
 import React, { Component } from 'react';
-import { black } from '../styles';
+import { nicinabox as theme } from 'redux-devtools-themes';
 
 import type { Element as ReactElement } from 'react';
 
 const _collapsibleStyle = {
-  color: black,
+  color: theme.base06,
+  backgroundColor: theme.base01,
   cursor: 'pointer',
   border: 'none',
   display: 'block',
   width: '100%',
   textAlign: 'left',
-  background: '#fff',
-  fontFamily: 'Consolas, Menlo, monospace',
   fontSize: '1em',
-  padding: '0px',
+  padding: '0px 5px',
   lineHeight: '1.5',
 };
 

packages/redux-devtools-trace-monitor/src/react-error-overlay/containers/StackFrame.js

@@ -9,7 +9,7 @@
 import React, { Component } from 'react';
 import CodeBlock from './StackFrameCodeBlock';
 import { getPrettyURL } from '../utils/getPrettyURL';
-import { darkGray } from '../styles';
+import { nicinabox as theme } from 'redux-devtools-themes';
 
 import type { StackFrame as StackFrameType } from '../utils/stack-frame';
 import type { ErrorLocation } from '../utils/parseCompileError';
@@ -21,7 +21,7 @@ const linkStyle = {
 
 const anchorStyle = {
   textDecoration: 'none',
-  color: darkGray,
+  color: theme.base05,
   cursor: 'pointer',
 };
 
@@ -31,13 +31,13 @@ const codeAnchorStyle = {
 
 const toggleStyle = {
   marginBottom: '1.5em',
-  color: darkGray,
+  color: theme.base05,
   cursor: 'pointer',
   border: 'none',
   display: 'block',
   width: '100%',
   textAlign: 'left',
-  background: '#fff',
+  background: 'transparent',
   fontFamily: 'Consolas, Menlo, monospace',
   fontSize: '1em',
   padding: '0px',

packages/redux-devtools-trace-monitor/src/react-error-overlay/containers/StackFrameCodeBlock.js

@@ -11,10 +11,10 @@ import CodeBlock from '../components/CodeBlock';
 import { applyStyles } from '../utils/dom/css';
 import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
 import type { ScriptLine } from '../utils/stack-frame';
-import { primaryErrorStyle, secondaryErrorStyle } from '../styles';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
 import { codeFrameColumns } from '@babel/code-frame';
+import { nicinabox as theme } from 'redux-devtools-themes';
 
 type StackFrameCodeBlockPropsType = {|
   lines: ScriptLine[],
@@ -90,7 +90,7 @@ function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
         continue;
       }
       // $FlowFixMe
-      applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
+      applyStyles(node, {'background-color':  main ? theme.base02 : theme.base01});
       // eslint-disable-next-line
       break oLoop;
     }

packages/redux-devtools-trace-monitor/src/react-error-overlay/styles.js

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* @flow */
-const black = '#293238',
-  darkGray = '#878e91',
-  red = '#ce1126',
-  redTransparent = 'rgba(206, 17, 38, 0.05)',
-  lightRed = '#fccfcf',
-  yellow = '#fbf5b4',
-  yellowTransparent = 'rgba(251, 245, 180, 0.3)',
-  white = '#ffffff';
-
-const iframeStyle = {
-  position: 'fixed',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  border: 'none',
-  'z-index': 2147483647,
-};
-
-const overlayStyle = {
-  width: '100%',
-  height: '100%',
-  'box-sizing': 'border-box',
-  'text-align': 'center',
-  'background-color': white,
-};
-
-const primaryErrorStyle = {
-  'background-color': lightRed,
-};
-
-const secondaryErrorStyle = {
-  'background-color': yellow,
-};
-
-export {
-  iframeStyle,
-  overlayStyle,
-  primaryErrorStyle,
-  secondaryErrorStyle,
-  black,
-  darkGray,
-  red,
-  redTransparent,
-  yellowTransparent,
-};

packages/redux-devtools-trace-monitor/src/react-error-overlay/utils/dom/absolutifyCaret.js

@@ -33,6 +33,7 @@ function absolutifyCaret(component: Node) {
     }
     // $FlowFixMe
     c.style.position = 'absolute';
+    c.style.marginTop = '-7px';
     // $FlowFixMe
     removeNextBr(component, c);
   }

packages/redux-devtools-trace-monitor/src/react-error-overlay/utils/generateAnsiHTML.js

@@ -8,58 +8,24 @@
 /* @flow */
 
 import Anser from 'anser';
+import { nicinabox as theme } from 'redux-devtools-themes';
 import { AllHtmlEntities as Entities } from 'html-entities';
 
 var entities = new Entities();
 
-// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
-// var base00 = 'ffffff'; // Default Background
-//var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
-var base01 = 'red';
-// var base02 = 'c8c8fa'; // Selection Background
-var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting
-// var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
-var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
-// var base06 = 'ffffff'; // Light Foreground (Not often used)
-// var base07 = 'ffffff'; // Light Background (Not often used)
-var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
-// var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
-// var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
-var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted
-var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes
-// var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
-var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
-// var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
-
-// Map ANSI colors from what babel-code-frame uses to base16-github
-// See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
-var colors = {
-  reset: [base05, 'transparent'],
-  black: base05,
-  red: base08 /* marker, bg-invalid */,
-  green: base0B /* string */,
-  yellow: base08 /* capitalized, jsx_tag, punctuator */,
-  blue: base0C,
-  magenta: base0C /* regex */,
-  cyan: base0E /* keyword */,
-  gray: base03 /* comment, gutter */,
-  lightgrey: base01,
-  darkgrey: base03,
-};
-
 var anserMap = {
-  'ansi-bright-black': 'black',
+  'ansi-bright-black': theme.base03,
-  'ansi-bright-yellow': 'yellow',
+  'ansi-bright-yellow': theme.base0A,
-  'ansi-yellow': 'yellow',
+  'ansi-yellow': theme.base0B,
-  'ansi-bright-green': 'green',
+  'ansi-bright-green': theme.base0B,
-  'ansi-green': 'green',
+  'ansi-green': theme.base0F,
-  'ansi-bright-cyan': 'cyan',
+  'ansi-bright-cyan': theme.base0D,
-  'ansi-cyan': 'cyan',
+  'ansi-cyan': theme.base0C,
-  'ansi-bright-red': 'red',
+  'ansi-bright-red': theme.base09,
-  'ansi-red': 'red',
+  'ansi-red': theme.base0E,
-  'ansi-bright-magenta': 'magenta',
+  'ansi-bright-magenta': theme.base0F,
-  'ansi-magenta': 'magenta',
+  'ansi-magenta': theme.base0E,
-  'ansi-white': 'darkgrey',
+  'ansi-white': theme.base00,
 };
 
 function generateAnsiHTML(txt: string): string {
@@ -81,9 +47,9 @@ function generateAnsiHTML(txt: string): string {
         open = true;
       }
       var part = contentParts[_index].replace('\r', '');
-      var color = colors[anserMap[fg]];
+      var color = anserMap[fg];
       if (color != null) {
-        result += '<span style="color: #' + color + ';">' + part + '</span>';
+        result += '<span style="color: ' + color + ';">' + part + '</span>';
       } else {
         if (fg != null) {
           console.log('Missing color mapping:', fg); // eslint-disable-line no-console

packages/redux-devtools-trace-monitor/test/__snapshots__/StackTraceTab.spec.js.snap

@@ -5,19 +5,7 @@ exports[`StackTraceTab component should render with no props 1`] = `
   <div
     style={
       Object {
-        "backgroundColor": "white",
+        "padding": "5px 10px",
-        "color": "black",
-      }
-    }
-  >
-    <h2>
-      Dispatched Action Stack Trace
-    </h2>
-    <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
       }
     }
   >
@@ -39,7 +27,6 @@ exports[`StackTraceTab component should render with no props 1`] = `
       />
     </StackTrace>
   </div>
-  </div>
 </StackTraceTab>
 `;
 
@@ -79,19 +66,7 @@ exports[`StackTraceTab component should render with props, but without stack 1`]
   <div
     style={
       Object {
-        "backgroundColor": "white",
+        "padding": "5px 10px",
-        "color": "black",
-      }
-    }
-  >
-    <h2>
-      Dispatched Action Stack Trace
-    </h2>
-    <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
       }
     }
   >
@@ -113,7 +88,6 @@ exports[`StackTraceTab component should render with props, but without stack 1`]
       />
     </StackTrace>
   </div>
-  </div>
 </StackTraceTab>
 `;
 
@@ -153,19 +127,7 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
   <div
     style={
       Object {
-        "backgroundColor": "white",
+        "padding": "5px 10px",
-        "color": "black",
-      }
-    }
-  >
-    <h2>
-      Dispatched Action Stack Trace
-    </h2>
-    <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
       }
     }
   >
@@ -220,16 +182,15 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
               onClick={[Function]}
               style={
                 Object {
-                    "background": "#fff",
+                  "backgroundColor": "#3C444F",
                   "border": "none",
-                    "color": "#293238",
+                  "color": "#FFFFFF",
                   "cursor": "pointer",
                   "display": "block",
-                    "fontFamily": "Consolas, Menlo, monospace",
                   "fontSize": "1em",
                   "lineHeight": "1.5",
                   "marginBottom": "1.5em",
-                    "padding": "0px",
+                  "padding": "0px 5px",
                   "textAlign": "left",
                   "width": "100%",
                 }
@@ -336,16 +297,15 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
                 onClick={[Function]}
                 style={
                   Object {
-                      "background": "#fff",
+                    "backgroundColor": "#3C444F",
                     "border": "none",
-                      "color": "#293238",
+                    "color": "#FFFFFF",
                     "cursor": "pointer",
                     "display": "block",
-                      "fontFamily": "Consolas, Menlo, monospace",
                     "fontSize": "1em",
                     "lineHeight": "1.5",
                     "marginBottom": "0.6em",
-                      "padding": "0px",
+                    "padding": "0px 5px",
                     "textAlign": "left",
                     "width": "100%",
                   }
@@ -359,6 +319,5 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
       </div>
     </StackTrace>
   </div>
-  </div>
 </StackTraceTab>
 `;

yarn.lock

@@ -2297,6 +2297,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
+
 base62@^1.1.0:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
@@ -8158,6 +8163,13 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redux-devtools-themes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redux-devtools-themes/-/redux-devtools-themes-1.0.0.tgz#c482dce3c5373976045f40134907d9dcb3ae3d5d"
+  integrity sha1-xILc48U3OXYEX0ATSQfZ3LOuPV0=
+  dependencies:
+    base16 "^1.0.0"
+
 redux@^3.5.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"