Clean up about plugin.

src/about/index.ts

@@ -129,91 +129,135 @@ const FILEBROWSER_IMAGE_CLASS = 'jp-About-fb';
  */
 const NOTEBOOK_IMAGE_CLASS = 'jp-About-nb';
 
+/**
+ * Title of About page.
+ */
+const TITLE = 'Welcome to the JupyterLab Alpha preview';
+
+/**
+ * Text on the first page that gives a high level overview of JupyterLab.
+ */
+const HEADER_TEXT = [
+  'Click on the Launcher tab for the initial JupyterLab screen.',
+  'This demo gives an alpha developer preview of the JupyterLab environment.',
+  'It is not ready for general usage yet.',
+  'We are developing JupyterLab at ',
+  'https://github.com/jupyterlab/jupyterlab',
+  '. Pull requests are welcome!',
+  `Here is a brief description of some of the things you'll find in this demo.`
+];
+
+/**
+ * Contains the plugin names.
+ */
+const PLUGIN_HEADERS = [
+  'Main Area',
+  'Command Palette',
+  'File Browser',
+  'Notebook'
+];
+
+/**
+ * Description of the main area and its functionality.
+ */
+const MAIN_AREA_DESC = [
+  'Open tabs and drag and drop them to rearrange them.',
+  `The main area is divided into panels of tabs. Drag a tab around the area
+   to split the main area in different ways. Drag a tab to the center of a
+   panel to move a tab without splitting the panel (in this case, the whole
+   panel will highlight instead of just a portion).`,
+  `Resize panels by dragging their borders (be aware that panels and sidebars
+   also have a minimum width). A file that contains changes to be saved has
+   a circle for a close icon.`
+];
+
+/**
+ * Description of the file browser and its functionality.
+ */
+const FILE_BROWSER_DESC = [
+  'Navigate and organize your files.',
+  `Clicking the "Files" tab, located on the left, will toggle the file browser.
+   Navigate into directories by double-clicking, and use the breadcrumbs at the
+   top to navigate out. Create a new file/directory by clicking the plus icon at
+   the top. Click the middle icon to upload files, and click the last icon to
+   reload the file listing. Drag and drop files to move them to subdirectories.
+   Click on a selected file to rename it. Sort the list by clicking on a column
+   header.
+   Open a file by double-clicking it or dragging it into the main area.
+   Opening an image displays the image. Opening a code file opens a code editor.
+   Opening a notebook opens a very preliminary notebook component.`
+];
+
+/**
+ * Description of the command palette and its functionality.
+ */
+const COMMAND_PALETTE_DESC = [
+  'View list of commands and keyboard shortcuts.',
+
+  `Clicking the "Commands" tab, located on the left, will toggle the command
+   palette. Execute a command by clicking, or navigating with your arrow keys
+   and pressing Enter. Filter commands by typing in the text box at the top of
+   the palette. The palette is organized into categories, and you can filter on
+   a single category by clicking on the category header or by typing the header
+   surrounded by colons in the search input (e.g., :file:).`,
+  'You can try these things from the command palette:',
+  'Open a new terminal (requires macOS or Linux)',
+  'Open an IPython console',
+  'Open a new file',
+  'Save a file',
+  'Open a help panel on the right'
+];
+
+/**
+ * Description of the notebook and its functionality.
+ */
+const NOTEBOOK_DESC = [
+  'Dedicate a tab to running a class notebook.',
+  `Opening a notebook will open a minimally-featured notebook.
+   Code execution, Markdown rendering, and basic cell toolbar actions are
+   supported.
+   Future versions will add more features from the existing Jupyter notebook.`
+];
+
 /**
  * AboutModel holds data which the AboutWidgetwill render.
  */
 export
 class AboutModel extends VDomModel {
-  // Title of About page.
-  readonly title: string;
-  // Text on the first page that gives a high level overview of JupyterLab.
-  readonly headerText: string[];
-  // Contains the plugin names.
-  readonly pluginHeaders: string[];
-  // Description of the main area and its functionality.
-  readonly mainAreaDesc: string[];
-  // Description of the file browser and its functionality.
-  readonly filebrowserDesc: string[];
-  // Description of the command palette and its functionality.
-  readonly commandPaletteDesc: string[];
-  // Description of the notebook and its functionality.
-  readonly notebookDesc: string[];
+  /**
+   * Title of About page.
+   */
+  readonly title = TITLE;
 
   /**
-   * Construct a new about model.
+   * Text on the first page that gives a high level overview of JupyterLab.
    */
-  constructor() {
-    super();
-    this.title = 'Welcome to the JupyterLab Alpha preview';
-    this.headerText = [
-      'Click on the Launcher tab for the initial JupyterLab screen.',
-      'This demo gives an Alpha-level developer preview of the JupyterLab environment. ',
-      'It is not ready for general usage yet.',
-      'We are developing JupyterLab at ',
-      'https://github.com/jupyterlab/jupyterlab',
-      '. Pull requests are welcome!',
-      'Here is a brief description of some fo the things you\'ll find in this demo.'
-    ];
-    this.pluginHeaders = [
-      'Main Area',
-      'Command Palette',
-      'File Browser',
-      'Notebook'
-    ];
-    this.mainAreaDesc = [
-      'Open tabs and drag and drop them to rearrange them.',
-      'The main area is divided into panels of tabs. Drag a tab around the area ' +
-      'to split the main area in different ways. Drag a tab to the center of a ' +
-      'panel to move a tab without splitting the panel (in this case, the whole ' +
-      'panel will highlight instead of just a portion).',
-      'Resize panels by dragging their borders (be aware that panels and sidebars ' +
-      'also have a minimum width). A file that contains changes to be saved has ' +
-      'a circle for a close icon.'
-    ];
-    this.filebrowserDesc = [
-      'Navigate and organize your files.',
-      'Clicking the "Files" tab, located on the left, will toggle the file browser. ' +
-      'Navigate into directories by double-clicking, and use the breadcrumbs at the ' +
-      'top to navigate out. Create a new file/directory by clicking the plus icon at ' +
-      'the top. Click the middle icon to upload files, and click the last icon to reload ' +
-      'the file listing. Drag and drop files to move them to subdirectories. ' +
-      'Click on a selected file to rename it. Sort the list by clicking on a column header. ' +
-      'Open a file by double-clicking it or dragging it into the main area. ' +
-      'Opening an image displays the image. Opening a code file opens a code editor. ' +
-      'Opening a notebook opens a very preliminary notebook component.'
-    ];
-    this.commandPaletteDesc = [
-      'View list of commands and keyboard shortcuts.',
-      'Clicking the "Commands" tab, located on the left, will toggle the command ' +
-      'palette. Execute a command by clicking, or navigating with your arrow keys ' +
-      'and pressing Enter. Filter commands by typing in the text box at the top of ' +
-      'the palette. The palette is organized into categories, and you can filter on ' +
-      'a single category by clicking on the category header or by typing the header ' +
-      'surrounded by colons in the search input (e.g., :fie).',
-      'You can try these things from the command palette:',
-      'Open a new terminal(requires macOS or Linux)',
-      'Open an IPython console',
-      'Open a new file',
-      'Save a file',
-      'Open a help panel on the right'
-    ];
-    this.notebookDesc = [
-      'Dedicate a tab to running a class notebook.',
-      'Opening a notebook will open a minimally-featured notebook. ' +
-      'Code execution, Markdown rendering, and basic cell toolbar actions are supported. ' +
-      'Future versions will add more features from the existing Jupyter notebook.'
-    ];
-  }
+  readonly headerText = HEADER_TEXT;
+
+  /**
+   * Contains the plugin names.
+   */
+  readonly pluginHeaders = PLUGIN_HEADERS;
+
+  /**
+   * Description of the main area and its functionality.
+   */
+  readonly mainAreaDesc = MAIN_AREA_DESC;
+
+  /**
+   * Description of the file browser and its functionality.
+   */
+  readonly filebrowserDesc = FILE_BROWSER_DESC;
+
+  /**
+   * Description of the command palette and its functionality.
+   */
+  readonly commandPaletteDesc = COMMAND_PALETTE_DESC;
+
+  /**
+   * Description of the notebook and its functionality.
+   */
+  readonly notebookDesc = NOTEBOOK_DESC;
 }
 
 /**
@@ -255,9 +299,7 @@ class AboutWidget extends VDomWidget<AboutModel> {
         h.p({ className: HEADER_CLASS }, title),
         h.div({ className: DESC_ONE_CLASS },
           h.p(headerText[0]),
-          h.p(headerText[1],
-            h.b(headerText[2])
-          ),
+          h.p(headerText[1], ' ', h.strong(headerText[2])),
           h.p(headerText[3],
             h.a({ href: headerText[4], target: '_blank' }, headerText[4]),
             headerText[5]

src/about/plugin.ts

@@ -38,15 +38,15 @@ const plugin: JupyterLabPlugin<void> = {
 
 
 function activateAbout(app: JupyterLab, palette: ICommandPalette, state: IStateDB, layout: ILayoutRestorer): void {
+  const namespace = 'about-jupyterlab';
   const model = new AboutModel();
-  const command = 'about-jupyterlab:show';
+  const command = `${namespace}:show`;
   const category = 'Help';
   const tracker = new InstanceTracker<AboutWidget>({
     restore: {
-      state, layout, command,
+      state, layout, command, namespace,
       args: widget => null,
       name: widget => 'about',
-      namespace: 'about',
       when: app.started,
       registry: app.commands
     }