Enable state restoration for about plugin.

src/about/index.css

@@ -9,7 +9,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: scroll;
+  outline: none;
+  overflow-y: auto;
   scroll-snap-points-y: repeat(100%);
   scroll-snap-type: mandatory;
   scroll-snap-destination: 100% 0%;

src/about/index.ts

@@ -1,6 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import {
+  Message
+} from 'phosphor/lib/core/messaging';
+
 import {
   h, VNode
 } from 'phosphor/lib/ui/vdom';
@@ -9,10 +13,6 @@ import {
   VDomModel, VDomWidget
 } from '../common/vdom';
 
-/**
- * The id name added to the About plugin root DOM node.
- */
-const ABOUT_ID = 'about';
 
 /**
  * The class name added to each page in the About plugin.
@@ -222,10 +222,19 @@ class AboutModel extends VDomModel {
 export
 class AboutWidget extends VDomWidget<AboutModel> {
   /**
-   * Construct a new about widget.
+   * Handle `'activate-request'` messages.
    */
-  constructor() {
-    super();
+  protected onActivateRequest(msg: Message): void {
+    this.node.tabIndex = -1;
+    this.node.focus();
+  }
+
+  /**
+   * Handle `'close-request'` messages.
+   */
+  protected onCloseRequest(msg: Message): void {
+    super.onCloseRequest(msg);
+    this.dispose();
   }
 
   /**
@@ -376,7 +385,7 @@ class AboutWidget extends VDomWidget<AboutModel> {
     );
 
     let domTree =
-    h.div({id: ABOUT_ID},
+    h.div(
       h.div({className: SECTION_CLASS},
         h.div({className: SECTION_CENTER_CLASS},
           h.div({className: CONTAINER_CLASS},

src/about/plugin.ts

@@ -9,6 +9,18 @@ import {
   ICommandPalette
 } from '../commandpalette';
 
+import {
+  InstanceTracker
+} from '../common/instancetracker';
+
+import {
+  ILayoutRestorer
+} from '../layoutrestorer';
+
+import {
+  IStateDB
+} from '../statedb';
+
 import {
   AboutModel, AboutWidget
 } from './';
@@ -21,28 +33,47 @@ const aboutExtension: JupyterLabPlugin<void> = {
   id: 'jupyter.extensions.about',
   activate: activateAbout,
   autoStart: true,
-  requires: [ICommandPalette]
+  requires: [ICommandPalette, IStateDB, ILayoutRestorer]
 };
 
 
-function activateAbout(app: JupyterLab, palette: ICommandPalette): void {
-  let model = new AboutModel();
-  let widget = new AboutWidget();
-  widget.model = model;
-  widget.id = 'about-jupyterlab';
-  widget.title.label = 'About';
-  widget.title.closable = true;
-  widget.node.style.overflowY = 'auto';
+function activateAbout(app: JupyterLab, palette: ICommandPalette, state: IStateDB, layout: ILayoutRestorer): void {
+  const model = new AboutModel();
+  const command = 'about-jupyterlab:show';
+  const category = 'Help';
+  const tracker = new InstanceTracker<AboutWidget>({
+    restore: {
+      state, layout, command,
+      args: widget => null,
+      name: widget => 'about',
+      namespace: 'abouts',
+      when: app.started,
+      registry: app.commands
+    }
+  });
+
+  let widget: AboutWidget;
+
+  function newWidget(): AboutWidget {
+    let widget = new AboutWidget();
+    widget.model = model;
+    widget.id = 'about';
+    widget.title.label = 'About';
+    widget.title.closable = true;
+    tracker.add(widget);
+    return widget;
+  }
 
-  let command = 'about-jupyterlab:show';
   app.commands.addCommand(command, {
     label: 'About JupyterLab',
     execute: () => {
-      if (!widget.isAttached) {
+      if (!widget || widget.isDisposed) {
+        widget = newWidget();
         app.shell.addToMainArea(widget);
       }
       app.shell.activateMain(widget.id);
     }
   });
-  palette.addItem({ command, category: 'Help' });
+
+  palette.addItem({ command, category });
 }

src/faq/plugin.ts

@@ -43,7 +43,7 @@ const faqExtension: JupyterLabPlugin<void> = {
 
 
 /**
- * Activate the faq plugin.
+ * Activate the FAQ plugin.
  */
 function activateFAQ(app: JupyterLab, palette: ICommandPalette, linker: ICommandLinker, state: IStateDB, layout: ILayoutRestorer): void {
   const category = 'Help';
@@ -61,12 +61,11 @@ function activateFAQ(app: JupyterLab, palette: ICommandPalette, linker: ICommand
   });
 
   let widget: FaqWidget;
-  let id = 0;
 
   function newWidget(): FaqWidget {
     let widget = new FaqWidget({ linker });
     widget.model = model;
-    widget.id = `faq-${++id}`;
+    widget.id = 'faq';
     widget.title.label = 'FAQ';
     widget.title.closable = true;
     tracker.add(widget);