update readme

Author: ascoders

readme.md

@@ -1 +1,29 @@
 # dob-react-devtools [![npm version](https://img.shields.io/npm/v/dob-react-devtools.svg?style=flat)](https://www.npmjs.com/package/dob-react-devtools)
+
+Devtools for dob-react, with action and ui two way binding.
+
+![dob-react-devtools demo](https://user-images.githubusercontent.com/7970947/31849585-433f33d2-b60a-11e7-9a31-da84032b692a.gif)
+
+## Usage
+
+```typescript
+import "dob-react-devtools"
+import { startDebug } from "dob-react"
+
+startDebug()
+```
+
+## Installation
+
+Dob-react-devtools is available as the dob package on [npm](https://www.npmjs.com/package/dob-react-devtools).
+
+```
+tnpm i dob-react-devtools
+```
+
+## Features
+
+- UI elements that are decorated with Connect, will highlight when dob triggers rerender.
+- Visually record the triggered action history and display data changes.
+- When UI element rerender, you can see the list of action associated with it.
+- View each UI element, that each action triggerd.

src/demo/pages/simple-crud/article/index.component.tsx

@@ -12,13 +12,13 @@ export default class Article extends PureComponent<Props, State> {
     return (
       <li>
         <p>
-          文章名：{this.props.article.title}
+          title: {this.props.article.title}
         </p>
         <p>
-          作者：{this.props.article.author}
+          author: {this.props.article.author}
         </p>
         <input
-          placeholder="输入修改当前文章名.."
+          placeholder="change current article's title.."
           onChange={event => {
             this.props.ArticleAction.changeArticleTitle(this.props.index, event.currentTarget.value)
           }}

src/demo/pages/simple-crud/index.component.tsx

@@ -19,15 +19,19 @@ export default class Page1 extends PureComponent<Props, State> {
       <div>
         <button onClick={() => {
           this.props.ArticleAction.addArticle()
-        }}>添加文章</button>
+        }}>add article</button>
 
         <button onClick={() => {
-          this.props.ArticleAction.multipleAction('123')
-        }}>添加文章并修改文章名为123</button>
+          this.props.ArticleAction.addArticleAndChangeTitle('custom name')
+        }}>add article and change name</button>
 
         <button onClick={() => {
           this.props.ArticleAction.runAsyncTest()
-        }}>测试异步方法，值为 {this.props.ArticleStore.a.b.c.d}</button>
+        }}>test async action {this.props.ArticleStore.a.b.c.d}</button>
+
+        <button onClick={() => {
+          this.props.ArticleAction.runAnonymousTest()
+        }}>test anonymous action</button>
 
         <ul>
           {Articles}

src/demo/stores/article/action.ts

@@ -14,7 +14,7 @@ export class ArticleAction {
   @Action addArticle() {
     return this.ArticleStore.articles.push({
       id: Math.random(),
-      title: '测试',
+      title: 'test dob-react-devtools',
       author: 'ascoders'
     })
   }
@@ -28,7 +28,7 @@ export class ArticleAction {
     this.ArticleStore.articles.splice(index, 1)
   }
 
-  @Action multipleAction(title: string) {
+  @Action addArticleAndChangeTitle(title: string) {
     const index = this.addArticle()
     this.changeArticleTitle(index - 1, title)
   }
@@ -42,14 +42,17 @@ export class ArticleAction {
       }
     }
     waitOneMinute().then(() => {
-      Action(() => {
-        this.ArticleStore.a.b.c.d = 7
-        this.ArticleStore.a.b.c.d = 8
-        this.ArticleStore.a.b.c.d = 9
-      })
       this.ArticleStore.a.b.c.d = 7
       this.ArticleStore.a.b.c.d = 8
       this.ArticleStore.a.b.c.d = 9
     })
   }
+
+  @Action runAnonymousTest() {
+    this.ArticleStore.a.b.c.d = 7
+    Action(() => {
+      this.ArticleStore.a.b.c.d = 8
+    })
+    this.ArticleStore.a.b.c.d = 9
+  }
 }

src/tool-box/debug-line/action/action.component.tsx

@@ -70,7 +70,7 @@ export class Action extends React.PureComponent<Props, State>{
   private renderTitle() {
     if (this.props.debugInfo.name === null) {
       return (
-        <S.UnknowTitle>Unknow</S.UnknowTitle>
+        <S.AnonymousTitle>Anonymous</S.AnonymousTitle>
       )
     }
 

src/tool-box/debug-line/action/action.style.ts

@@ -35,7 +35,7 @@ export const Title = styled.div`
   `}
 `
 
-export const UnknowTitle = styled.div`
+export const AnonymousTitle = styled.div`
   text-shadow: 1px 1px #666, 0px 0px #111;
 `
 
@@ -49,6 +49,14 @@ export const ChangeContainer = styled.div`
   border-top: 1px solid #111;  
   border-bottom: 1px solid #404040; 
   overflow-x: auto;
+  &::-webkit-scrollbar-thumb {
+    background-color: #333;
+  }
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 8px;
+    background-color: #666;
+  }
 `
 
 export const ChangeBox = styled.div`