Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Refactor of long press history
Browse files Browse the repository at this point in the history
  • Loading branch information
NejcZdovc committed Apr 16, 2017
1 parent 3dd46d3 commit e74bd83
Show file tree
Hide file tree
Showing 11 changed files with 248 additions and 151 deletions.
6 changes: 6 additions & 0 deletions app/browser/reducers/tabsReducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,12 @@ const tabsReducer = (state, action) => {
case appConstants.APP_ON_NAVIGATE_INDEX:
state = tabs.goToIndex(state, action)
break
case appConstants.APP_ON_NAVIGATE_BACK_LONG:
state = tabs.longPressBack(state, action)
break
case appConstants.APP_ON_NAVIGATE_FORWARD_LONG:
state = tabs.longPressForward(state, action)
break
case appConstants.APP_FRAME_CHANGED:
state = tabState.updateFrame(state, action)
break
Expand Down
17 changes: 16 additions & 1 deletion app/browser/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const aboutHistoryState = require('../common/state/aboutHistoryState')
const appStore = require('../../js/stores/appStore')
const appConfig = require('../../js/constants/appConfig')
const siteTags = require('../../js/constants/siteTags')
const historyState = require('../common/state/historyState.js')
const {newTabMode} = require('../common/constants/settingsEnums')

let currentWebContents = {}
Expand Down Expand Up @@ -66,7 +67,7 @@ const getPartitionNumber = (partition) => {
}

/**
* Obtains the curent partition.
* Obtains the current partition.
* Warning: This function has global side effects in that it increments the
* global next partition number if isPartitioned is passed into the create options.
*/
Expand Down Expand Up @@ -638,6 +639,20 @@ const api = {
const tab = api.getWebContents(action.get('tabId'))
tab.goToIndex(action.get('index'))
return state
},

longPressBack: (state, action) => {
const tabId = action.get('tabId')
const webContent = api.getWebContents(tabId)
historyState.onBackButtonHistory(state, tabId, webContent, action.get('rect'))
return state
},

longPressForward: (state, action) => {
const tabId = action.get('tabId')
const webContent = api.getWebContents(tabId)
historyState.onForwardButtonHistory(state, tabId, webContent, action.get('rect'))
return state
}
}

Expand Down
166 changes: 166 additions & 0 deletions app/common/state/historyState.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
const Immutable = require('immutable')
const tabState = require('./tabState.js')
const config = require('../../../js/constants/config.js')
const eventUtil = require('../../../js/lib/eventUtil.js')
const appActions = require('../../../js/actions/appActions.js')
const windowActions = require('../../../js/actions/windowActions.js')
const UrlUtil = require('../../../js/lib/urlutil.js')
const locale = require('../../locale.js')
const CommonMenu = require('../commonMenu.js')

const onBackButtonHistoryMenu = (tabId, partitionNumber, history, rect) => {
const menuTemplate = []

if (tabId > -1 && history && history.entries.length > 0) {
const stopIndex = Math.max(((history.currentIndex - config.navigationBar.maxHistorySites) - 1), -1)
for (let index = (history.currentIndex - 1); index > stopIndex; index--) {
const url = history.entries[index].url

menuTemplate.push({
label: history.entries[index].display,
icon: history.entries[index].icon,
click: (e) => {
if (eventUtil.isForSecondaryAction(e)) {
appActions.createTabRequested({
url,
partitionNumber: partitionNumber,
active: !!e.shiftKey
})
} else {
appActions.onNavigateIndex(tabId, index)
}
}
})
}

// Always display "Show History" link
menuTemplate.push(
CommonMenu.separatorMenuItem,
{
label: locale.translation('showAllHistory'),
click: () => {
appActions.createTabRequested({
url: 'about:history'
})
windowActions.setContextMenuDetail()
}
})
}

windowActions.setContextMenuDetail(Immutable.fromJS({
left: rect.left,
top: rect.bottom,
template: menuTemplate
}))
}

