Make previous messages more accessible

app/src/components/Sidebar/HistoryDrawer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Badge, Typography } from '@material-ui/core'
 import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles, emphasize } from '@material-ui/core/styles'
 
 interface HistoryItem {
   key: string
@@ -45,8 +45,8 @@ class HistoryDrawer extends React.Component<Props, State> {
   public renderHistory() {
     const style = (element: HistoryItem) => ({
       backgroundColor: element.selected
-        ? this.props.theme.palette.action.selected
+        ? emphasize(this.props.theme.palette.background.default, 0.2)
-        : this.props.theme.palette.action.hover,
+        : emphasize(this.props.theme.palette.background.default, 0.07),
       margin: '8px',
       padding: '8px 8px 0 8px',
       cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -76,17 +76,19 @@ class HistoryDrawer extends React.Component<Props, State> {
 
     return (
       <div className={this.props.classes.main}>
-        <Typography component={'span'} onClick={this.toggle} style={{ cursor: 'pointer' }}>
+        <div style={{ backgroundColor: emphasize(this.props.theme.palette.background.default, 0.07) }}>
-          <Badge
+          <Typography component={'span'} onClick={this.toggle} style={{ cursor: 'pointer' }}>
-            classes={{ badge: this.props.classes.badge }}
+            <Badge
-            invisible={!visible}
+              classes={{ badge: this.props.classes.badge }}
-            badgeContent={this.props.items.length}
+              invisible={!visible}
-            color="primary"
+              badgeContent={this.props.items.length}
-          >
+              color="primary"
-            {this.state.collapsed ? '▶ History' : '▼ History'}
+            >
-          </Badge>
+              {this.state.collapsed ? '▶ History' : '▼ History'}
-          <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
+            </Badge>
-        </Typography>
+            <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
+          </Typography>
+        </div>
         <div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
           {this.state.collapsed ? null : this.props.children}
           {this.state.collapsed ? null : elements}
@@ -102,7 +104,7 @@ class HistoryDrawer extends React.Component<Props, State> {
 
 const styles = (theme: Theme) => ({
   main: {
-    backgroundColor: 'rgba(170, 170, 170, 0.2)',
+    backgroundColor: theme.palette.background.default,
     marginTop: '16px',
   },
   badge: { right: '-25px' },

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -41,7 +41,7 @@ function ValuePanel(props: Props) {
     }
 
     return (
-      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px', flexWrap: 'wrap' }}>
+      <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}>
         <span style={{ marginTop: '2px', flexGrow: 1 }}>
           <ActionButtons />
         </span>

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -6,6 +6,7 @@ import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+import { Typography } from '@material-ui/core'
 
 interface Props {
   message: q.Message
@@ -55,8 +56,32 @@ class ValueRenderer extends React.Component<Props, State> {
     return this.renderDiff(value, compare)
   }
 
+  private renderRawMode(message: q.Message, compare?: q.Message) {
+    if (!message.value) {
+      return
+    }
+    const value = Base64Message.toUnicodeString(message.value)
+    if (!compare) {
+      return this.renderDiff(value, value)
+    }
+
+    if (!compare.value) {
+      return
+    }
+    const compareStr = Base64Message.toUnicodeString(compare.value)
+
+    return (
+      <div>
+        <Typography>selected</Typography>
+        {this.renderDiff(compareStr, compareStr)}
+        <Typography>current</Typography>
+        {this.renderDiff(value, value)}
+      </div>
+    )
+  }
+
   public render() {
-    return <div style={{ padding: '0px 0px 8px 8px', width: '100%' }}>{this.renderValue()}</div>
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
   }
 
   public renderValue() {
@@ -65,6 +90,7 @@ class ValueRenderer extends React.Component<Props, State> {
     const previousMessage = previousMessages[previousMessages.length - 2]
     let compareMessage = compareWith || previousMessage || message
     if (renderMode === 'raw') {
+      return this.renderRawMode(message, compareWith)
       compareMessage = message
     }
     if (!message.value) {