Merge pull request #6566 from jasongrout/themevar

Move theme dataset attributes to the body element and namespace them

packages/application-extension/src/index.tsx

@@ -397,10 +397,8 @@ const sidebar: JupyterFrontEndPlugin<void> = {
     app.commands.addCommand(CommandIDs.switchSidebar, {
       label: 'Switch Sidebar Side',
       execute: () => {
-        // First, try to find the right panel based on the
-        // application context menu click,
-        // If we can't find it there, look for use the active
-        // left/right widgets.
+        // First, try to find the correct panel based on the
+        // application context menu click.
         const contextNode: HTMLElement = app.contextMenuHitTest(
           node => !!node.dataset.id
         );
@@ -415,14 +413,10 @@ const sidebar: JupyterFrontEndPlugin<void> = {
           } else {
             side = 'left';
           }
-        } else if (document.body.dataset.leftSidebarWidget) {
-          id = document.body.dataset.leftSidebarWidget;
-          side = 'right';
-        } else if (document.body.dataset.rightSidebarWidget) {
-          id = document.body.dataset.rightSidebarWidget;
-          side = 'left';
+        } else {
+          // Bail if we don't find a sidebar for the widget.
+          return;
         }
-
         // Move the panel to the other side.
         const newOverrides = { ...overrides };
         newOverrides[id] = side;

packages/application/src/shell.ts

@@ -54,11 +54,6 @@ const ACTIVE_CLASS = 'jp-mod-active';
  */
 const DEFAULT_RANK = 500;
 
-/**
- * The data attribute added to the document body indicating shell's mode.
- */
-const MODE_ATTRIBUTE = 'data-shell-mode';
-
 const ACTIVITY_CLASS = 'jp-Activity';
 
 /* tslint:disable */
@@ -361,8 +356,8 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
         dock.activateWidget(this.currentWidget);
       }
 
-      // Set the mode data attribute on the document body.
-      document.body.setAttribute(MODE_ATTRIBUTE, mode);
+      // Set the mode data attribute on the application shell node.
+      this.node.dataset.shellMode = mode;
       return;
     }
 
@@ -401,8 +396,8 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
       dock.activateWidget(applicationCurrentWidget);
     }
 
