Improve hidden webview

src/browser/components/ErrorView.jsx

@@ -31,10 +31,17 @@ const errorPage = {
 };
 
 function ErrorView(props) {
+  const classNames = ['errorView'];
+  if (!props.active) {
+    classNames.push('errorView-hidden');
+  }
+  if (props.withTab) {
+    classNames.push('errorView-with-tab');
+  }
   return (
     <Grid
       id={props.id}
-      style={props.style}
+      bsClass={classNames.join(' ')}
     >
       <div style={errorPage.tableStyle}>
         <div style={errorPage.cellStyle}>
@@ -87,7 +94,8 @@ function ErrorView(props) {
 ErrorView.propTypes = {
   errorInfo: React.PropTypes.object,
   id: React.PropTypes.number,
-  style: React.PropTypes.object
+  active: React.PropTypes.bool,
+  withTab: React.PropTypes.bool
 };
 
 module.exports = ErrorView;

src/browser/components/MainPage.jsx

@@ -201,18 +201,6 @@ const MainPage = React.createClass({
     this.markReadAtActive(index);
   },
 
-  visibleStyle(visible) {
-    var visibility = visible ? 'visible' : 'hidden';
-    return {
-      position: 'absolute',
-      top: (this.props.teams.length > 1) ? 32 : 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      visibility
-    };
-  },
-
   handleLogin(request, username, password) {
     ipcRenderer.send('login-credentials', request, username, password);
     const loginQueue = this.state.loginQueue;
@@ -275,7 +263,7 @@ const MainPage = React.createClass({
         <MattermostView
           key={id}
           id={id}
-          style={self.visibleStyle(isActive)}
+          withTab={this.props.teams.length > 1}
           src={team.url}
           name={team.name}
           onTargetURLChange={self.handleTargetURLChange}

src/browser/components/MattermostView.jsx

@@ -15,7 +15,8 @@ const MattermostView = React.createClass({
     onTargetURLChange: React.PropTypes.func,
     onUnreadCountChange: React.PropTypes.func,
     src: React.PropTypes.string,
-    style: React.PropTypes.object
+    active: React.PropTypes.bool,
+    withTab: React.PropTypes.bool
   },
 
   getInitialState() {
@@ -185,19 +186,26 @@ const MattermostView = React.createClass({
     const errorView = this.state.errorInfo ? (
       <ErrorView
         id={this.props.id + '-fail'}
-        style={this.props.style}
         className='errorView'
         errorInfo={this.state.errorInfo}
+        active={this.props.active}
+        withTab={this.props.withTab}
       />) : null;
 
     // Need to keep webview mounted when failed to load.
+    const classNames = ['mattermostView'];
+    if (this.props.withTab) {
+      classNames.push('mattermostView-with-tab');
+    }
+    if (!this.props.active) {
+      classNames.push('mattermostView-hidden');
+    }
     return (
       <div>
         { errorView }
         <webview
           id={this.props.id}
-          className='mattermostView'
-          style={this.props.style}
+          className={classNames.join(' ')}
           preload={preloadJS}
           src={this.props.src}
           ref='webview'

src/browser/css/components/ErrorView.css

@@ -0,0 +1,15 @@
+.errorView {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.errorView-with-tab {
+  top: 32px;
+}
+
+.errorView-hidden {
+  visibility: hidden;
+}

src/browser/css/components/MattermostView.css

@@ -0,0 +1,17 @@
+.mattermostView {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.mattermostView-with-tab {
+  top: 32px;
+}
+
+.mattermostView-hidden {
+  flex: 0 1;
+  width: 0px;
+  height: 0px;
+}

src/browser/css/index.css

@@ -1,3 +1,5 @@
+@import url("components/MattermostView.css");
+@import url("components/ErrorView.css");
 
 .hovering-enter {
   opacity: 0.01;

test/specs/browser/index_test.js

@@ -126,14 +126,16 @@ describe('browser/index.html', function desc() {
     return this.app.restart().then(() => {
       return this.app.client.waitUntilWindowLoaded().pause(500);
     }).then(() => {
+      // Note: Indices of webview are correct.
+      // Somehow they are swapped.
       return this.app.client.
-        windowByIndex(1).
+        windowByIndex(2).
         execute(() => {
           document.title = 'Title 0';
         }).
         windowByIndex(0).
         browserWindow.getTitle().then((title) => title.should.equal('Title 0')).
-        windowByIndex(2).
+        windowByIndex(1).
         execute(() => {
           document.title = 'Title 1';
         }).
@@ -154,14 +156,16 @@ describe('browser/index.html', function desc() {
       }]
     }));
     return this.app.restart().then(() => {
+      // Note: Indices of webview are correct.
+      // Somehow they are swapped.
       return this.app.client.
         waitUntilWindowLoaded().
         pause(500).
-        windowByIndex(1).
+        windowByIndex(2).
         execute(() => {
           document.title = 'Title 0';
         }).
-        windowByIndex(2).
+        windowByIndex(1).
         execute(() => {
           document.title = 'Title 1';
         }).