redux-devtools-trace-monitor - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

lib/react-error-overlay/components/CodeBlock.js

@@ -7,6 +7,2 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _react = require('react');
@@ -16,16 +12,8 @@
 
-var _styles = require('../styles');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * 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.
- */
-
-var _preStyle = {
+var preStyle = {
   position: 'relative',
   display: 'block',
+  backgroundColor: '#000',
   padding: '0.5em',
@@ -37,12 +25,9 @@ marginTop: '0.5em',
   borderRadius: '0.25rem'
-};
+}; /**
+    * 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.
+    */
 
-var primaryPreStyle = (0, _extends3.default)({}, _preStyle, {
-  backgroundColor: _styles.redTransparent
-});
-
-var secondaryPreStyle = (0, _extends3.default)({}, _preStyle, {
-  backgroundColor: _styles.yellowTransparent
-});
-
 var codeStyle = {
@@ -53,3 +38,2 @@ fontFamily: 'Consolas, Menlo, monospace'
 function CodeBlock(props) {
-  var preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
   var codeBlock = { __html: props.codeHTML };
@@ -56,0 +40,0 @@

lib/react-error-overlay/components/Collapsible.js

@@ -31,3 +31,3 @@ 'use strict';
 
-var _styles = require('../styles');
+var _reduxDevtoolsThemes = require('redux-devtools-themes');
 
@@ -44,3 +44,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _collapsibleStyle = {
-  color: _styles.black,
+  color: _reduxDevtoolsThemes.nicinabox.base06,
+  backgroundColor: _reduxDevtoolsThemes.nicinabox.base01,
   cursor: 'pointer',
@@ -51,6 +52,4 @@ border: 'none',
   textAlign: 'left',
-  background: '#fff',
-  fontFamily: 'Consolas, Menlo, monospace',
   fontSize: '1em',
-  padding: '0px',
+  padding: '0px 5px',
   lineHeight: '1.5'
@@ -82,9 +81,11 @@ };
     return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Collapsible.__proto__ || Object.getPrototypeOf(Collapsible)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      collapsed: true
-    }, _this.toggleCollaped = function () {
+      collapsed: undefined
+    }, _this.toggleCollapsed = function () {
       _this.setState(function (state) {
         return {
-          collapsed: !state.collapsed
+          collapsed: !_this.isCollapsed(state)
         };
       });
+    }, _this.isCollapsed = function (state) {
+      return state.collapsed === undefined ? _this.props.collapsedByDefault : state.collapsed;
     }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
@@ -97,3 +98,3 @@ }
       var count = this.props.children.length;
-      var collapsed = this.state.collapsed;
+      var collapsed = this.isCollapsed(this.state);
       return _react2.default.createElement(
@@ -105,3 +106,3 @@ 'div',
           {
-            onClick: this.toggleCollaped,
+            onClick: this.toggleCollapsed,
             style: collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
@@ -118,3 +119,3 @@ },
             {
-              onClick: this.toggleCollaped,
+              onClick: this.toggleCollapsed,
               style: collapsibleExpandedStyle
@@ -121,0 +122,0 @@ },

lib/react-error-overlay/containers/StackFrame.js

@@ -33,3 +33,3 @@ 'use strict';
 
-var _styles = require('../styles');
+var _reduxDevtoolsThemes = require('redux-devtools-themes');
 
@@ -52,3 +52,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   textDecoration: 'none',
-  color: _styles.darkGray,
+  color: _reduxDevtoolsThemes.nicinabox.base05,
   cursor: 'pointer'
@@ -63,3 +63,3 @@ };
   marginBottom: '1.5em',
-  color: _styles.darkGray,
+  color: _reduxDevtoolsThemes.nicinabox.base05,
   cursor: 'pointer',
@@ -70,3 +70,3 @@ border: 'none',
   textAlign: 'left',
-  background: '#fff',
+  background: 'transparent',
   fontFamily: 'Consolas, Menlo, monospace',
@@ -73,0 +73,0 @@ fontSize: '1em',

lib/react-error-overlay/containers/StackFrameCodeBlock.js

