Skip to content
Permalink
Browse files

merge with upstream

  • Loading branch information
johnnycoyle committed May 23, 2017
2 parents 493d19a + 934dc32 commit a558f99b698bb42e9838ffee3e140e2dded5de87
@@ -7,7 +7,6 @@
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"react-hot-loader/babel"
"transform-object-rest-spread"
]
}
@@ -1,4 +1,5 @@
**/dist/*
**/node_modules/*
**/server.js
**/webpack.config*.js
**/webpack.config*.js
**/webpack.config*.js
@@ -1,4 +1,3 @@
<<<<<<< HEAD
{
"extends": "airbnb",
"env": {
@@ -16,10 +15,6 @@
"react/no-multi-comp": 0,
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/jsx-no-bind": [2, {
'ignoreRefs': true,
'allowArrowFunctions': true,
}],
"id-length": 0,
"new-cap": 0,
"eol-last": 0,
@@ -30,34 +25,3 @@
"react"
]
}
=======
// {
// "extends": "airbnb",
// "env": {
// "browser": true,
// "mocha": true,
// "node": true
// },
// "parser": "babel-eslint",
// "rules": {
// "react/jsx-uses-react": 2,
// "react/jsx-uses-vars": 2,
// "react/react-in-jsx-scope": 2,
// "react/sort-comp": 0,
// "react/no-multi-comp": 0,
// "react/prefer-stateless-function": 0,
// "react/jsx-no-bind": [2, {
// "ignoreRefs": true,
// "allowArrowFunctions": true,
// }],
// "id-length": 0,
// "new-cap": 0,
// "eol-last": 0,
// "jsx-quotes": 0,
// "consistent-return": 0
// },
// "plugins": [
// "react"
// ]
// }
>>>>>>> chrome
@@ -6,4 +6,5 @@ tmp.js
npm
colors.scssnpm
*.png
!tachometer.png
!tachometer.png
*.psd
@@ -0,0 +1,13 @@
import * as ActionTypes from './types';

export function getPerfData() {
return {
[PERF_ACTION]: {
types: [
ActionTypes.GET_PERF_DATA_REQUEST,
ActionTypes.GET_PERF_DATA_SUCCESS,
ActionTypes.GET_PERF_DATA_FAILURE
]
}
};
}
@@ -0,0 +1,3 @@
export const GET_PERF_DATA_REQUEST = 'GET_PERF_DATA_REQUEST';
export const GET_PERF_DATA_SUCCESS = 'GET_PERF_DATA_SUCCESS';
export const GET_PERF_DATA_FAILURE = 'GET_PERF_DATA_FAILURE';
@@ -15,22 +15,20 @@ import {
} from 'Recharts';

const propTypes = {
perfData: PropTypes.array,
chartData: PropTypes.array,
perfItems: PropTypes.array.isRequired,
dataKeys: PropTypes.array.isRequired,
shouldAnimate: PropTypes.bool.isRequired,
};

