Keep state and dock toggling in sync

lib/controllers/root-controller.js

@@ -77,11 +77,19 @@ export default class RootController extends React.Component {
 
   constructor(props, context) {
     super(props, context);
+
+    const renderGitTab = props.startOpen ||
+      (props.savedState.gitTabActive === undefined ?
+        !this.props.useLegacyPanels : this.props.savedState.gitTabActive);
+    const renderGitHubTab = props.startOpen ||
+      (props.savedState.githubTabActive === undefined ?
+        !this.props.useLegacyPanels : this.props.savedState.githubTabActive);
+
     this.state = {
       ...nullFilePatchState,
       amending: false,
-      gitTabActive: props.startOpen || props.savedState.gitTabActive,
-      githubTabActive: props.startOpen || props.savedState.githubTabActive || props.savedState.githubPanelActive,
+      gitTabActive: renderGitTab,
+      githubTabActive: renderGitHubTab,
       panelSize: props.savedState.panelSize || 400,
       activeTab: props.savedState.activeTab || 0,
       cloneDialogActive: false,
@@ -110,16 +118,26 @@ export default class RootController extends React.Component {
     );
 
     this.gitTabTracker = new TabTracker('git', {
+      useLegacyPanels: this.props.useLegacyPanels,
       getState: () => this.state.gitTabActive,
-      setState: (value, callback) => this.setState({gitTabActive: value}, callback),
+      setState: (value, {activateTab}, callback) => {
+        const newState = {gitTabActive: value};
+        if (activateTab) { newState.activeTab = 0; }
+        this.setState(newState, callback);
+      },
       getController: () => this.gitTabController,
       getDockItem: () => this.gitDockItem,
       getWorkspace: () => this.props.workspace,
     });
 
     this.githubTabTracker = new TabTracker('github', {
+      useLegacyPanels: this.props.useLegacyPanels,
       getState: () => this.state.githubTabActive,
-      setState: (value, callback) => this.setState({githubTabActive: value}, callback),
+      setState: (value, {activateTab}, callback) => {
+        const newState = {githubTabActive: value};
+        if (activateTab) { newState.activeTab = 1; }
+        this.setState(newState, callback);
+      },
       getController: () => this.githubTabController,
       getDockItem: () => this.githubDockItem,
       getWorkspace: () => this.props.workspace,
@@ -133,6 +151,9 @@ export default class RootController extends React.Component {
   componentWillReceiveProps(newProps) {
     this.repositoryObserver.setActiveModel(newProps.repository);
     this.repositoryStateRegistry.setModel(newProps.repository);
+
+    this.gitTabTracker.useLegacyPanels = newProps.useLegacyPanels;
+    this.githubTabTracker.useLegacyPanels = newProps.useLegacyPanels;
   }
 
   render() {
@@ -243,8 +264,8 @@ export default class RootController extends React.Component {
       <Panel
         workspace={this.props.workspace}
         location="right"
-        onDidClosePanel={() => this.setState({gitTabActive: false})}
-        visible={!!this.state.gitTabActive}>
+        onDidClosePanel={() => this.setState({gitTabActive: false, githubTabActive: false})}
+        visible={!!this.state.gitTabActive || !!this.state.githubTabActive}>
         <Resizer
           size={this.state.panelSize}
           onChange={this.handlePanelResize}
@@ -811,19 +832,17 @@ export default class RootController extends React.Component {
 }
 
 class TabTracker {
-  constructor(name, {getState, setState, getController, getDockItem, getWorkspace}) {
+  constructor(name, {useLegacyPanels, getState, setState, getController, getDockItem, getWorkspace}) {
     this.name = name;
 
+    this.useLegacyPanels = useLegacyPanels;
     this.getState = getState;
     this.getWorkspace = getWorkspace;
     this.getController = getController;
+    this.getDockItem = getDockItem;
 
-    this.setStateKey = value => {
-      return new Promise(resolve => setState(value, resolve));
-    };
-    this.getDockItem = () => {
-      const item = getDockItem();
-      return item ? item.getDockItem() : null;
+    this.setStateKey = (value, options = {activateTab: false}) => {
+      return new Promise(resolve => setState(value, options, resolve));
     };
   }
 
@@ -842,14 +861,29 @@ class TabTracker {
     const focusToRestore = document.activeElement;
     let shouldRestoreFocus = false;
 
-    if (!this.getState()) {
-      await this.setStateKey(true);
+    // Rendered => the dock item is being rendered, whether or not the dock is visible or the item
+    //   is visible within its dock.
+    // Visible => the item is active and the dock item is active within its dock.
+    const wasRendered = this.getState();
+    const wasVisible = this.isVisible();
+
+    if (!wasRendered) {
+      // Not rendered.
+      await this.setStateKey(true, {activateTab: true});
+      await this.reveal();
+      shouldRestoreFocus = true;
+    } else if (!wasVisible) {
+      // Rendered, but not an active item in a visible dock.
+      await this.reveal();
       shouldRestoreFocus = true;
-    } else if (this.getDockItem()) {
-      shouldRestoreFocus = await this.getWorkspace().toggle(this.getDockItem()) !== undefined;
     } else {
-      // Legacy panels.
-      await this.setStateKey(false);
+      // Rendered and an active item within a visible dock.
+      if (this.useLegacyPanels) {
+        await this.setStateKey(false);
+      } else {
+        await this.hide();
+      }
+      shouldRestoreFocus = false;
     }
 
     if (shouldRestoreFocus) {
@@ -875,15 +909,23 @@ class TabTracker {
   @autobind
   async ensureVisible() {
     if (!this.isVisible()) {
-      await this.setStateKey(true);
-      if (this.getDockItem()) {
-        await this.getWorkspace().open(this.getDockItem());
-      }
+      await this.setStateKey(true, {activateTab: true});
+      await this.reveal();
       return true;
     }
     return false;
   }
 
+  reveal() {
+    const dockItem = this.getDockItem();
+    return dockItem ? dockItem.reveal() : Promise.resolve(null);
+  }
+
+  hide() {
+    const dockItem = this.getDockItem();
+    return dockItem ? dockItem.hide() : Promise.resolve(null);
+  }
+
   focus() {
     this.getControllerComponent().restoreFocus();
   }
@@ -902,7 +944,7 @@ class TabTracker {
     const workspace = this.getWorkspace();
     return workspace.getPaneContainers()
       .filter(container => container === workspace.getCenter() || container.isVisible())
-      .some(container => container.getPanes().some(pane => pane.getActiveItem() === item));
+      .some(container => container.getPanes().some(pane => pane.getActiveItem() === item.getDockItem()));
   }
 
   hasFocus() {

lib/github-package.js

@@ -23,8 +23,6 @@ import AsyncQueue from './async-queue';
 import WorkerManager from './worker-manager';
 
 const defaultState = {
-  firstRun: true,
-  resolutionProgressByPath: {},
 };
 
 export default class GithubPackage {
@@ -41,8 +39,9 @@ export default class GithubPackage {
 
     this.styleCalculator = new StyleCalculator(this.styles, this.config);
     this.confirm = confirm;
-    this.useLegacyPanels = false;
+    this.useLegacyPanels = !this.workspace.getLeftDock || this.config.get('github.useLegacyPanels');
     this.startOpen = false;
+    this.activated = false;
 
     const criteria = {
       projectPathCount: this.project.getPaths().length,
@@ -127,11 +126,7 @@ export default class GithubPackage {
     const firstRun = !await fileExists(this.configPath);
     this.startOpen = firstRun && !this.config.get('welcome.showOnStartup');
     if (firstRun) {
-      await writeFile(this.configPath, '# Store non-visible GitHub package state.');
-    }
-
-    if (!this.workspace.getLeftDock || this.config.get('github.useLegacyPanels')) {
-      this.useLegacyPanels = true;
+      await writeFile(this.configPath, '# Store non-visible GitHub package state.\n');
     }
 
     this.subscriptions.add(
@@ -172,6 +167,7 @@ export default class GithubPackage {
       this.workspace.addOpener(IssueishPaneItem.opener),
     );
 
+    this.activated = true;
     this.scheduleActiveContextUpdate(this.savedState);
     this.rerender();
   }
@@ -193,6 +189,10 @@ export default class GithubPackage {
       return;
     }
 
+    if (!this.activated) {
+      return;
+    }
+
     if (!this.element) {
       this.element = document.createElement('div');
       this.subscriptions.add(new Disposable(() => {

lib/views/dock-item.js

@@ -35,6 +35,14 @@ export default class DockItem extends React.Component {
     onDidCloseItem: dockItem => {},
   }
 
+  constructor(props, context) {
+    super(props, context);
+
+    this.dockItemPromise = new Promise(resolve => {
+      this.resolveDockItemPromise = resolve;
+    });
+  }
+
   componentDidMount() {
     this.setupDockItem();
   }
@@ -79,13 +87,15 @@ export default class DockItem extends React.Component {
     if (stub) {
       stub.setRealItem(itemToAdd);
       this.dockItem = stub;
+      this.resolveDockItemPromise(this.dockItem);
       if (this.props.activate) {
         this.activate();
       }
     } else {
       Promise.resolve(this.props.workspace.open(itemToAdd, {activatePane: false}))
         .then(item => {
           this.dockItem = item;
+          this.resolveDockItemPromise(this.dockItem);
           if (this.props.activate) { this.activate(); }
         });
     }
@@ -100,10 +110,6 @@ export default class DockItem extends React.Component {
     );
   }
 
-  getDockItem() {
-    return this.dockItem;
-  }
-
   componentWillUnmount() {
     this.subscriptions && this.subscriptions.dispose();
     if (this.dockItem && !this.didCloseItem) {
@@ -115,6 +121,26 @@ export default class DockItem extends React.Component {
     }
   }
 
+  getDockItem() {
+    return this.dockItem;
+  }
+
+  getDockItemPromise() {
+    return this.dockItemPromise;
+  }
+
+  async reveal() {
+    const dockItem = await this.getDockItemPromise();
+    return this.props.workspace.open(dockItem, {
+      searchAllPanes: true,
+    });
+  }
+
+  async hide() {
+    const dockItem = await this.getDockItemPromise();
+    return this.props.workspace.hide(dockItem);
+  }
+
   activate() {
     setTimeout(() => {
       if (!this.dockItem || this.didCloseItem || this.props.workspace.isDestroyed()) {