@@ -19,4 +19,2 @@ 'use strict';
 
-var _styles = require('../styles');
-
 var _generateAnsiHTML = require('../utils/generateAnsiHTML');
@@ -28,2 +26,4 @@
 
+var _reduxDevtoolsThemes = require('redux-devtools-themes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,3 +95,3 @@
       // $FlowFixMe
-      (0, _css.applyStyles)(node, main ? _styles.primaryErrorStyle : _styles.secondaryErrorStyle);
+      (0, _css.applyStyles)(node, { 'background-color': main ? _reduxDevtoolsThemes.nicinabox.base02 : _reduxDevtoolsThemes.nicinabox.base01 });
       // eslint-disable-next-line
@@ -98,0 +98,0 @@ break oLoop;

lib/react-error-overlay/containers/StackTrace.js

@@ -73,3 +73,4 @@ 'use strict';
           currentBundle = [],
-          bundleCount = 0;
+          bundleCount = 0,
+          anyNodeExpanded = false;
 
@@ -84,2 +85,6 @@ stackFrames.forEach(function (frame, index) {
 
+        if (!shouldCollapse) {
+          anyNodeExpanded = true;
+        }
+
         if (!isInternalUrl) {
@@ -110,3 +115,3 @@ hasReachedAppCode = true;
               _Collapsible2.default,
-              { key: 'bundle-' + bundleCount },
+              { collapsedByDefault: anyNodeExpanded, key: 'bundle-' + bundleCount },
               currentBundle
@@ -113,0 +118,0 @@ ));

lib/react-error-overlay/utils/dom/absolutifyCaret.js

@@ -40,2 +40,3 @@ 'use strict';
     c.style.position = 'absolute';
+    c.style.marginTop = '-7px';
     // $FlowFixMe
@@ -42,0 +43,0 @@ removeNextBr(component, c);

lib/react-error-overlay/utils/generateAnsiHTML.js

@@ -11,2 +11,4 @@ 'use strict';
 
+var _reduxDevtoolsThemes = require('redux-devtools-themes');
+
 var _htmlEntities = require('html-entities');
@@ -16,59 +18,22 @@
 
-/**
- * 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.
- */
+var entities = new _htmlEntities.AllHtmlEntities(); /**
+                                                     * 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.
+                                                     */
 
-var entities = new _htmlEntities.AllHtmlEntities();
-
-// 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': _reduxDevtoolsThemes.nicinabox.base03,
+  'ansi-bright-yellow': _reduxDevtoolsThemes.nicinabox.base0A,
+  'ansi-yellow': _reduxDevtoolsThemes.nicinabox.base0B,
+  'ansi-bright-green': _reduxDevtoolsThemes.nicinabox.base0B,
+  'ansi-green': _reduxDevtoolsThemes.nicinabox.base0F,
+  'ansi-bright-cyan': _reduxDevtoolsThemes.nicinabox.base0D,
+  'ansi-cyan': _reduxDevtoolsThemes.nicinabox.base0C,
+  'ansi-bright-red': _reduxDevtoolsThemes.nicinabox.base09,
+  'ansi-red': _reduxDevtoolsThemes.nicinabox.base0E,
+  'ansi-bright-magenta': _reduxDevtoolsThemes.nicinabox.base0F,
+  'ansi-magenta': _reduxDevtoolsThemes.nicinabox.base0E,
+  'ansi-white': _reduxDevtoolsThemes.nicinabox.base00
 };
@@ -95,5 +60,5 @@
       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 {
@@ -100,0 +65,0 @@ if (fg != null) {

lib/react-error-overlay/utils/getStackFrames.js

@@ -14,8 +14,3 @@ 'use strict';
 
-/**
- * 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.
- */
+var _presets = require('../../presets');
 
@@ -46,9 +41,15 @@ function getStackFrames(error) {
     return enhancedFrames.filter(function (_ref) {
-      var functionName = _ref.functionName;
-      return functionName == null || functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1;
+      var functionName = _ref.functionName,
+          fileName = _ref.fileName;
+      return (functionName == null || functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1) && !_presets.toExclude.test(fileName);
     });
   });
-}
+} /**
+   * 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.
+   */
 
 exports.default = getStackFrames;
 exports.getStackFrames = getStackFrames;