-    // Set the mode data attribute on the document body.
-    document.body.setAttribute(MODE_ATTRIBUTE, mode);
+    // Set the mode data attribute on the applications shell node.
+    this.node.dataset.shellMode = mode;
   }
 
   /**
@@ -694,7 +689,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
    * Handle `after-attach` messages for the application shell.
    */
   protected onAfterAttach(msg: Message): void {
-    document.body.setAttribute(MODE_ATTRIBUTE, this.mode);
+    this.node.dataset.shellMode = this.mode;
   }
 
   /**
@@ -1033,7 +1028,6 @@ namespace Private {
      * Construct a new side bar handler.
      */
     constructor(side: string) {
-      this._side = side;
       this._sideBar = new TabBar<Widget>({
         insertBehavior: 'none',
         removeBehavior: 'none',
@@ -1205,12 +1199,6 @@ namespace Private {
         newWidget.show();
       }
       this._lastCurrent = newWidget || oldWidget;
-      if (newWidget) {
-        const id = newWidget.id;
-        document.body.setAttribute(`data-${this._side}-sidebar-widget`, id);
-      } else {
-        document.body.removeAttribute(`data-${this._side}-sidebar-widget`);
-      }
       this._refreshVisibility();
     }
 
@@ -1237,7 +1225,6 @@ namespace Private {
     }
 
     private _items = new Array<Private.IRankItem>();
-    private _side: string;
     private _sideBar: TabBar<Widget>;
     private _stackedPanel: StackedPanel;
     private _lastCurrent: Widget | null;

packages/application/style/scrollbar.css

@@ -8,14 +8,14 @@
  */
 
 /* use standard opaque scrollbars for most nodes */
-div.jp-LabShell[data-theme-scrollbars='true'] {
+div.jp-LabShell[data-jp-theme-scrollbars='true'] {
   scrollbar-color: rgb(var(--jp-scrollbar-thumb-color))
     var(--jp-scrollbar-background-color);
 }
 
 /* for code nodes, use a transparent style of scrollbar */
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar {
+[data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar,
+[data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar {
   scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
 }
 
@@ -25,26 +25,26 @@ div.jp-LabShell[data-theme-scrollbars='true'] {
 
 /* use standard opaque scrollbars for most nodes */
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar,
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-corner {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-corner {
   background: var(--jp-scrollbar-background-color);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-thumb {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-thumb {
   background: rgb(var(--jp-scrollbar-thumb-color));
   border: var(--jp-scrollbar-thumb-margin) solid transparent;
   background-clip: content-box;
   border-radius: var(--jp-scrollbar-thumb-radius);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-track:horizontal {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:horizontal {
   border-left: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
   border-right: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
 }
 
-[data-theme-scrollbars='true'] ::-webkit-scrollbar-track:vertical {
+[data-jp-theme-scrollbars='true'] ::-webkit-scrollbar-track:vertical {
   border-top: var(--jp-scrollbar-endpad) solid
     var(--jp-scrollbar-background-color);
   border-bottom: var(--jp-scrollbar-endpad) solid
@@ -53,29 +53,32 @@ div.jp-LabShell[data-theme-scrollbars='true'] {
 
 /* for code nodes, use a transparent style of scrollbar */
 
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar,
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar-corner,
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar,
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-hscrollbar::-webkit-scrollbar-corner,
+[data-jp-theme-scrollbars='true']
   .CodeMirror-vscrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
 }
 
-[data-theme-scrollbars='true'] .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
-[data-theme-scrollbars='true'] .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
+[data-jp-theme-scrollbars='true']
+  .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
   background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
   border: var(--jp-scrollbar-thumb-margin) solid transparent;
   background-clip: content-box;
   border-radius: var(--jp-scrollbar-thumb-radius);
 }
 
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true']
   .CodeMirror-hscrollbar::-webkit-scrollbar-track:horizontal {
   border-left: var(--jp-scrollbar-endpad) solid transparent;
   border-right: var(--jp-scrollbar-endpad) solid transparent;
 }
 
-[data-theme-scrollbars='true']
+[data-jp-theme-scrollbars='true']
   .CodeMirror-vscrollbar::-webkit-scrollbar-track:vertical {
   border-top: var(--jp-scrollbar-endpad) solid transparent;
   border-bottom: var(--jp-scrollbar-endpad) solid transparent;

packages/apputils-extension/src/index.ts

@@ -130,13 +130,15 @@ const themes: JupyterFrontEndPlugin<IThemeManager> = {
     // Set data attributes on the application shell for the current theme.
     manager.themeChanged.connect((sender, args) => {
       currentTheme = args.newValue;
-      app.shell.dataset.themeLight = String(manager.isLight(currentTheme));
-      app.shell.dataset.themeName = currentTheme;
+      document.body.dataset.jpThemeLight = String(
+        manager.isLight(currentTheme)
+      );
+      document.body.dataset.jpThemeName = currentTheme;
       if (
-        app.shell.dataset.themeScrollbars !==
+        document.body.dataset.jpThemeScrollbars !==
         String(manager.themeScrollbars(currentTheme))
       ) {
-        app.shell.dataset.themeScrollbars = String(
+        document.body.dataset.jpThemeScrollbars = String(
           manager.themeScrollbars(currentTheme)
         );
       }

packages/notebook/style/status.css

@@ -7,11 +7,11 @@
  * icons for light themes
  */
 
-[data-theme-light='true'] .jp-StatusItem-untrusted {
+[data-jp-theme-light='true'] .jp-StatusItem-untrusted {
   background-image: url('./not-trusted-icon-light.svg');
 }
 
-[data-theme-light='true'] .jp-StatusItem-trusted {
+[data-jp-theme-light='true'] .jp-StatusItem-trusted {
   background-image: url('./trusted-icon-light.svg');
 }
 
@@ -19,10 +19,10 @@
  * icons for dark themes
  */
 
-[data-theme-light='false'] .jp-StatusItem-untrusted {
+[data-jp-theme-light='false'] .jp-StatusItem-untrusted {
   background-image: url('./not-trusted-icon-dark.svg');
 }
 
-[data-theme-light='false'] .jp-StatusItem-trusted {
+[data-jp-theme-light='false'] .jp-StatusItem-trusted {
   background-image: url('./trusted-icon-dark.svg');
 }

packages/rendermime/style/base.css

@@ -418,16 +418,16 @@
 }
 
 /* Change color behind transparent images if they need it... */
-[data-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
+[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
   background-color: var(--jp-inverse-layout-color1);
 }
-[data-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
+[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
   background-color: var(--jp-inverse-layout-color1);
 }
 /* ...or leave it untouched if they don't */
-[data-theme-light='false'] .jp-RenderedImage img.jp-needs-dark-background {
+[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-dark-background {
 }
-[data-theme-light='true'] .jp-RenderedImage img.jp-needs-light-background {
+[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-light-background {
 }
 
 .jp-RenderedHTMLCommon img,

packages/statusbar/style/base.css

@@ -11,11 +11,11 @@
  * icons for light themes
  */
 
-[data-theme-light='true'] .jp-StatusItem-kernel {
+[data-jp-theme-light='true'] .jp-StatusItem-kernel {
   background-image: url('./kernel-icon-light.svg');
 }
 
-[data-theme-light='true'] .jp-StatusItem-terminal {
+[data-jp-theme-light='true'] .jp-StatusItem-terminal {
   background-image: url('./terminal-icon-light.svg');
 }
 
@@ -23,10 +23,10 @@
  * icons for dark themes
  */
 
-[data-theme-light='false'] .jp-StatusItem-kernel {
+[data-jp-theme-light='false'] .jp-StatusItem-kernel {
   background-image: url('./kernel-icon-dark.svg');
 }
 
-[data-theme-light='false'] .jp-StatusItem-terminal {
+[data-jp-theme-light='false'] .jp-StatusItem-terminal {
   background-image: url('./terminal-icon-dark.svg');
 }