const onForwardButtonHistoryMenu = (tabId, partitionNumber, history, rect) => {
const menuTemplate = []

if (tabId > -1 && history && history.entries.length > 0) {
const stopIndex = Math.max(((history.currentIndex - config.navigationBar.maxHistorySites) - 1), -1)
for (let index = (history.currentIndex - 1); index > stopIndex; index--) {
const url = history.entries[index].url

menuTemplate.push({
label: history.entries[index].display,
icon: history.entries[index].icon,
click: (e) => {
if (eventUtil.isForSecondaryAction(e)) {
appActions.createTabRequested({
url,
partitionNumber: partitionNumber,
active: !!e.shiftKey
})
} else {
appActions.onNavigateIndex(tabId, index)
}
}
})
}

// Always display "Show History" link
menuTemplate.push(
CommonMenu.separatorMenuItem,
{
label: locale.translation('showAllHistory'),
click: () => {
appActions.createTabRequested({
url: 'about:history'
})
windowActions.setContextMenuDetail()
}
})
}

windowActions.setContextMenuDetail(Immutable.fromJS({
left: rect.left,
top: rect.bottom,
template: menuTemplate
}))
}

const historyState = {
getHistoryItems: (state, webContent) => {
const historyCount = webContent.getEntryCount()
const currentIndex = webContent.getCurrentEntryIndex()
const sites = state ? state.get('sites') : null

let history = {
count: historyCount,
currentIndex,
entries: []
}

for (let index = 0; index < historyCount; index++) {
const url = webContent.getURLAtIndex(index)
const title = webContent.getTitleAtIndex(index)

let entry = {
index: index,
url: url,
display: title || url,
icon: null
}

if (url.startsWith('chrome-extension://')) {
// TODO: return brave lion (or better: get icon from extension if possible as data URI)
} else {
if (sites) {
const site = sites.find(function (element) { return element.get('location') === url })
if (site) { entry.icon = site.get('favicon') }
}

if (!entry.icon) { entry.icon = UrlUtil.getDefaultFaviconUrl(url) }
}

history.entries.push(entry)
}

return history
},

onBackButtonHistory: (state, tabId, webContent, rect) => {
const tabValue = tabState.getByTabId(state, tabId)

onBackButtonHistoryMenu(
tabValue.get('tabId'),
tabValue.get('partitionNumber'),
historyState.getHistoryItems(state, webContent),
rect
)
},

onForwardButtonHistoryMenu: (state, tabId, webContent, rect) => {
const tabValue = tabState.getByTabId(state, tabId)

onForwardButtonHistoryMenu(
tabValue.get('tabId'),
tabValue.get('partitionNumber'),
historyState.getHistoryItems(state, webContent),
rect
)
}
}

module.exports = historyState
7 changes: 4 additions & 3 deletions app/renderer/components/navigation/navigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const {StyleSheet, css} = require('aphrodite')
// Actions
const appActions = require('../../../../js/actions/appActions')
const windowActions = require('../../../../js/actions/windowActions')
const contextMenus = require('../../../../js/contextMenus')
const getSetting = require('../../../../js/settings').getSetting

// Components
Expand Down Expand Up @@ -128,12 +127,14 @@ class Navigator extends ImmutableComponent {

onBackLongPress (target) {
const activeTab = this.props.activeTab
contextMenus.onBackButtonHistoryMenu(activeTab.get('tabId'), activeTab.get('partitionNumber'), this.activeFrame.getHistory(this.props.appState), target)
const rect = target.parentNode.getBoundingClientRect()
appActions.onNavigateBackLong(activeTab.get('tabId'), rect)
}

onForwardLongPress (target) {
const activeTab = this.props.activeTab
contextMenus.onForwardButtonHistoryMenu(activeTab.get('tabId'), activeTab.get('partitionNumber'), this.activeFrame.getHistory(this.props.appState), target)
const rect = target.parentNode.getBoundingClientRect()
appActions.onNavigateForwardLong(activeTab.get('tabId'), rect)
}

onDragOver (e) {
Expand Down
24 changes: 24 additions & 0 deletions docs/appActions.md
Original file line number Diff line number Diff line change
Expand Up @@ -987,6 +987,30 @@ Go to specific item in a history for a given tab



### onNavigateBackLong(tabId, rect)

Go back in a history for a given tab

**Parameters**

**tabId**: `number`, Tab id used for an action

**rect**: `ClientRect`, Parent element position for this action



### onNavigateForwardLong(tabId, rect)

Go forward in a history for a given tab

**Parameters**

**tabId**: `number`, Tab id used for an action

**rect**: `ClientRect`, Parent element position for this action




* * *

Expand Down
26 changes: 26 additions & 0 deletions js/actions/appActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1233,6 +1233,32 @@ const appActions = {
tabId,
index
})
},