lib/StackTraceTab.js

@@ -34,4 +34,10 @@ 'use strict';
 
+var _openFile = require('./openFile');
+
+var _openFile2 = _interopRequireDefault(_openFile);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var rootStyle = { padding: '5px 10px' };
+
 var StackTraceTab = function (_Component) {
@@ -68,17 +74,3 @@ (0, _inherits3.default)(StackTraceTab, _Component);
           */
-          var adjustedLineNumber = Math.max(lineNumber - 1, 0);
-
-          chrome.devtools.panels.openResource(fileName, adjustedLineNumber, function (result) {
-            //console.log("openResource callback args: ", callbackArgs);
-            //console.log("Testing");
-            if (result.isError) {
-              var finalFileName = matchingStackFrame.fileName,
-                  finalLineNumber = matchingStackFrame.lineNumber;
-
-              var _adjustedLineNumber = Math.max(finalLineNumber - 1, 0);
-              chrome.devtools.panels.openResource(finalFileName, _adjustedLineNumber, function (result) {
-                // console.log("openResource result: ", result);
-              });
-            }
-          });
+          (0, _openFile2.default)(fileName, lineNumber, matchingStackFrame);
         }
@@ -88,2 +80,7 @@ }
 
+    _this.openDocs = function (e) {
+      e.stopPropagation();
+      window.open('https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Features/Trace.md');
+    };
+
     _this.state = {
@@ -141,3 +138,6 @@ stackFrames: []
       } else {
-        this.setState({ stackFrames: [] });
+        this.setState({
+          stackFrames: [],
+          showDocsLink: liftedAction.action && liftedAction.action.type && liftedAction.action.type !== '@@INIT'
+        });
       }
@@ -148,23 +148,30 @@ }
     value: function render() {
-      var stackFrames = this.state.stackFrames;
+      var _state = this.state,
+          stackFrames = _state.stackFrames,
+          showDocsLink = _state.showDocsLink;
 
 
+      if (showDocsLink) {
+        return _react2.default.createElement(
+          'div',
+          { style: rootStyle },
+          'To enable tracing action calls, you should set `trace` option to `true` for Redux DevTools enhancer. Refer to ',
+          _react2.default.createElement(
+            'a',
+            { href: '#', onClick: this.openDocs },
+            'this page'
+          ),
+          ' for more details.'
+        );
+      }
+
       return _react2.default.createElement(
         'div',
-        { style: { backgroundColor: 'white', color: 'black' } },
-        _react2.default.createElement(
-          'h2',
-          null,
-          'Dispatched Action Stack Trace'
-        ),
-        _react2.default.createElement(
-          'div',
-          { style: { display: 'flex', flexDirection: 'column' } },
-          _react2.default.createElement(_StackTrace2.default, {
-            stackFrames: stackFrames,
-            errorName: "N/A",
-            contextSize: 3,
-            editorHandler: this.onStackLocationClicked
-          })
-        )
+        { style: rootStyle },
+        _react2.default.createElement(_StackTrace2.default, {
+          stackFrames: stackFrames,
+          errorName: "N/A",
+          contextSize: 3,
+          editorHandler: this.onStackLocationClicked
+        })
       );
@@ -171,0 +178,0 @@ }

package.json

 {
   "name": "redux-devtools-trace-monitor",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Submonitor for Redux DevTools inspector to show stack traces.",
@@ -60,4 +60,5 @@ "repository": "https://github.com/reduxjs/redux-devtools",
     "react": "^15.4.0",
+    "redux-devtools-themes": "^1.0.0",
     "settle-promise": "^1.0.0"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70862

increased by3.89%

Number of package files

26

increased by4%

Lines of code

1693

increased by1.26%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedredux-devtools-themes@^1.0.0

• + Addedbase16@1.0.0(transitive)

• + Addedredux-devtools-themes@1.0.0(transitive)