about:history enhancements

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()
+    }
+    // BSCTODO: ...
+  }
+
+  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} />

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)

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,60 +75,49 @@ body {
 
   .siteDetailsPageContent {
     border-top: 0px;
-    margin-top: 15px;
+    margin-top: 50px;
     display: block;
     clear: both;
 
     .sectionTitle {
       font-size: 16px;
       margin-bottom: 12px;
       padding-left: 40px;
+      -webkit-user-select: none;
     }
 
     .sortableTable {
       border-spacing: 0px;
+      cursor: default;
 
+      // Time visited
       .time {
-        color: #656565;
+        font-size: 11pt;
         font-weight: 800;
         text-align: center;
         width: 154px;
+
+        // Delete button
+        .deleteEntry {
+          display: none;
+        }
+        &:hover .deleteEntry{
+          color: @gray;
+        }
       }
+
+      // Entry title
       .title {
         max-width: 415px;
         text-overflow: ellipsis;
         overflow: hidden;
+        font-size: 11pt;
+        white-space: nowrap;
       }
-      .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;
-        }
-      }
-
-      .sortableTable {
-        cursor: default;
+      // Entry domain
+      .domain {
+        font-size: 11pt;
       }
     }
   }

less/sortableTable.less

@@ -6,9 +6,7 @@
 
 table.sort {
   th {
-    cursor: pointer;
-    text-decoration: underline;
-    color: @darkGray;
+    color: @gray;
 
     &:hover {
       color: #000;
@@ -28,22 +26,39 @@ 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 {
       color: @mediumGray;
       -webkit-font-smoothing: antialiased;
       width: auto;
 
-      &:not(:first-of-type) {
-        border-bottom: solid 1px @lightGray;
-      }
-
       &:nth-of-type(2) {
         width: 60%;
       }

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
+})