/**
* Go back in a history for a given tab
* @param {number} tabId - Tab id used for an action
* @param {ClientRect} rect - Parent element position for this action
*/
onNavigateBackLong: function (tabId, rect) {
AppDispatcher.dispatch({
actionType: appConstants.APP_ON_NAVIGATE_BACK_LONG,
tabId,
rect
})
},

/**
* Go forward in a history for a given tab
* @param {number} tabId - Tab id used for an action
* @param {ClientRect} rect - Parent element position for this action
*/
onNavigateForwardLong: function (tabId, rect) {
AppDispatcher.dispatch({
actionType: appConstants.APP_ON_NAVIGATE_FORWARD_LONG,
tabId,
rect
})
}
}

Expand Down
6 changes: 3 additions & 3 deletions js/actions/windowActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

const AppDispatcher = require('../dispatcher/appDispatcher')
const windowConstants = require('../constants/windowConstants')
const windowStore = require('../stores/windowStore')
// const windowStore = require('../stores/windowStore') TODO refactor

function dispatch (action) {
AppDispatcher.dispatch(action)
Expand Down Expand Up @@ -638,15 +638,15 @@ const windowActions = {
* @param {Object} frameToSkip - Properties of the frame to keep audio
*/
muteAllAudioExcept: function (frameToSkip) {
let framePropsList = windowStore.getState().get('frames')
/* let framePropsList = windowStore.getState().get('frames')
framePropsList.forEach((frameProps) => {
if (frameProps.get('key') !== frameToSkip.get('key') && frameProps.get('audioPlaybackActive') && !frameProps.get('audioMuted')) {
this.setAudioMuted(frameProps, true)
} else {
this.setAudioMuted(frameProps, false)
}
})
}) */
},

/**
Expand Down
43 changes: 0 additions & 43 deletions js/components/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -904,49 +904,6 @@ class Frame extends ImmutableComponent {
this.webview.addEventListener('mousewheel', this.onMouseWheel.bind(this))
}

getHistoryEntry (sites, index) {
const url = this.webview.getURLAtIndex(index)
const title = this.webview.getTitleAtIndex(index)

let entry = {
index: index,
url: url,
display: title || url,
icon: null
}

if (url.startsWith('chrome-extension://')) {
// TODO: return brave lion (or better: get icon from extension if possible as data URI)
} else {
if (sites) {
const site = sites.find(function (element) { return element.get('location') === url })
if (site) { entry.icon = site.get('favicon') }
}

if (!entry.icon) { entry.icon = UrlUtil.getDefaultFaviconUrl(url) }
}

return entry
}

getHistory (appState) {
const historyCount = this.webview.getEntryCount()
const currentIndex = this.webview.getCurrentEntryIndex()
const sites = appState ? appState.get('sites') : null

let history = {
count: historyCount,
currentIndex,
entries: []
}

for (let index = 0; index < historyCount; index++) {
history.entries.push(this.getHistoryEntry(sites, index))
}

return history
}

get origin () {
return siteUtil.getOrigin(this.props.location)
}
Expand Down
2 changes: 0 additions & 2 deletions js/components/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -763,7 +763,6 @@ class Main extends ImmutableComponent {
<Navigator
appState={this.props.appState}
windowState={this.props.windowState}
frames={this.frames} // TODO remove
activeTab={activeTab}
shouldAllowWindowDrag={shouldAllowWindowDrag}
customTitlebar={customTitlebar}
Expand Down Expand Up @@ -941,7 +940,6 @@ class Main extends ImmutableComponent {
{
sortedFrames.map((frame) =>
<Frame
ref={(node) => { this.frames[frame.get('key')] = node }} // TODO remove
urlBarFocused={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'focused'])}
tabIndex={frameStateUtil.getFrameIndex(this.props.windowState, frame.get('key'))}
prefOpenInForeground={getSetting(settings.SWITCH_TO_NEW_TABS)}
Expand Down
Loading

0 comments on commit e74bd83

Please sign in to comment.