Add a Log tab.

src/components/ProfileViewer.js

@@ -8,6 +8,7 @@ import ProfileSummaryView from '../containers/ProfileSummaryView';
 import ProfileCallTreeView from '../containers/ProfileCallTreeView';
 import ProfileMarkersView from '../containers/ProfileMarkersView';
 import ProfileTaskTracerView from '../containers/ProfileTaskTracerView';
+import ProfileLogView from '../containers/ProfileLogView';
 import ProfileThreadJankTimeline from '../containers/ProfileThreadJankTimeline';
 import ProfileThreadTracingMarkerTimeline from '../containers/ProfileThreadTracingMarkerTimeline';
 import ProfileFilterNavigator from '../containers/ProfileFilterNavigator';
@@ -38,6 +39,10 @@ class ProfileViewer extends Component {
         name: 'tasktracer',
         title: 'Task Tracer',
       },
+      {
+        name: 'log',
+        title: 'Log',
+      },
     ];
   }
 
@@ -137,6 +142,7 @@ class ProfileViewer extends Component {
           calltree: <ProfileCallTreeView params={params} location={location} />,
           markers: <ProfileMarkersView params={params} location={location} />,
           tasktracer: <ProfileTaskTracerView params={params} location={location} rangeStart={timeRange.start} rangeEnd={timeRange.end} />,
+          log: <ProfileLogView params={params} location={location} />,
         }[selectedTab]}
 
       </div>

src/containers/ProfileLogView.js

@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { selectedThreadSelectors } from '../selectors/';
+import * as actions from '../actions';
+
+class ProfileLogView extends Component {
+  render() {
+    const { thread } = this.props;
+    const { markers, stringTable } = thread;
+    return (
+      <div className='logViewWrapper'>
+        <pre className='logViewPre'>
+          {
+            markers.data.map((data, markerIndex) => markerIndex).filter(markerIndex => {
+              const data = markers.data[markerIndex];
+              return data !== null && ('category' in data) && data.category === 'log';
+            }).map(markerIndex => {
+              return stringTable.getString(markers.name[markerIndex]);
+            }).join('')
+          }
+        </pre>
+      </div>
+    );
+  }
+}
+
+ProfileLogView.propTypes = {
+  thread: PropTypes.object.isRequired,
+};
+
+export default connect((state, props) => ({
+  thread: selectedThreadSelectors.getRangeSelectionFilteredThread(state, props),
+}), actions)(ProfileLogView);

src/reducers/index.js

@@ -180,7 +180,7 @@ function zeroAt(state = 0, action) {
   }
 }
 
-function tabOrder(state = [0, 1, 2, 3], action) {
+function tabOrder(state = [0, 1, 2, 3, 4], action) {
   switch (action.type) {
     case 'CHANGE_TAB_ORDER':
       return action.tabOrder;

static/style.css

@@ -674,13 +674,22 @@ body, #root, .profileViewer {
   flex-flow: row nowrap;
 }
 
-.taskTracerViewWrapper {
+.taskTracerViewWrapper,
+.logViewWrapper {
   border-top: 1px solid #D6D6D6;
   flex: 1;
   overflow: auto;
   position: relative;
 }
 
+.logViewPre {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 10px;
+}
+
 .taskTracerView {
   position: absolute;
   top: 0;