const ProfileChart = (props) => {

const { perfData, perfItems, dataKeys } = props;

const { chartData, perfItems, dataKeys, shouldAnimate } = props;
let data;

perfItems.forEach((perfItem, i) => {
if (perfItem.selected) {
data = perfData[perfItem.id];
}
perfItems.forEach((perfItem) => {
if (perfItem.selected) data = chartData[perfItem.id];
});

let xDataKey;
const keys = Object.keys(data[0]);
keys.forEach((key) => {
@@ -100,7 +98,12 @@ const ProfileChart = (props) => {
<CartesianGrid stroke={'#757575'} strokeDasharray="1 1" />
<Tooltip />
<Legend verticalAlign="top" wrapperStyle={{ lineHeight: '40px' }} />
<Bar dataKey={yDataKey} fill='#7C4DFF' barSize={64} />
<Bar
dataKey={yDataKey}
fill='#7C4DFF'
barSize={64}
isAnimationActive={shouldAnimate}
/>
<Brush height={16} stroke='#757575' />
</BarChart>
</div>
@@ -118,7 +121,6 @@ const ProfileChart = (props) => {
</div>
</ReactTransition>
</div>

);
};

@@ -1,11 +1,10 @@
/*es-lint enable*/

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactTransition from 'react-transition-group/CSSTransitionGroup';
import ComponentView from './ComponentView';
import ViewController from './../components/ViewController';
import ProfileView from './ProfileView';
import ReactTransition from 'react-transition-group/CSSTransitionGroup';
import transitions from './../assets/transitions.css';
import styles from './../assets/app.css';

@@ -14,13 +13,12 @@ class App extends Component {
super(props);

this.haveReceivedPerfs = false;

this.profileVisibility;
this.componentVisibility;

this.state = {
view: 'componentView',
appActive: false,
view: 'profileView',
appActive: true,
perfData: {},
};

@@ -31,13 +29,13 @@ class App extends Component {

listenForPerfs() {
const backgroundPageConnection = chrome.runtime.connect({
name: "panel"
name: 'panel',
});
backgroundPageConnection.postMessage({
name: 'init',
tabId: chrome.devtools.inspectedWindow.tabId
tabId: chrome.devtools.inspectedWindow.tabId,
});
backgroundPageConnection.onMessage.addListener(message => {
backgroundPageConnection.onMessage.addListener((message) => {
if (!this.haveReceivedPerfs) {
this.haveReceivedPerfs = true;
}
@@ -56,70 +54,95 @@ class App extends Component {
}

buildMessage = (message) => {
if (message === 'toggleMessage')
return (<div key={1} id={styles.toggleMessage} onClick={this.handleClick}>Click here to begin listening for renders</div>)
if (message === 'toggleMessage') {
return (
<div
key={1}
id={styles.toggleMessage}
onClick={this.handleClick}
>
Click here to begin listening for renders
</div>
);
}
if (message === 'listening') {
return (<div key={10000} id={styles.listening}>React RPM is listening for renders...</div>)
return (
<div
key={10000}
id={styles.listening}
>
React RPM is listening for renders...
</div>
);
}
}

toggleViewHandler = () => {
let appView
this.state.view === 'componentView'
? appView = 'profileView'
: appView = 'componentView'
let appView;
if (this.state.view === 'componentView') appView = 'profileView';
else appView = 'componentView';
this.setState({ view: appView });
}

render() {

let message = [];
let componentView = [];
let profileView = [];
let viewController = [];

if (this.state.appActive) {
if (this.haveReceivedPerfs) {
this.message = [];
this.state.view === 'profileView'
? [this.profileVisibility, this.componentVisibility] = [true, false]
: [this.profileVisibility, this.componentVisibility] = [false, true]

viewController = (<ViewController selectedView={this.state.view}

toggleViewHandler={this.toggleViewHandler}/>);

componentView = (<ComponentView key={1} componentVisibility={this.componentVisibility} perfData={this.state.perfData} />);

profileView = (<ProfileView key={2} profileVisibility={this.profileVisibility} newPerfs={this.state.perfData} />);

if (this.state.view === 'profileView') [this.profileVisibility, this.componentVisibility] = [true, false];
else [this.profileVisibility, this.componentVisibility] = [false, true];

viewController = (
<ViewController
selectedView={this.state.view}
toggleViewHandler={this.toggleViewHandler}
/>
);
componentView = (
<ComponentView
key={1}
componentVisibility={this.componentVisibility}
perfData={this.state.perfData}
/>
);
profileView = (
<ProfileView
key={2}
profileVisibility={this.profileVisibility}
perfData={this.state.perfData}
/>
);
}
} else {
this.message.push(this.buildMessage('toggleMessage'));
}
else this.message.push(this.buildMessage('toggleMessage'));

return (
<div id={styles.main_container}>
{viewController}
<div
id={styles.bannerContainer}>
<span id={styles.bannerText}
>react rpm | real-time performance metrics</span>
<div id={styles.bannerContainer}>
<span id={styles.bannerText}>react rpm | real-time performance metrics</span>
</div>
{this.logo}
<div id={styles.message_container}>
<ReactTransition
transitionName={transitions}
transitionAppear={true}
transitionAppearTimeout={3000} transitionEnterTimeout={2000} transitionLeaveTimeout={300}>
transitionAppearTimeout={3000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={300}
>
{this.message}
</ReactTransition>
</div>
{profileView}
{componentView}
</div>
)
);
}
}

export default App;

0 comments on commit a558f99

Please sign in to comment.
You can’t perform that action at this time.