Presentation mode (#3509)

* Initial logic of presentation mode.

* Initial style for presentation mode.

packages/application-extension/src/index.ts

@@ -43,6 +43,9 @@ namespace CommandIDs {
   export
   const toggleRightArea: string = 'application:toggle-right-area';
 
+  export
+  const togglePresentationMode: string = 'application:toggle-presentation-mode';
+
   export
   const tree: string = 'router:tree';
 
@@ -284,6 +287,18 @@ function addCommands(app: JupyterLab, palette: ICommandPalette): void {
   });
   palette.addItem({ command, category });
 
+  command = CommandIDs.togglePresentationMode;
+  app.commands.addCommand(command, {
+    label: args => args['isPalette'] ?
+      'Toggle Presentation Mode' : 'Presentation Mode',
+    execute: () => {
+      app.shell.presentationMode = !app.shell.presentationMode;
+    },
+    isToggled: () => app.shell.presentationMode,
+    isVisible: () => true
+  });
+  palette.addItem({ command, category,  args: { 'isPalette': true } });
+
   command = CommandIDs.setMode;
   app.commands.addCommand(command, {
     isVisible: args => {

packages/application/src/shell.ts

@@ -191,6 +191,20 @@ class ApplicationShell extends Widget {
     return !this._rightHandler.sideBar.currentTitle;
   }
 
+  /**
+   * Whether JupyterLab is in presentation mode with the `jp-mod-presentationMode` CSS class.
+   */
+  get presentationMode(): boolean {
+    return this.hasClass('jp-mod-presentationMode');
+  }
+
+  /**
+   * Enable/disable presentation mode (`jp-mod-presentationMode` CSS class) with a boolean.
+   */
+  set presentationMode(value: boolean) {
+    this.toggleClass('jp-mod-presentationMode', value);
+  }
+
   /**
    * The main dock area's user interface mode.
    */

packages/console/style/index.css

@@ -116,3 +116,20 @@
   box-shadow: var(--jp-input-box-shadow);
   background-color: var(--jp-cell-editor-active-background);
 }
+
+
+/*-----------------------------------------------------------------------------
+| Presentation Mode (.jp-mod-presentationMode)
+|----------------------------------------------------------------------------*/
+
+
+.jp-mod-presentationMode .jp-CodeConsole {
+  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
+  --jp-code-font-size: var(--jp-code-presentation-font-size);
+}
+
+
+.jp-mod-presentationMode .jp-CodeConsole .jp-Cell .jp-InputPrompt,
+.jp-mod-presentationMode .jp-CodeConsole .jp-Cell .jp-OutputPrompt {
+  flex: 0 0 110px;
+}

packages/fileeditor/style/index.css

@@ -15,3 +15,13 @@
     box-shadow: var(--jp-toolbar-box-shadow);
     z-index: 10;
 }
+
+
+/*-----------------------------------------------------------------------------
+| Presentation Mode (.jp-mod-presentationMode)
+|----------------------------------------------------------------------------*/
+
+
+.jp-mod-presentationMode .jp-FileEditor {
+  --jp-code-font-size: var(--jp-code-presentation-font-size);
+}

packages/mainmenu-extension/src/index.ts

@@ -361,7 +361,10 @@ function createViewMenu(app: JupyterLab, menu: ViewMenu): void {
   menu.addGroup(editorViewerGroup, 10);
 
   // Add the command for toggling single-document mode.
-  menu.addGroup([{ command: 'application:toggle-mode' }], 1000);
+  menu.addGroup([
+    { command: 'application:toggle-mode' },
+    { command: 'application:toggle-presentation-mode'}
+  ], 1000);
 }
 
 function createRunMenu(app: JupyterLab, menu: RunMenu): void {

packages/markdownviewer-extension/style/index.css

@@ -14,3 +14,14 @@
   padding-left: var(--jp-private-markdownviewer-padding);
   overflow: auto;
 }
+
+
+/*-----------------------------------------------------------------------------
+| Presentation Mode (.jp-mod-presentationMode)
+|----------------------------------------------------------------------------*/
+
+
+.jp-mod-presentationMode .jp-MimeDocument .jp-RenderedHTMLCommon {
+  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
+  --jp-code-font-size: var(--jp-code-presentation-font-size);
+}

packages/notebook/style/index.css

@@ -297,3 +297,20 @@
   height: var(--jp-toolbar-micro-height);
   z-index: 1;
 }
+
+
+/*-----------------------------------------------------------------------------
+| Presentation Mode (.jp-mod-presentationMode)
+|----------------------------------------------------------------------------*/
+
+
+.jp-mod-presentationMode .jp-Notebook {
+  --jp-content-font-size1: var(--jp-content-presentation-font-size1);
+  --jp-code-font-size: var(--jp-code-presentation-font-size);
+}
+
+.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
+.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
+  flex: 0 0 110px;
+}
+

