From ec447865604717e4d4db9eaf4642aaf61d04b241 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Sun, 2 Oct 2016 02:38:51 -0700
Subject: [PATCH 1/2] History screen updates - styles closer match the mockup;
 NOTE: style updates are to sortableTable - text no longer wraps; properly
 handles overflow - updated search box - sortable table now accepts a column
 type of "cell", allowing for custom controls to be passed rather than html -
 delete buttons are stubbed out, ready to be implemented - will be
 implementing multi-select soon

Fixes https://github.com/brave/browser-laptop/issues/4072
Fixes https://github.com/brave/browser-laptop/issues/3996

Introduces tests for about:history
---
 js/about/history.js            | 39 +++++++++++++++---
 js/components/sortableTable.js |  6 ++-
 less/about/history.less        | 72 +++++++++++++++++++---------------
 less/sortableTable.less        | 31 +++++++++++----
 test/about/historyTest.js      | 46 ++++++++++++++++++++++
 5 files changed, 149 insertions(+), 45 deletions(-)
 create mode 100644 test/about/historyTest.js

diff --git a/js/about/history.js b/js/about/history.js
index 90060bb0dd5..c9c159ad1aa 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -23,6 +23,37 @@ require('../../less/about/siteDetails.less')
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
+class DeleteHistoryEntryButton extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
+
+  onClick (e) {
+    if (e && e.preventDefault) {
+      e.preventDefault()
+    }
+    console.log('perform the delete here: ' + JSON.stringify(this.props.siteDetail))
+  }
+
+  render () {
+    return <div className='fa fa-times deleteEntry' onClick={this.onClick} />
+  }
+}
+
+class HistoryTimeCell extends ImmutableComponent {
+  render () {
+    return <div>
+      <DeleteHistoryEntryButton siteDetail={this.props.siteDetail} />
+      {
+        this.props.siteDetail.get('lastAccessedTime')
+          ? new Date(this.props.siteDetail.get('lastAccessedTime')).toLocaleTimeString()
+          : ''
+      }
+    </div>
+  }
+}
+
 class HistoryDay extends ImmutableComponent {
   navigate (entry) {
     aboutActions.newFrame({
@@ -38,9 +69,7 @@ class HistoryDay extends ImmutableComponent {
         defaultHeadingSortOrder='desc'
         rows={this.props.entries.map((entry) => [
           {
-            html: entry.get('lastAccessedTime')
-              ? new Date(entry.get('lastAccessedTime')).toLocaleTimeString()
-              : '',
+            cell: <HistoryTimeCell siteDetail={entry} />,
             value: entry.get('lastAccessedTime')
           },
           entry.get('title')
@@ -155,11 +184,11 @@ class AboutHistory extends React.Component {
         <div data-l10n-id='history' className='sectionTitle' />
         <div className='headerActions'>
           <div className='searchWrapper'>
-            <input type='text' className={this.state.search ? 'searchInput' : 'searchInput searchInputPlaceholder'} placeholder='&#xf002;' id='historySearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
+            <input type='text' className='searchInput' id='historySearch' placeholder='Search' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
             {
               this.state.search
               ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
-              : null
+              : <span className='fa fa-search searchInputPlaceholder' />
             }
           </div>
           <Button l10nId='clearBrowsingDataNow' className='primaryButton clearBrowsingDataButton' onClick={this.clearBrowsingDataNow} />
diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
index 5b22f410472..0db78698607 100644
--- a/js/components/sortableTable.js
+++ b/js/components/sortableTable.js
@@ -92,8 +92,12 @@ class SortableTable extends ImmutableComponent {
             const entry = row.map((item, j) => {
               const value = typeof item === 'object' ? item.value : item
               const html = typeof item === 'object' ? item.html : item
+              const cell = typeof item === 'object' ? item.cell : item
+
               return <td className={this.hasColumnClassNames ? this.props.columnClassNames[j] : undefined} data-sort={value}>
-                {value === true ? '✕' : html}
+                {
+                  cell || (value === true ? '✕' : html)
+                }
               </td>
             })
             const rowAttributes = this.getRowAttributes(row, i)
diff --git a/less/about/history.less b/less/about/history.less
index d78d61664d6..2912b898df0 100644
--- a/less/about/history.less
+++ b/less/about/history.less
@@ -27,6 +27,7 @@ body {
     .sectionTitle {
       font-size: 28px;
       display: inline-block;
+      -webkit-user-select: none;
     }
     .headerActions {
       float: right;
@@ -45,7 +46,14 @@ body {
           height: 22px;
         }
         .searchInputPlaceholder {
+          color: @gray;
+          float: none;
           font-family: FontAwesome;
+          left: -35px;
+          margin: 0;
+          padding: 0;
+          position: relative;
+          width: 0;
         }
         .searchInputClear {
           float: none;
@@ -67,7 +75,7 @@ body {
 
   .siteDetailsPageContent {
     border-top: 0px;
-    margin-top: 15px;
+    margin-top: 50px;
     display: block;
     clear: both;
 
@@ -75,52 +83,54 @@ body {
       font-size: 16px;
       margin-bottom: 12px;
       padding-left: 40px;
+      -webkit-user-select: none;
     }
 
     .sortableTable {
       border-spacing: 0px;
+      cursor: default;
 
+      // Trash can icon in Time column header
+      th:first-of-type:before {
+        content: "\f1f8";
+        font-family: FontAwesome;
+        margin-right: 13px;
+      }
+      th:hover:first-of-type:before {
+        color: #000;
+      }
+
+      // Time visited
       .time {
-        color: #656565;
+        font-size: 11pt;
         font-weight: 800;
         text-align: center;
         width: 154px;
+
+        // Delete button
+        .deleteEntry {
+          color: transparent;
+          float: left;
+          margin-left: 8px;
+          margin-top: 1px;
+        }
+        &:hover .deleteEntry{
+          color: @gray;
+        }
       }
+
+      // Entry title
       .title {
         max-width: 415px;
         text-overflow: ellipsis;
         overflow: hidden;
-      }
-      .domain {
-      }
-    }
-
-    .historyList {
-      padding-top: 10px;
-      overflow: hidden;
-
-      .listItem {
-        display: flex;
-        height: 1rem;
-        padding-left: 5px;
-
-        &:hover {
-          background: #ffcc99;
-        }
-        .aboutListItem {
-          align-items: center;
-        }
-        .aboutItemLocation {
-          margin-left: 10px;
-        }
-        .aboutItemDate {
-          color: #aaa;
-          margin-right: 10px;
-        }
+        font-size: 11pt;
+        white-space: nowrap;
       }
 
-      .sortableTable {
-        cursor: default;
+      // Entry domain
+      .domain {
+        font-size: 11pt;
       }
     }
   }
diff --git a/less/sortableTable.less b/less/sortableTable.less
index 5b274eaffef..a044f6fc5d7 100644
--- a/less/sortableTable.less
+++ b/less/sortableTable.less
@@ -6,9 +6,7 @@
 
 table.sort {
   th {
-    cursor: pointer;
-    text-decoration: underline;
-    color: @darkGray;
+    color: @gray;
 
     &:hover {
       color: #000;
@@ -28,11 +26,32 @@ table.sortableTable {
     padding: 5px 20px;
 
     th {
-      background: @lightGray;
+      background: linear-gradient(to bottom, @lightGray, @veryLightGray);
+      border-top: 1px solid @gray;
       text-align: left;
       font-weight: 300;
       padding: 8px;
       box-sizing: border-box;
+      -webkit-user-select: none;
+
+      &:after {
+        font-family: FontAwesome;
+        font-size: 8pt;
+        margin-top: 3px;
+        margin-right: 3px;
+        float: right;
+      }
+
+      &.sort-up:after {
+        content: "\f077";
+      }
+
+      &.sort-down:after {
+        content: "\f078";
+      }
+    }
+    th + th {
+      border-left: 1px solid @braveOrange;
     }
 
     td {
@@ -40,10 +59,6 @@ table.sortableTable {
       -webkit-font-smoothing: antialiased;
       width: auto;
 
-      &:not(:first-of-type) {
-        border-bottom: solid 1px @lightGray;
-      }
-
       &:nth-of-type(2) {
         width: 60%;
       }
diff --git a/test/about/historyTest.js b/test/about/historyTest.js
new file mode 100644
index 00000000000..c2808789367
--- /dev/null
+++ b/test/about/historyTest.js
@@ -0,0 +1,46 @@
+/* global describe, it, before */
+
+const Brave = require('../lib/brave')
+const {urlInput} = require('../lib/selectors')
+const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+const aboutHistoryUrl = getTargetAboutUrl('about:history')
+
+describe('about:history', function () {
+  Brave.beforeAll(this)
+
+  before(function * () {
+    yield this.app.client
+      .waitUntilWindowLoaded()
+      .waitForUrl(Brave.newTabUrl)
+      .waitForBrowserWindow()
+      .waitForVisible('#window')
+      .waitForVisible(urlInput)
+      .windowByUrl(Brave.browserWindowUrl)
+      .addSite({ location: 'https://brave.com', title: 'Brave' })
+      .addSite({ location: 'https://brave.com/test', customTitle: 'customTest' })
+      .addSite({ location: 'https://www.youtube.com' })
+      .waitForExist('.tab[data-frame-key="1"]')
+      .tabByIndex(0)
+      .url(aboutHistoryUrl)
+  })
+
+  it('displays entries with title as: title or URL', function * () {
+    yield this.app.client
+      .waitForVisible('table.sortableTable td.title[data-sort="Brave"]')
+      .waitForVisible('table.sortableTable td.title[data-sort="https://www.youtube.com"]')
+  })
+
+  it('does NOT use customTitle when displaying entries', function * () {
+    yield this.app.client
+      .waitForVisible('table.sortableTable td.title[data-sort="customTest"]', 1000, true)
+  })
+
+  // shows ordered by date
+
+  it('defaults to sorting table by time DESC', function * () {
+    yield this.app.client
+      .waitForVisible('table.sortableTable thead tr th.sort-up[data-l10n-id="time"]')
+  })
+
+  // search box
+})

From ea2fab82b70e0e8b76f59a03f0e137a8681a0189 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Mon, 3 Oct 2016 20:49:26 -0700
Subject: [PATCH 2/2] Removed WIP items (will be re-added later w/
 multi-select)

---
 js/about/history.js     |  2 +-
 less/about/history.less | 15 +--------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/js/about/history.js b/js/about/history.js
index c9c159ad1aa..51676458710 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -33,7 +33,7 @@ class DeleteHistoryEntryButton extends ImmutableComponent {
     if (e && e.preventDefault) {
       e.preventDefault()
     }
-    console.log('perform the delete here: ' + JSON.stringify(this.props.siteDetail))
+    // BSCTODO: ...
   }
 
   render () {
diff --git a/less/about/history.less b/less/about/history.less
index 2912b898df0..583bc4dffea 100644
--- a/less/about/history.less
+++ b/less/about/history.less
@@ -90,16 +90,6 @@ body {
       border-spacing: 0px;
       cursor: default;
 
-      // Trash can icon in Time column header
-      th:first-of-type:before {
-        content: "\f1f8";
-        font-family: FontAwesome;
-        margin-right: 13px;
-      }
-      th:hover:first-of-type:before {
-        color: #000;
-      }
-
       // Time visited
       .time {
         font-size: 11pt;
@@ -109,10 +99,7 @@ body {
 
         // Delete button
         .deleteEntry {
-          color: transparent;
-          float: left;
-          margin-left: 8px;
-          margin-top: 1px;
+          display: none;
         }
         &:hover .deleteEntry{
           color: @gray;