From c8f41d45ea8d2923ecfc23faf246cb82ce255571 Mon Sep 17 00:00:00 2001
From: Morten Olsen <morten@olsen.pro>
Date: Wed, 22 Aug 2018 23:44:26 +0200
Subject: [PATCH] Misc

---
 demo/App.js                                   |   6 +-
 lib/package.json                              |   2 +-
 lib/src/components/DevTool/Console/Input.js   |   5 +-
 lib/src/components/DevTool/Console/Output.js  |   3 +-
 lib/src/components/DevTool/Console/index.js   |  71 ++++++++++-----
 .../components/DevTool/Requests/Details.js    |  17 ++--
 lib/src/components/DevTool/Requests/index.js  |  35 +++-----
 lib/src/components/DevTool/Storage/Keys.js    |   2 +-
 lib/src/components/DevTool/Storage/index.js   |  53 +++++-------
 lib/src/components/DevTool/Tab.js             |   9 +-
 lib/src/components/DevTool/index.js           |  81 ++++++++++++++----
 lib/src/components/base/Icon/check.png        | Bin 0 -> 6027 bytes
 lib/src/components/base/Icon/filter.png       | Bin 0 -> 6382 bytes
 lib/src/components/base/Icon/index.js         |   6 ++
 lib/src/components/base/Icon/square.png       | Bin 0 -> 4474 bytes
 lib/src/components/base/Toolbar.js            |  47 ----------
 lib/src/components/base/Toolbar/Button.js     |  31 +++++++
 lib/src/components/base/Toolbar/Selector.js   |  78 +++++++++++++++++
 lib/src/components/base/Toolbar/Seperator.js  |   7 ++
 lib/src/components/base/Toolbar/index.js      |  29 +++++++
 lib/src/console.js                            |   8 ++
 lib/src/index.js                              |   2 +
 lib/src/log.js                                |  14 +--
 lib/src/network.js                            |   9 ++
 24 files changed, 352 insertions(+), 163 deletions(-)
 create mode 100644 lib/src/components/base/Icon/check.png
 create mode 100644 lib/src/components/base/Icon/filter.png
 create mode 100644 lib/src/components/base/Icon/square.png
 delete mode 100644 lib/src/components/base/Toolbar.js
 create mode 100644 lib/src/components/base/Toolbar/Button.js
 create mode 100644 lib/src/components/base/Toolbar/Selector.js
 create mode 100644 lib/src/components/base/Toolbar/Seperator.js
 create mode 100644 lib/src/components/base/Toolbar/index.js
 create mode 100644 lib/src/console.js

diff --git a/demo/App.js b/demo/App.js
index 4482578..60109d7 100644
--- a/demo/App.js
+++ b/demo/App.js
@@ -14,10 +14,12 @@ import {
   log,
   network,
   show,
+  context,
 } from 'react-native-debug-console';
 
 network.attach();
 log.attach();
+context.hello = () => 'earth';
 
 console.log('fooo');
 let xhr = new XMLHttpRequest();