packages/theme-dark-extension/style/variables.css

@@ -89,10 +89,10 @@ all of MD as it is not optimized for dense, information rich UIs.
    */
 
   --jp-ui-font-scale-factor: 1.2;
-  --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size0: 0.83333em;
   --jp-ui-font-size1: 13px; /* Base font size */
-  --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
-  --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size2: 1.2em;
+  --jp-ui-font-size3: 1.44em;
 
   --jp-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
@@ -120,16 +120,23 @@ all of MD as it is not optimized for dense, information rich UIs.
   /* Content Fonts
    *
    * Content font variables are used for typography of user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
    */
 
   --jp-content-line-height: 1.6;
   --jp-content-font-scale-factor: 1.2;
-  --jp-content-font-size0: calc( var(--jp-content-font-size1)/var(--jp-content-font-scale-factor) );
+  --jp-content-font-size0: 0.83333em;
   --jp-content-font-size1: 14px; /* Base font size */
-  --jp-content-font-size2: calc( var(--jp-content-font-size1)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size3: calc( var(--jp-content-font-size2)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size4: calc( var(--jp-content-font-size3)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size5: calc( var(--jp-content-font-size4)*var(--jp-content-font-scale-factor) );
+  --jp-content-font-size2: 1.2em;
+  --jp-content-font-size3: 1.44em;
+  --jp-content-font-size4: 1.728em;
+  --jp-content-font-size5: 2.0736em;
+
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-content-presentation-font-size1: 17px;
 
   --jp-content-heading-line-height: 1.0;
   --jp-content-heading-margin-top: 1.2em;
@@ -154,10 +161,13 @@ all of MD as it is not optimized for dense, information rich UIs.
    */
 
   --jp-code-font-size: 13px;
-  --jp-code-line-height: 17px;
-  --jp-code-padding: 5px;
+  --jp-code-line-height: 1.3077; /* 17px for 13px base */
+  --jp-code-padding: 0.385em; /* 5px for 13px base */
   --jp-code-font-family: 'Source Code Pro', monospace;
 
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-code-presentation-font-size: 16px;
+
   /* Layout
    *
    * The following are the main layout colors use in JupyterLab. In a light

packages/theme-light-extension/style/variables.css

@@ -87,10 +87,10 @@ all of MD as it is not optimized for dense, information rich UIs.
    */
 
   --jp-ui-font-scale-factor: 1.2;
-  --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size0: 0.83333em;
   --jp-ui-font-size1: 13px; /* Base font size */
-  --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
-  --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
+  --jp-ui-font-size2: 1.2em;
+  --jp-ui-font-size3: 1.44em;
 
   --jp-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
@@ -118,16 +118,23 @@ all of MD as it is not optimized for dense, information rich UIs.
   /* Content Fonts
    *
    * Content font variables are used for typography of user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
    */
 
   --jp-content-line-height: 1.6;
   --jp-content-font-scale-factor: 1.2;
-  --jp-content-font-size0: calc( var(--jp-content-font-size1)/var(--jp-content-font-scale-factor) );
+  --jp-content-font-size0: 0.83333em;
   --jp-content-font-size1: 14px; /* Base font size */
-  --jp-content-font-size2: calc( var(--jp-content-font-size1)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size3: calc( var(--jp-content-font-size2)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size4: calc( var(--jp-content-font-size3)*var(--jp-content-font-scale-factor) );
-  --jp-content-font-size5: calc( var(--jp-content-font-size4)*var(--jp-content-font-scale-factor) );
+  --jp-content-font-size2: 1.2em;
+  --jp-content-font-size3: 1.44em;
+  --jp-content-font-size4: 1.728em;
+  --jp-content-font-size5: 2.0736em;
+
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-content-presentation-font-size1: 17px;
 
   --jp-content-heading-line-height: 1.0;
   --jp-content-heading-margin-top: 1.2em;
@@ -151,10 +158,13 @@ all of MD as it is not optimized for dense, information rich UIs.
    */
 
   --jp-code-font-size: 13px;
-  --jp-code-line-height: 17px;
-  --jp-code-padding: 5px;
+  --jp-code-line-height: 1.3077; /* 17px for 13px base */
+  --jp-code-padding: 0.385em; /* 5px for 13px base */
   --jp-code-font-family: 'Source Code Pro', monospace;
 
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-code-presentation-font-size: 16px;
+
   /* Layout
    *
    * The following are the main layout colors use in JupyterLab. In a light