From e52513d9a1590c0742ecf7ad149910847b9bf775 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Thu, 22 Jun 2017 10:01:47 +0200 Subject: [PATCH] Removes state from Window component Resovles #9453 Auditors: @bsclifton @bbondy @bridiver Test Plan: --- app/renderer/components/window.js | 105 ++++-------------------------- js/entry.js | 48 ++++++++++++-- 2 files changed, 55 insertions(+), 98 deletions(-) diff --git a/app/renderer/components/window.js b/app/renderer/components/window.js index d156aa7beb0..0bb1aa1f1e4 100644 --- a/app/renderer/components/window.js +++ b/app/renderer/components/window.js @@ -2,74 +2,23 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ -// Controller view which manages the top level immutable state for the app - const React = require('react') -const PropTypes = require('prop-types') -const Immutable = require('immutable') // Components const Main = require('./main/main') - -// Stores -const windowStore = require('../../../js/stores/windowStore') -const appStoreRenderer = require('../../../js/stores/appStoreRenderer') +const ReduxComponent = require('./reduxComponent') // Actions -const windowActions = require('../../../js/actions/windowActions') const appActions = require('../../../js/actions/appActions') // Utils const cx = require('../../../js/lib/classSet') const {getPlatformStyles} = require('../../common/lib/platformUtil') -const {getCurrentWindowId} = require('../currentWindow') window.appActions = appActions class Window extends React.Component { - constructor (props) { - super(props) - // initialize appState from props - // and then listen for updates - this.appState = appStoreRenderer.state - this.windowState = Immutable.fromJS(this.props.initWindowState) || windowStore.getState() - this.state = { - immutableData: { - windowState: this.windowState, - appState: this.appState - } - } - if (this.props.initWindowState) { - windowActions.setState(this.windowState) - } - - this.onChange = this.onChange.bind(this) - this.onAppStateChange = this.onAppStateChange.bind(this) - windowStore.addChangeListener(this.onChange) - appStoreRenderer.addChangeListener(this.onAppStateChange) - } - - componentWillMount () { - const activeFrameKey = this.state.immutableData.windowState.get('activeFrameKey') - this.props.frames.forEach((frame, i) => { - if (frame.guestInstanceId) { - appActions.newWebContentsAdded(getCurrentWindowId(), frame) - } else { - appActions.createTabRequested({ - url: frame.location || frame.src || frame.provisionalLocation, - partitionNumber: frame.partitionNumber, - isPrivate: frame.isPrivate, - active: activeFrameKey ? frame.key === activeFrameKey : true, - discarded: frame.unloaded, - title: frame.title, - faviconUrl: frame.icon, - index: i - }, false, true /* isRestore */) - } - }) - } - - render () { + get classes () { let classes = {} classes['windowContainer'] = true @@ -82,52 +31,26 @@ class Window extends React.Component { // For Windows 10, this defaults to blue. When window // becomes inactive it needs to change to gray. if (classes['win10']) { - classes['inactive'] = !this.windowState.getIn(['ui', 'isFocused']) + classes['inactive'] = !this.props.isFocused } - return
-
-
- } - - componentDidMount () { - appActions.windowReady(getCurrentWindowId()) + return classes } - componentWillUnmount () { - windowStore.removeChangeListener(this.onChange) - appStoreRenderer.removeChangeListener(this.onAppStateChange) - } + mergeProps (state, ownProps) { + const currentWindow = state.get('currentWindow') - shouldComponentUpdate (nextProps, nextState) { - return nextState.immutableData !== this.state.immutableData - } + const props = {} + props.isFocused = currentWindow.getIn(['ui', 'isFocused']) - onChange () { - setImmediate(() => { - this.windowState = windowStore.getState() - this.setState({ - immutableData: { - windowState: this.windowState, - appState: this.appState - } - }) - }) + return props } - onAppStateChange () { - setImmediate(() => { - this.appState = appStoreRenderer.state - this.setState({ - immutableData: { - windowState: this.windowState, - appState: this.appState - } - }) - }) + render () { + return
+
+
} } -Window.propTypes = { appState: PropTypes.object, frames: PropTypes.array, initWindowState: PropTypes.object } - -module.exports = Window +module.exports = ReduxComponent.connect(Window) diff --git a/js/entry.js b/js/entry.js index fd63b1c2eb0..81d75b4ec91 100644 --- a/js/entry.js +++ b/js/entry.js @@ -19,17 +19,27 @@ require('../node_modules/font-awesome/css/font-awesome.css') const React = require('react') const ReactDOM = require('react-dom') -const Window = require('../app/renderer/components/window') +const Immutable = require('immutable') +const patch = require('immutablepatch') const electron = require('electron') const ipc = electron.ipcRenderer const webFrame = electron.webFrame + +// Components +const Window = require('../app/renderer/components/window') + +// Store const windowStore = require('./stores/windowStore') const appStoreRenderer = require('./stores/appStoreRenderer') + +// Actions const windowActions = require('./actions/windowActions') const appActions = require('./actions/appActions') + +// Constants const messages = require('./constants/messages') -const Immutable = require('immutable') -const patch = require('immutablepatch') + +// Utils const l10n = require('./l10n') const currentWindow = require('../app/renderer/currentWindow') @@ -64,10 +74,34 @@ window.addEventListener('beforeunload', function (e) { ipc.send(messages.LAST_WINDOW_STATE, windowStore.getState().toJS()) }) -ipc.on(messages.INITIALIZE_WINDOW, (e, windowValue, appState, frames, initWindowState) => { +ipc.on(messages.INITIALIZE_WINDOW, (e, windowValue, appState, frames, windowState) => { currentWindow.setWindowId(windowValue.id) + const newState = Immutable.fromJS(windowState) || windowStore.getState() + appStoreRenderer.state = Immutable.fromJS(appState) - ReactDOM.render( - , - document.getElementById('appContainer')) + windowStore.state = newState + generateTabs(newState, frames, windowValue.id) + appActions.windowReady(windowValue.id) + ReactDOM.render(, document.getElementById('appContainer')) }) + +const generateTabs = (windowState, frames, windowId) => { + const activeFrameKey = windowState.get('activeFrameKey') + + frames.forEach((frame, i) => { + if (frame.guestInstanceId) { + appActions.newWebContentsAdded(windowId, frame) + } else { + appActions.createTabRequested({ + url: frame.location || frame.src || frame.provisionalLocation, + partitionNumber: frame.partitionNumber, + isPrivate: frame.isPrivate, + active: activeFrameKey ? frame.key === activeFrameKey : true, + discarded: frame.unloaded, + title: frame.title, + faviconUrl: frame.icon, + index: i + }, false, true /* isRestore */) + } + }) +}