@@ -105,11 +107,11 @@ export default class App extends React.Component {
             />
             <View style={{ height: 10 }} />
           </View>
-          <DevTool
+          {/* <DevTool
             style={{
               flex: 1,
             }}
-          />
+          /> */}
           <DevToolModal />
         </KeyboardAvoidingView>
       </SafeAreaView>
diff --git a/lib/package.json b/lib/package.json
index fe27ec6..99deddb 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-console",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "main": "src/index.js",
   "repository": {
     "url": "https://github.com/morten-olsen/react-native-debugger"
diff --git a/lib/src/components/DevTool/Console/Input.js b/lib/src/components/DevTool/Console/Input.js
index b13daf2..3da143a 100644
--- a/lib/src/components/DevTool/Console/Input.js
+++ b/lib/src/components/DevTool/Console/Input.js
@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import styled from 'styled-components/native';
 import State from '../../data/State';
+import { context } from '../../../console';
 import log from '../../../log';
 import Icon from '../../base/Icon';
 
@@ -86,8 +87,8 @@ const Input = ({
         <Button
           onPress={() => {
             const newHistory = [...history, text];
-            const contextKeys = Object.keys(log.context);
-            const contextValues = Object.values(log.context);
+            const contextKeys = Object.keys(context);
+            const contextValues = Object.values(context);
             const fn = new Function(...contextKeys, text);
             try {
               fn(...contextValues);
diff --git a/lib/src/components/DevTool/Console/Output.js b/lib/src/components/DevTool/Console/Output.js
index 0249692..5d040ce 100644
--- a/lib/src/components/DevTool/Console/Output.js
+++ b/lib/src/components/DevTool/Console/Output.js
@@ -101,6 +101,7 @@ const OutputList = ({
 const Console = ({
   logs,
   includeStackTrace,
+  filter = [],
 }) => (
   <ScrollView
     ref={ref => this.scrollView = ref}
@@ -109,7 +110,7 @@ const Console = ({
     }}
   >
     <Wrapper>
-      {logs.map((log, i) => (
+      {logs.filter(l => filter.includes(l.type)).map((log, i) => (
         <Row key={i}>
           <Emphasis color={getColor(log.type)}>
             {log.type}
diff --git a/lib/src/components/DevTool/Console/index.js b/lib/src/components/DevTool/Console/index.js
index 8509c8a..8008c53 100644
--- a/lib/src/components/DevTool/Console/index.js
+++ b/lib/src/components/DevTool/Console/index.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import {
   StyleSheet,
-  Clipboard,
-  Alert,
   View,
 } from 'react-native';
 import log from '../../../log';
 import Log from '../../data/Log';
-import Toolbar from '../../base/Toolbar';
+import State from '../../data/State';
+import Toolbar, {
+  Button,
+  Selector,
+  Seperator,
+} from '../../base/Toolbar';
 import Output from './Output';
 import Input from './Input';
 
@@ -17,31 +20,53 @@ const styles = StyleSheet.create({
   },
 });
 
+const initFilters = [
+  'error',
+  'warn',
+  'info',
+  'debug',
+].map(i => ({
+  name: i,
+  value: i,
+  selected: true,
+}))
+
 const Console = ({
   includeStackTrace,
 }) => (
   <Log>
     {({ logs }) => (
-      <View style={styles.container}>
-        <Toolbar
-          items={[{
-            name: 'Download',
-            icon: 'download',
-            onPress: () => {
-              Clipboard.setString(JSON.stringify(logs, null, '  '));
-              Alert.alert(
-                'Copied to clipboard',
-              );
-            },
-          }, {
-            name: 'Clear',
-            icon: 'trash',
-            onPress: () => log.clear(),
-          }]}
-        />
-        <Output logs={logs} includeStackTrace={includeStackTrace} />
-        <Input />
-      </View>
+      <State
+        initState={{
+          filters: initFilters,
+        }}
+      >
+        {({ filters }, setState) => (
+          <View style={styles.container}>
+            <Toolbar>
+              <Selector
+                name="Filter"
+                icon="filter"
+                options={filters}
+                multiSelect
+                onSelect={(selected) => {
+                  setState({
+                    filters: selected,
+                  });
+                }}
+              />
+              <Seperator />
+              <Button
+                name="Clear"
+                icon="trash"
+                onPress={() => log.clear()}
+              />
+            </Toolbar>
+            <Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
+            <Input />
+          </View>
+        )}
+      </State>
     )}
   </Log>
 );
diff --git a/lib/src/components/DevTool/Requests/Details.js b/lib/src/components/DevTool/Requests/Details.js
index 422f0b9..251ef1e 100644
--- a/lib/src/components/DevTool/Requests/Details.js
+++ b/lib/src/components/DevTool/Requests/Details.js
@@ -14,7 +14,6 @@ import CellHeader from '../../base/CellHeader';
 import Tab from '../Tab';
 
 const WebView = styled.WebView`
-  background: red;
 `;
 
 const theme = {
@@ -42,11 +41,10 @@ const Indented = styled.View`
   margin: 0 25px;
 `;
 
-const getResponse = (request) => {
+const getResponse = (contentType, request) => {
   if (request.responseType == 'blob' || request.responseType == 'ArrayBuffer') {
     return <Emphasis>🤖 Binary</Emphasis>
   }
-  const contentType = request.getResponseHeader('content-type') || '';
   const contentTypes = contentType.split(';').map(c => c.trim());
 
   if (contentTypes.includes('application/json')) {
@@ -57,12 +55,13 @@ const getResponse = (request) => {
   return <Fixed selectable={true}>{request.responseText}</Fixed>;
 }
 
+let i = 0;
 const Data = ({
   url,
   method,
   status,
   headers,
-  request,
+  requestHeaders,
   args = [],
 }) => {
   const headerInfo = Object.keys(headers).map(key => `${key}: ${headers[key]}`).join('\n');
@@ -73,7 +72,7 @@ const Data = ({
         <Cell left="Method" right={method} />
         <Cell left="Url" right={url} />
         <CellHeader>Response Headers</CellHeader>
-        <Indented><Fixed>{request.getAllResponseHeaders()}</Fixed></Indented>
+        <Indented><Fixed>{requestHeaders}</Fixed></Indented>
         {headerInfo && (
           <Fragment>
             <CellHeader>Request Headers</CellHeader>
@@ -92,21 +91,21 @@ const Data = ({
 };
 
 const Response = ({
+  contentType,
   request,
 }) => (
   <ScrollView>
     <View>
-      {getResponse(request)}
+      {getResponse(contentType, request)}
     </View>
   </ScrollView>
 );
 
 
-const getPreview = (request, url) => {
+const getPreview = (contentType, request, url) => {
   if (request.responseType == 'blob' || request.responseType == 'ArrayBuffer') {
     return [];
   }
-  const contentType = request.getResponseHeader('content-type') || '';
   const contentTypes = contentType.split(';').map(c => c.trim());
 
   if (contentTypes.includes('text/html')) {
@@ -134,7 +133,7 @@ const RequestDetails = (props) => (
     }, {
       name: 'Response',
       view: <Response {...props} />
-    }, ...getPreview(props.request, props.url)]}
+    }, ...getPreview(props.contentType, props.request, props.url)]}
   />
 );
 
diff --git a/lib/src/components/DevTool/Requests/index.js b/lib/src/components/DevTool/Requests/index.js
index 3afb9b2..0363f9d 100644
--- a/lib/src/components/DevTool/Requests/index.js
+++ b/lib/src/components/DevTool/Requests/index.js
@@ -2,15 +2,14 @@ import React from 'react';
 import {
   StyleSheet,
   View,
-  Clipboard,
-  Alert,
-  Text,
-  TouchableOpacity,
 } from 'react-native';
 import network from '../../../network';
 import State from '../../data/State';
 import Network from '../../data/Network';
-import Toolbar from '../../base/Toolbar';
+import Toolbar, {
+  Button,
+  Seperator,
+} from '../../base/Toolbar';
 import Details from './Details';
 import List from './List';
 
@@ -27,7 +26,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
+let i = 0;
 const Console = () => (
   <State>
     {({
@@ -38,22 +37,14 @@ const Console = () => (
           const selected = active >= 0 ? requests[active] : undefined;
           return (
             <View style={styles.container}>
-              <Toolbar
-                items={[{
-                  name: 'Download',
-                  icon: 'download',
-                  onPress: () => {
-                    Clipboard.setString(JSON.stringify(requests, null, '  '));
-                    Alert.alert(
-                      'Copied to clipboard',
-                    );
-                  },
-                }, {
-                  name: 'Clear',
-                  icon: 'trash',
-                  onPress: () => network.clear(),
-                }]}
-              />
+              <Toolbar>
+                <Seperator />
+                <Button
+                  name="Clear"
+                  icon="trash"
+                  onPress={() => network.clear()}
+                />
+              </Toolbar>
               <List
                 selected={selected ? selected.id : undefined}
                 requests={requests}
diff --git a/lib/src/components/DevTool/Storage/Keys.js b/lib/src/components/DevTool/Storage/Keys.js
index 9dd9256..cf77a96 100644
--- a/lib/src/components/DevTool/Storage/Keys.js
+++ b/lib/src/components/DevTool/Storage/Keys.js
@@ -24,7 +24,7 @@ const Keys = ({
     <Wrapper>
       {keys.map(key => (
         <Button
-          key={key}
+          key={key || '[unknown]'}
           onPress={() => onSelect(key)}
         >
           <Row
diff --git a/lib/src/components/DevTool/Storage/index.js b/lib/src/components/DevTool/Storage/index.js
index 7bc46d6..f859bdb 100644
--- a/lib/src/components/DevTool/Storage/index.js
+++ b/lib/src/components/DevTool/Storage/index.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components/native';
-import {
-  Clipboard,
-  Alert,
-} from 'react-native';
 import Storage from '../../data/Storage';
 import State from '../../data/State';
-import Toolbar from '../../base/Toolbar';
+import Toolbar, {
+  Button,
+  Seperator,
+} from '../../base/Toolbar';
 import Keys from './Keys';
 import Value from './Value';
 
@@ -20,31 +19,25 @@ const StorageView = () => (
       <Storage>
         {(data, update, removeItem, clear) => (
           <Wrapper>
-            <Toolbar
-              items={[{
-                name: 'Download',
-                icon: 'download',
-                onPress: () => {
-                  Clipboard.setString(JSON.stringify(data, null, '  '));
-                  Alert.alert(
-                    'Copied to clipboard',
-                  );
-                },
-              }, {
-                name: 'Refresh',
-                icon: 'reload',
-                onPress: update,
-              }, {
-                name: 'Clear',
-                icon: 'trash',
-                onPress: clear,
-              }, {
-                name: 'Delete',
-                icon: 'remove',
-                disabled: !selected,
-                onPress: () => removeItem(selected),
-              }]}
-            />
+            <Toolbar>
+              <Seperator />
+              <Button
+                name="Refresh"
+                icon="reload"
+                onPress={update}
+              />
+              <Button
+                name="Clear"
+                icon="trash"
+                onPress={clear}
+              />
+              <Button
+                name="Delete"
+                icon="remove"
+                disabled={!selected}
+                onPress={() => removeItem(selected)}
+              />
+            </Toolbar>
             <Keys
               selected={selected}
               onSelect={(key) => setState({ selected: key })}
diff --git a/lib/src/components/DevTool/Tab.js b/lib/src/components/DevTool/Tab.js
index 563574c..2e65930 100644
--- a/lib/src/components/DevTool/Tab.js
+++ b/lib/src/components/DevTool/Tab.js
@@ -45,6 +45,7 @@ const Console = ({
   tabs,
   buttons = [],
   onClose,
+  onDownload,
 }) => (
   <View style={styles.container}>
     <State
@@ -66,7 +67,13 @@ const Console = ({
               <Text>{name}</Text>
             </TouchableOpacity>
           ))}
-
+          {onDownload && (
+            <Button
+              onPress={onDownload}
+            >
+              <Icon name="download" />
+            </Button>
+          )}
           {onClose && (
             <Button
               onPress={onClose}
diff --git a/lib/src/components/DevTool/index.js b/lib/src/components/DevTool/index.js
index ab5b845..e0fa705 100644
--- a/lib/src/components/DevTool/index.js
+++ b/lib/src/components/DevTool/index.js
@@ -2,11 +2,15 @@ import React from 'react';
 import {
   StyleSheet,
   View,
+  Alert,
+  Clipboard,
 } from 'react-native';
 import Tab from './Tab';
 import Console from './Console';
 import Requests from './Requests';
 import Storage from './Storage';
+import log from '../../log';
+import network from '../../network';
 
 const styles = StyleSheet.create({
   container: {
@@ -18,22 +22,65 @@ const DevTool = ({
   style,
   includeStackTrace,
   onClose,
-}) => (
-  <View style={style || styles.container}>
-    <Tab
-      tabs={[{
-        name: 'Console',
-        view: <Console includeStackTrace={includeStackTrace} />,
-      }, {
-        name: 'Network',
-        view: <Requests />,
-      }, {
-        name: 'Storage',
-        view: <Storage />,
-      }]}
-      onClose={onClose}
-    />
-  </View>
-);
+  showNetwork = true,
+  showStorage = true,
+  showConsole = true,
+  additionTools = [],
+}) => {
+  const views = [];
+
+  if (showConsole) {
+    views.push({
+      name: 'Console',
+      view: <Console includeStackTrace={includeStackTrace} />,
+      getData: log.get,
+    });
+  }
+
+  if (showNetwork) {
+    views.push({
+      name: 'Network',
+      view: <Requests />,
+      getData: network.get,
+    });
+  }
+
+  if (showStorage) {
+    views.push({
+      name: 'Storage',
+      view: <Storage />,
+    });
+  }
+
+  additionTools.forEach(tool => {
+    views.push(tool);
+  });
+
+  const getData = async () => {
+    const result = {};
+    for (let i = 0; i < views.length; i++) {
+      const view = views[i];
+
+      if (view.getData) {
+        result[view.name] = await view.getData();
+      }
+    };
+
+    Clipboard.setString(JSON.stringify(result, null, '  '));
+    Alert.alert(
+      'Copied to clipboard',
+    );
+  }
+
+  return (
+    <View style={style || styles.container}>
+      <Tab
+        tabs={views}
+        onClose={onClose}
+        onDownload={getData}
+      />
+    </View>
+  );
+};
 
 export default DevTool;
diff --git a/lib/src/components/base/Icon/check.png b/lib/src/components/base/Icon/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..662708ba405fc0788f771deec809684c21862820
GIT binary patch
literal 6027
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

literal 0
HcmV?d00001

diff --git a/lib/src/components/base/Icon/filter.png b/lib/src/components/base/Icon/filter.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd8d24d7d8a3e4782ed0e6591167f702d2e53d11
GIT binary patch
literal 6382
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
MvF?ry4#&^`4;~$eZvX%Q

literal 0
HcmV?d00001

diff --git a/lib/src/components/base/Icon/index.js b/lib/src/components/base/Icon/index.js
index 27f78f6..c109152 100644
--- a/lib/src/components/base/Icon/index.js
+++ b/lib/src/components/base/Icon/index.js
@@ -9,6 +9,9 @@ import left from './left.png';
 import play from './play.png';
 import download from './download.png';
 import close from './close.png';
+import filter from './filter.png';
+import square from './square.png';
+import check from './check.png';
 
 const icons = {
   reload,
@@ -19,6 +22,9 @@ const icons = {
   play,
   download,
   close,
+  filter,
+  square,
+  check,
 }
 
 const Image = styled.Image`
diff --git a/lib/src/components/base/Icon/square.png b/lib/src/components/base/Icon/square.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b9a3c9e4e13eae4678149d7e9383b3727d7e138
GIT binary patch
literal 4474
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

literal 0
HcmV?d00001

diff --git a/lib/src/components/base/Toolbar.js b/lib/src/components/base/Toolbar.js
deleted file mode 100644
index 845d515..0000000
--- a/lib/src/components/base/Toolbar.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import styled from 'styled-components/native';
-import Icon from './Icon';
-import {
-  Body,
-} from './text';
-
-const Wrapper = styled.View`
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  border-bottom-width: 1px;
-  border-color: #ccc;
-  padding: 0 10px;
-`;
-
-const Item = styled.TouchableOpacity`
-  padding: 10px 10px;
-  opacity: ${({ disabled }) => disabled ? 0.3 : 1};
-`
-
-const Toolbar = ({
-  items = [],
-}) => (
-  <Wrapper>
-    {items.map(({
-      name,
-      icon,
-      onPress,
-      disabled,
-    }) => (
-      <Item
-        key={name}
-        onPress={disabled ?  undefined : onPress}
-        disabled={disabled}
-      >
-        {icon ? (
-          <Icon name={icon} />
-        ) : (
-          <Body color={disabled ? '#ccc' : undefined}>{name}</Body>
-        )}
-      </Item>
-    ))}
-  </Wrapper>
-)
-
-export default Toolbar;
\ No newline at end of file
diff --git a/lib/src/components/base/Toolbar/Button.js b/lib/src/components/base/Toolbar/Button.js
new file mode 100644
index 0000000..392f92e
--- /dev/null
+++ b/lib/src/components/base/Toolbar/Button.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Icon from '../Icon';
+import {
+  Body,
+} from '../text';
+
+const Item = styled.TouchableOpacity`
+padding: 10px 10px;
+opacity: ${({ disabled }) => disabled ? 0.3 : 1};
+`;
+
+const Button = ({
+  name,
+  icon,
+  onPress,
+  disabled,
+}) => (
+  <Item
+    onPress={disabled ?  undefined : onPress}
+    disabled={disabled}
+  >
+    {icon ? (
+      <Icon name={icon} />
+    ) : (
+      <Body color={disabled ? '#ccc' : undefined}>{name}</Body>
+    )}
+  </Item>
+);
+
+export default Button;
\ No newline at end of file
diff --git a/lib/src/components/base/Toolbar/Selector.js b/lib/src/components/base/Toolbar/Selector.js
new file mode 100644
index 0000000..1723423
--- /dev/null
+++ b/lib/src/components/base/Toolbar/Selector.js
@@ -0,0 +1,78 @@
+import React, { Fragment } from 'react';
+import {
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+import styled from 'styled-components/native';
+import State from '../../data/State';
+import Button from './Button';
+import Row from '../Row';
+import Icon from '../Icon';
+import {
+  Body,
+} from '../text';
+
+const Modal = styled.Modal`
+`;
+
+const Selector = ({
+  ...others,
+  multiSelect = false,
+  onSelect,
+  options = [],
+}) => (
+  <State>
+    {({ open }, setState) => (
+      <Fragment>
+        <Button
+          {...others}
+          onPress={() => {
+            setState({ open: true })
+          }}
+        />
+        <Modal
+          animationType="slide"
+          transparent={false}
+          visible={!!open}
+          onRequestClose={() => {
+            setState({ open: false })
+          }}
+        >
+          <SafeAreaView
+            forceInset={{ top: 'always', vertical: 'always' }}
+            style={{flex: 1}}
+          >
+            <Button
+              name="Close"
+              icon="close"
+              onPress={() => {
+                setState({ open: false })
+              }}
+            />
+            {options.map((option) => (
+              <TouchableOpacity
+                onPress={() => {
+                  if (!multiSelect) {
+                    options.forEach(o => o.selected = false);
+                  }
+                  option.selected = !option.selected
+                  onSelect(options);
+                }}
+              >
+                <Row
+                  left={(
+                    <Icon name={option.selected ? 'check' : 'square'} />
+                  )}
+                >
+                  <Body>{option.name}</Body>
+                </Row>
+              </TouchableOpacity>
+            ))}
+          </SafeAreaView>
+        </Modal>
+      </Fragment>
+    )}
+  </State>
+);
+
+export default Selector;
\ No newline at end of file
diff --git a/lib/src/components/base/Toolbar/Seperator.js b/lib/src/components/base/Toolbar/Seperator.js
new file mode 100644
index 0000000..5858d77
--- /dev/null
+++ b/lib/src/components/base/Toolbar/Seperator.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+const Seperator = styled.View`
+  flex: 1;
+`;
+
+export default Seperator;
\ No newline at end of file
diff --git a/lib/src/components/base/Toolbar/index.js b/lib/src/components/base/Toolbar/index.js
new file mode 100644
index 0000000..e6e4ee0
--- /dev/null
+++ b/lib/src/components/base/Toolbar/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Button from './Button';
+import Seperator from './Seperator';
+import Selector from './Selector';
+
+export {
+  Button,
+  Seperator,
+  Selector,
+}
+
+const Wrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-color: #ccc;
+  padding: 0 10px;
+`;
+
+const Toolbar = ({
+  children,
+}) => (
+  <Wrapper>
+    {children}
+  </Wrapper>
+)
+
+export default Toolbar;
\ No newline at end of file
diff --git a/lib/src/console.js b/lib/src/console.js
new file mode 100644
index 0000000..f0161e3
--- /dev/null
+++ b/lib/src/console.js
@@ -0,0 +1,8 @@
+import log from './log';
+import { AsyncStorage } from 'react-native';
+
+export const context = {
+  storage: AsyncStorage,
+  log: (...args) => console.log(...args),
+  clear: log.clear,
+};
\ No newline at end of file
diff --git a/lib/src/index.js b/lib/src/index.js
index f4eefa0..d24a4a1 100644
--- a/lib/src/index.js
+++ b/lib/src/index.js
@@ -3,6 +3,7 @@ import DevToolModal from './components/DevTool/Modal';
 import log from './log';
 import network from './network';
 import events from './events';
+import { context } from './console';
 
 const show = () => events.publish('SHOW_DEVTOOLS');
 const hide = () => events.publish('HIDE_DEVTOOLS');
@@ -12,6 +13,7 @@ export {
   DevToolModal,
   log,
   network,
+  context,
   show,
   hide,
 };
\ No newline at end of file
diff --git a/lib/src/log.js b/lib/src/log.js
index 29b0521..334f35c 100644
--- a/lib/src/log.js
+++ b/lib/src/log.js
@@ -1,16 +1,11 @@
-import { AsyncStorage } from 'react-native';
-
 export const proxyConsole = window.console;
 
 class Log {
   constructor() {
     this.logs = [];
     this.listeners = [];
-    this.context = {
-      storage: AsyncStorage,
-      log: (...args) => console.log(...args),
-      clear: this.clear.bind(this),
-    };
+    this.clear = this.clear.bind(this);
+    this.get = this.get.bind(this);
   }
 
   listen(fn) {
@@ -27,6 +22,10 @@ class Log {
     this.listeners.forEach(l => l(this.logs));
   }
 
+  get() {
+    return this.logs;
+  }
+
   log(type, data, keep) {
     const entry = {
       type,
@@ -67,6 +66,7 @@ class Log {
       info: (...data) => this.info(data, keep),
       log: (...data) => this.info(data, keep),
       debug: (...data) => this.debug(data, keep),
+      verbose: (...data) => this.debug(data, keep),
     };
     ErrorUtils.setGlobalHandler((err, fatal) => {
       this.error([err], keep);
diff --git a/lib/src/network.js b/lib/src/network.js
index b04703d..73b16ad 100644
--- a/lib/src/network.js
+++ b/lib/src/network.js
@@ -5,6 +5,8 @@ class Network {
     this.requests = [];
     this.listeners = [];
     this.currentId = 0;
+    // this.clear = this.clear.bind(this);
+    this.get = this.get.bind(this);
   }
 
   listen(fn) {
@@ -12,6 +14,10 @@ class Network {
     fn(this.requests);
   }
 
+  get() {
+    return this.requests;
+  }
+
   unlisten(fn) {
     this.listeners = this.listeners.filter(l => l !== fn);
   }
@@ -44,6 +50,8 @@ class Network {
           method,
           args: sendArgs,
           headers,
+          requestHeaders: this.getAllResponseHeaders(),
+          contentType: this.getResponseHeader('content-type') || '',
           request: this,
           status: this.status,
         });
@@ -55,6 +63,7 @@ class Network {
           error,
           args: sendArgs,
           headers,
+          requestHeaders: this.getAllResponseHeaders(),
           request: this,
           status: this.status || 'CONN ERR',
         });