mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-10 19:56:54 +03:00
Implement redux-devtools-themes and fix styles
This commit is contained in:
Zalmoxisus
parent
d338dd96b4
commit
7f2979bbe4
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,22 +91,18 @@ export default class StackTraceTab extends Component {
|
|||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const {stackFrames} = this.state;
|
||||
|
||||
return (
|
||||
<div style={{backgroundColor: 'white', color: 'black'}}>
|
||||
<h2>Dispatched Action Stack Trace</h2>
|
||||
<div style={{display: 'flex', flexDirection: 'column'}}>
|
||||
<StackTrace
|
||||
stackFrames={stackFrames}
|
||||
errorName={"N/A"}
|
||||
contextSize={3}
|
||||
editorHandler={this.onStackLocationClicked}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{padding: '5px 10px'}}>
|
||||
<StackTrace
|
||||
stackFrames={stackFrames}
|
||||
errorName={"N/A"}
|
||||
contextSize={3}
|
||||
editorHandler={this.onStackLocationClicked}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -33,6 +33,7 @@ function absolutifyCaret(component: Node) {
|
|||
}
|
||||
// $FlowFixMe
|
||||
c.style.position = 'absolute';
|
||||
c.style.marginTop = '-7px';
|
||||
// $FlowFixMe
|
||||
removeNextBr(component, c);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-yellow': 'yellow',
|
||||
'ansi-yellow': 'yellow',
|
||||
'ansi-bright-green': 'green',
|
||||
'ansi-green': 'green',
|
||||
'ansi-bright-cyan': 'cyan',
|
||||
'ansi-cyan': 'cyan',
|
||||
'ansi-bright-red': 'red',
|
||||
'ansi-red': 'red',
|
||||
'ansi-bright-magenta': 'magenta',
|
||||
'ansi-magenta': 'magenta',
|
||||
'ansi-white': 'darkgrey',
|
||||
'ansi-bright-black': theme.base03,
|
||||
'ansi-bright-yellow': theme.base0A,
|
||||
'ansi-yellow': theme.base0B,
|
||||
'ansi-bright-green': theme.base0B,
|
||||
'ansi-green': theme.base0F,
|
||||
'ansi-bright-cyan': theme.base0D,
|
||||
'ansi-cyan': theme.base0C,
|
||||
'ansi-bright-red': theme.base09,
|
||||
'ansi-red': theme.base0E,
|
||||
'ansi-bright-magenta': theme.base0F,
|
||||
'ansi-magenta': theme.base0E,
|
||||
'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
|
||||
|
|
|
|||
|
|
@ -5,40 +5,27 @@ exports[`StackTraceTab component should render with no props 1`] = `
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"color": "black",
|
||||
"padding": "5px 10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h2>
|
||||
Dispatched Action Stack Trace
|
||||
</h2>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
}
|
||||
}
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={Array []}
|
||||
>
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={Array []}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
/>
|
||||
</StackTrace>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</StackTrace>
|
||||
</div>
|
||||
</StackTraceTab>
|
||||
`;
|
||||
|
|
@ -79,40 +66,27 @@ exports[`StackTraceTab component should render with props, but without stack 1`]
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"color": "black",
|
||||
"padding": "5px 10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h2>
|
||||
Dispatched Action Stack Trace
|
||||
</h2>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
}
|
||||
}
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={Array []}
|
||||
>
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={Array []}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
/>
|
||||
</StackTrace>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</StackTrace>
|
||||
</div>
|
||||
</StackTraceTab>
|
||||
`;
|
||||
|
|
@ -153,212 +127,197 @@ exports[`StackTraceTab component should render with trace stack 1`] = `
|
|||
<div
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"color": "black",
|
||||
"padding": "5px 10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h2>
|
||||
Dispatched Action Stack Trace
|
||||
</h2>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
}
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={
|
||||
Array [
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 24,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn1",
|
||||
"lineNumber": 72,
|
||||
},
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 31,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn2",
|
||||
"lineNumber": 84,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<StackTrace
|
||||
contextSize={3}
|
||||
editorHandler={[Function]}
|
||||
errorName="N/A"
|
||||
stackFrames={
|
||||
Array [
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 24,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn1",
|
||||
"lineNumber": 72,
|
||||
},
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 31,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn2",
|
||||
"lineNumber": 84,
|
||||
},
|
||||
]
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 1 auto",
|
||||
"fontSize": "1em",
|
||||
"minHeight": "0px",
|
||||
"overflow": "auto",
|
||||
}
|
||||
}
|
||||
<Collapsible
|
||||
key="bundle-1"
|
||||
>
|
||||
<Collapsible
|
||||
key="bundle-1"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#3C444F",
|
||||
"border": "none",
|
||||
"color": "#FFFFFF",
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontSize": "1em",
|
||||
"lineHeight": "1.5",
|
||||
"marginBottom": "1.5em",
|
||||
"padding": "0px 5px",
|
||||
"textAlign": "left",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
▶ 2 stack frames were collapsed.
|
||||
</button>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackFrame
|
||||
contextSize={3}
|
||||
critical={true}
|
||||
editorHandler={[Function]}
|
||||
frame={
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 24,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn1",
|
||||
"lineNumber": 72,
|
||||
}
|
||||
}
|
||||
key="frame-0"
|
||||
showCode={false}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
fn1
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "0.9em",
|
||||
"marginBottom": "0.9em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
onClick={null}
|
||||
onKeyDown={null}
|
||||
style={null}
|
||||
tabIndex={null}
|
||||
>
|
||||
app.js:72:24
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</StackFrame>
|
||||
<StackFrame
|
||||
contextSize={3}
|
||||
critical={false}
|
||||
editorHandler={[Function]}
|
||||
frame={
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 31,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn2",
|
||||
"lineNumber": 84,
|
||||
}
|
||||
}
|
||||
key="frame-1"
|
||||
showCode={false}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
fn2
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "0.9em",
|
||||
"marginBottom": "0.9em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
onClick={null}
|
||||
onKeyDown={null}
|
||||
style={null}
|
||||
tabIndex={null}
|
||||
>
|
||||
app.js:84:31
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</StackFrame>
|
||||
<button
|
||||
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",
|
||||
"marginBottom": "0.6em",
|
||||
"padding": "0px 5px",
|
||||
"textAlign": "left",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
▶ 2 stack frames were collapsed.
|
||||
▲ 2 stack frames were expanded.
|
||||
</button>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"display": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackFrame
|
||||
contextSize={3}
|
||||
critical={true}
|
||||
editorHandler={[Function]}
|
||||
frame={
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 24,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn1",
|
||||
"lineNumber": 72,
|
||||
}
|
||||
}
|
||||
key="frame-0"
|
||||
showCode={false}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
fn1
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "0.9em",
|
||||
"marginBottom": "0.9em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
onClick={null}
|
||||
onKeyDown={null}
|
||||
style={null}
|
||||
tabIndex={null}
|
||||
>
|
||||
app.js:72:24
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</StackFrame>
|
||||
<StackFrame
|
||||
contextSize={3}
|
||||
critical={false}
|
||||
editorHandler={[Function]}
|
||||
frame={
|
||||
StackFrame {
|
||||
"_originalColumnNumber": null,
|
||||
"_originalFileName": null,
|
||||
"_originalFunctionName": null,
|
||||
"_originalLineNumber": null,
|
||||
"_originalScriptCode": null,
|
||||
"_scriptCode": null,
|
||||
"columnNumber": 31,
|
||||
"fileName": "app.js",
|
||||
"functionName": "fn2",
|
||||
"lineNumber": 84,
|
||||
}
|
||||
}
|
||||
key="frame-1"
|
||||
showCode={false}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
fn2
|
||||
</div>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "0.9em",
|
||||
"marginBottom": "0.9em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
onClick={null}
|
||||
onKeyDown={null}
|
||||
style={null}
|
||||
tabIndex={null}
|
||||
>
|
||||
app.js:84:31
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</StackFrame>
|
||||
<button
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#fff",
|
||||
"border": "none",
|
||||
"color": "#293238",
|
||||
"cursor": "pointer",
|
||||
"display": "block",
|
||||
"fontFamily": "Consolas, Menlo, monospace",
|
||||
"fontSize": "1em",
|
||||
"lineHeight": "1.5",
|
||||
"marginBottom": "0.6em",
|
||||
"padding": "0px",
|
||||
"textAlign": "left",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
▲ 2 stack frames were expanded.
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</StackTrace>
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</StackTrace>
|
||||
</div>
|
||||
</StackTraceTab>
|
||||
`;
|
||||
|
|
|
|||
12
yarn.lock
12
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user