init release

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["es2015", "stage-2", "react"],
+  "plugins": ["transform-class-properties"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,16 @@
+
+# EditorConfig helps developers define and maintain
+# consistent coding styles between different editors and IDEs.
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,4 @@
+**/dist/*
+**/node_modules/*
+**/server.js
+**/webpack.config*.js

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "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,
+    }],
+    "comma-dangle": 0,
+    "id-length": 0,
+    "new-cap": 0,
+    "eol-last": 0,
+    "jsx-quotes": 0,
+    "consistent-return": 0
+  },
+  "plugins": [
+    "react"
+  ]
+}

.gitattributes

@@ -0,0 +1,38 @@
+# Define the line ending behavior of the different file extensions
+# Set default behaviour, in case users don't have core.autocrlf set.
+* text=auto
+* text eol=lf
+
+# Explicitly declare text files we want to always be normalized and converted
+# to native line endings on checkout.
+*.php text
+*.default text
+*.ctp text
+*.sql text
+*.md text
+*.po text
+*.js text
+*.css text
+*.ini text
+*.properties text
+*.txt text
+*.xml text
+*.yml text
+.htaccess text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.bat eol=crlf
+
+# Declare files that will always have LF line endings on checkout.
+*.pem eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary
+*.mo binary
+*.pdf binary
+*.ttf binary
+*.xls binary
+*.xlsx binary

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+*.log
+node_modules
+lib
+coverage
+_book
+tmp.js
+/dev
+/build

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Luo Gang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,57 @@
+Chrome React Perf
+
+![Demo](demo/v1.0.0.gif)
+
+## Features
+
+- Only inject script if Perf tab is open
+- Automatically show result when stop
+- Stop recording when Perf tab is closed
+
+## Link to chrome store
+https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm
+
+## How to get it work
+- Install the extension from Chrome Store
+- Expose Perf (make sure Perf.start() can run from console)
+
+### Expose Perf
+Chrome React Perf rely on a global variable called Perf. There are several ways to do that.
+- use webpack's expose loader<br/>
+  ```javascript
+  import 'expose?Perf!react-addons-perf'
+  ```
+  or
+  ```javascript
+  loaders: [
+    {
+      test: require.resolve("react-addons-perf"),
+      loader: "expose?Perf"
+    }
+  ],
+  ```
+- assign it to window
+  ```javascript
+  import Perf from 'react-addons-perf'
+  window.Perf = Perf
+  ```
+- If something goes wrong, [open an issue](https://github.com/crysislinux/chrome-react-perf/issues) or tweet me: [@crysislinux](https://twitter.com/crysislinux).
+
+## Install dependencies
+> npm install
+
+## Start with Hot Reloading
+
+> npm run dev
+
+## Build production version
+
+> npm run build
+
+## FAQ
+
+## Roadmap
+- [x] Start && Stop && Print
+- [ ] Get a better logo (Hope someone can help with this)
+- [ ] Support multiple profiles
+- [ ] Save settings to localStorage

app/actions/index.js

@@ -0,0 +1,65 @@
+/* global chrome */
+import * as ActionTypes from './types';
+// import makeActionCreator from '../utils/makeActionCreator';
+import { PERF_ACTION } from '../middleware/perf-action';
+
+export function connect() {
+  return {
+    [PERF_ACTION]: {
+      types: [
+        ActionTypes.CONNECT_REQUEST,
+        ActionTypes.CONNECT_SUCCESS,
+        ActionTypes.CONNECT_FAILURE
+      ]
+    }
+  };
+}
+
+export function startRecord() {
+  return {
+    [PERF_ACTION]: {
+      types: [
+        ActionTypes.START_RECORD_REQUEST,
+        ActionTypes.START_RECORD_SUCCESS,
+        ActionTypes.START_RECORD_FAILURE
+      ]
+    }
+  };
+}
+
+export function stopRecord() {
+  return {
+    [PERF_ACTION]: {
+      types: [
+        ActionTypes.STOP_RECORD_REQUEST,
+        ActionTypes.STOP_RECORD_SUCCESS,
+        ActionTypes.STOP_RECORD_FAILURE
+      ]
+    }
+  };
+}
+
+export function getLastMeasurements() {
+  return {
+    [PERF_ACTION]: {
+      types: [
+        ActionTypes.GET_LAST_MEASUREMENTS_REQUEST,
+        ActionTypes.GET_LAST_MEASUREMENTS_SUCCESS,
+        ActionTypes.GET_LAST_MEASUREMENTS_FAILURE
+      ]
+    }
+  };
+}
+
+export function printResult() {
+  return {
+    type: ActionTypes.PRINT_RESULT
+  };
+}
+
+export function changeShowItems(items) {
+  return {
+    type: ActionTypes.CHANGE_SHOW_ITEMS,
+    data: items
+  };
+}

app/actions/types.js

@@ -0,0 +1,17 @@
+export const START_RECORD_REQUEST = 'START_RECORD_REQUEST';
+export const START_RECORD_SUCCESS = 'START_RECORD_SUCCESS';
+export const START_RECORD_FAILURE = 'START_RECORD_FAILURE';
+
+export const STOP_RECORD_REQUEST = 'STOP_RECORD_REQUEST';
+export const STOP_RECORD_SUCCESS = 'STOP_RECORD_SUCCESS';
+export const STOP_RECORD_FAILURE = 'STOP_RECORD_FAILURE';
+
+export const GET_LAST_MEASUREMENTS_REQUEST = 'GET_LAST_MEASUREMENTS_REQUEST';
+export const GET_LAST_MEASUREMENTS_SUCCESS = 'GET_LAST_MEASUREMENTS_SUCCESS';
+export const GET_LAST_MEASUREMENTS_FAILURE = 'GET_LAST_MEASUREMENTS_FAILURE';
+
+export const CHANGE_SHOW_ITEMS = 'CHANGE_SHOW_ITEMS';
+
+export const CONNECT_REQUEST = 'CONNECT_REQUEST';
+export const CONNECT_SUCCESS = 'CONNECT_SUCCESS';
+export const CONNECT_FAILURE = 'CONNECT_FAILURE';

app/components/Button.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Button({ children, ...rest }) {
+  return (
+    <button {...rest}>{children}</button>
+  );
+}

app/components/ColDragHandler.css

@@ -0,0 +1,13 @@
+.handler {
+  height: 100%;
+  margin: 0 -4px;
+  position: relative;
+  z-index: 999;
+}
+
+.line {
+  height: 100%;
+  width: 0;
+  margin: 0 4px;
+  border-right: 1px solid #acacac;
+}

app/components/ColDragHandler.js

@@ -0,0 +1,94 @@
+import React, { Component, PropTypes } from 'react';
+import styles from './ColDragHandler.css';
+
+const propTypes = {
+  onMove: PropTypes.func,
+};
+
+/* eslint-disable  react/prefer-stateless-function */
+export default class DoublePanel extends Component {
+  static propTypes = propTypes;
+  constructor(props) {
+    super(props);
+    this.mouseDown = false;
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleMouseMove);
+    window.addEventListener('mouseup', this.handleMouseUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleMouseDown(e) {
+    e.preventDefault();
+
+    this.mouseDown = true;
+    this.startX = e.clientX;
+  }
+
+  handleMouseMove(e) {
+    e.preventDefault();
+    if (!this.mouseDown) {
+      return;
+    }
+
+    const movingX = e.clientX;
+
+    if (this.props.onMove) {
+      this.props.onMove(movingX - this.startX);
+    }
+    this.startX = movingX;
+  }
+
+  handleMouseUp() {
+    if (!this.mouseDown) {
+      return;
+    }
+    this.mouseDown = false;
+    this.restoreCursor();
+  }
+
+  handleMouseEnter() {
+    this.setColResizeCursor();
+  }
+
+  handleMouseLeave() {
+    if (!this.mouseDown) {
+      this.restoreCursor();
+    }
+  }
+
+  setColResizeCursor() {
+    if (!this.cursor) {
+      this.cursor = document.body.style.cursor;
+      document.body.style.cursor = 'col-resize';
+    }
+  }
+
+  restoreCursor() {
+    document.body.style.cursor = this.cursor;
+    this.cursor = null;
+  }
+
+  render() {
+    return (
+      <div className={styles.handler}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        <div className={styles.line}></div>
+      </div>
+    );
+  }
+}

app/components/Console/Console.css

@@ -0,0 +1,4 @@
+.console {
+  padding: 4px 0;
+  border-bottom: 1px solid #F0F0F0;
+}