Enforce a minimal set of CSS selector complexity rules (#14238)

* Disallow more than one bare HTML tag * Remove dangling tab-manager references these should have been removed in #8886 * Remove dialog button rule with complex selector which has no effect * Remove stray style which should have been removed with #6653 * Remove one more dangling tab-manager style * Enable `selector-max-class` stylelint rule * Enable `selector-max-compound-selectors` stylelint rule * Enable selector-max-universal: 1 to prevent very bad CSS (while still allowing somewhat bad CSS for now). * Make use of `stylelint-disable-next-line` where practical
jupyterlab · Mar 31, 2023 · a4aa5eb · a4aa5eb
1 parent eca5b1d
commit a4aa5eb
Show file tree

Hide file tree

Showing 24 changed files with 68 additions and 130 deletions.
diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
@@ -30,3 +30,14 @@ rules:
   selector-pseudo-class-no-unknown: null
   selector-pseudo-element-no-unknown: null
   selector-not-notation: null
+  # disallow use of more than one bare HTML tag like `div span` to avoid performance regression,
+  # while allowing compounded HTML tags like `button.jp-Button`
+  selector-max-type:
+    - 1
+    - ignore: "compounded"
+  # matching complex selectors is expensive
+  selector-max-class: 4
+  # TODO: decrease max-compound to 3
+  selector-max-compound-selectors: 4
+  # TODO: decrease to 0
+  selector-max-universal: 1
diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css
@@ -3,6 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 
+/* stylelint-disable selector-max-type */
+
 /* Navbar at the top */
 .jupyter-nav-logo {
   padding: 0;

diff --git a/galata/src/galata.ts b/galata/src/galata.ts
@@ -62,7 +62,6 @@ export namespace galata {
   export type DefaultSidebarTabId =
     | 'filebrowser'
     | 'jp-running-sessions'
-    | 'tab-manager'
     | 'jp-property-inspector'
     | 'table-of-contents'
     | 'extensionmanager.main-view'

diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css
@@ -69,6 +69,7 @@
   box-shadow: var(--jp-elevation-z6);
 }
 
+/* stylelint-disable-next-line selector-max-class */
 .jp-LabShell[data-shell-mode='single-document']
   .lm-MenuBar.lm-mod-active
   .lm-MenuBar-item.lm-mod-active {

diff --git a/packages/application/style/sidepanel.css b/packages/application/style/sidepanel.css
@@ -100,6 +100,8 @@
 
 /* Borders */
 
+/* stylelint-disable selector-max-class */
+
 .jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab {
   border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
@@ -189,6 +191,8 @@
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
+/* stylelint-enable selector-max-class */
+
 /* Stack panels */
 
 #jp-left-stack > .lm-Widget,

diff --git a/packages/application/style/tabs.css b/packages/application/style/tabs.css
@@ -129,6 +129,8 @@
   margin-top: 0;
 }
 
+/* stylelint-disable selector-max-class */
+
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab.lm-mod-current,
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab.lm-mod-current {
   min-width: 80px;
@@ -149,6 +151,8 @@
   margin-right: 4px;
 }
 
+/* stylelint-enable selector-max-class */
+
 .lm-TabBar-tab.lm-mod-drag-image {
   background: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);

diff --git a/packages/debugger/src/panels/sources/sourcepath.tsx b/packages/debugger/src/panels/sources/sourcepath.tsx
@@ -19,7 +19,10 @@ export const SourcePathComponent = ({
   return (
     <UseSignal signal={model.currentSourceChanged} initialSender={model}>
       {(model): JSX.Element => (
-        <span onClick={(): void => model?.open()}>
+        <span
+          onClick={(): void => model?.open()}
+          className="jp-DebuggerSources-header-path"
+        >
           {model?.currentSource?.path ?? ''}
         </span>
       )}

diff --git a/packages/debugger/style/callstack.css b/packages/debugger/style/callstack.css
@@ -23,12 +23,12 @@
   font-size: var(--jp-ui-font-size1);
 }
 
-.jp-DebuggerCallstack-body ul li {
+.jp-DebuggerCallstack-body li {
   padding: 5px;
   padding-left: 8px;
 }
 
-.jp-DebuggerCallstack-body ul li.selected {
+.jp-DebuggerCallstack-body li.selected {
   color: white;
   background: var(--jp-brand-color1);
 }

diff --git a/packages/debugger/style/kernelSources.css b/packages/debugger/style/kernelSources.css
@@ -22,15 +22,6 @@
   overflow-y: auto;
 }
 
-.jp-DebuggerKernelSources-header > div > span {
-  overflow: hidden;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--jp-ui-font-size0);
-  color: var(--jp-ui-font-color1);
-}
-
 .jp-DebuggerKernelSource-filterBox {
   padding: 0;
   flex: 0 0 auto;

diff --git a/packages/debugger/style/sources.css b/packages/debugger/style/sources.css
@@ -21,7 +21,7 @@
   height: 100%;
 }
 
-.jp-DebuggerSources-header > div > span {
+.jp-DebuggerSources-header-path {
   overflow: hidden;
   cursor: pointer;
   text-overflow: ellipsis;

diff --git a/packages/extensionmanager/src/widget.tsx b/packages/extensionmanager/src/widget.tsx
@@ -257,15 +257,14 @@ function ListView(props: ListView.IProperties): React.ReactElement<any> {
             previousLabel={'<'}
             nextLabel={'>'}
             breakLabel="..."
-            breakClassName={'break-me'}
+            breakClassName={'break'}
             initialPage={(props.initialPage ?? 1) - 1}
             pageCount={props.numPages}
             marginPagesDisplayed={2}
             pageRangeDisplayed={3}
             onPageChange={(data: { selected: number }) =>
               props.onPage(data.selected + 1)
             }
-            containerClassName={'pagination'}
             activeClassName={'active'}
           />
         </div>

diff --git a/packages/extensionmanager/style/base.css b/packages/extensionmanager/style/base.css
@@ -105,25 +105,27 @@
   padding-right: 0;
 }
 
-.jp-extensionmanager-view .pagination li {
+.jp-extensionmanager-pagination li {
   display: inline-block;
 }
 
-.jp-extensionmanager-view .pagination li a {
+/* stylelint-disable selector-max-type */
+.jp-extensionmanager-pagination li > a {
   padding: 0 5px;
+  cursor: pointer;
 }
+/* stylelint-enable selector-max-type */
 
-.jp-extensionmanager-view .pagination li.active a {
+.jp-extensionmanager-pagination li.active > a {
   background: var(--jp-brand-color1);
-  color: #fff;
+  color: var(--jp-layout-color1);
 }
 
-.jp-extensionmanager-view .pagination li a:hover {
+.jp-extensionmanager-pagination li > a:hover {
   background-color: var(--jp-layout-color2);
-  color: unset;
 }
 
-.jp-extensionmanager-view .pagination .break a {
+.jp-extensionmanager-pagination .break > a {
   cursor: default;
 }
 

diff --git a/packages/help-extension/src/licenses.tsx b/packages/help-extension/src/licenses.tsx
@@ -17,6 +17,8 @@ import { h, VirtualElement } from '@lumino/virtualdom';
 import { Panel, SplitPanel, TabBar, Widget } from '@lumino/widgets';
 import * as React from 'react';
 
+const FILTER_SECTION_TITLE_CLASS = 'jp-Licenses-Filters-title';
+
 /**
  * A license viewer
  */
@@ -511,7 +513,9 @@ export namespace Licenses {
       return (
         <div>
           <label>
-            <strong>{trans.__('Filter Licenses By')}</strong>
+            <strong className={FILTER_SECTION_TITLE_CLASS}>
+              {trans.__('Filter Licenses By')}
+            </strong>
           </label>
           <ul>
             <li>
@@ -528,7 +532,9 @@ export namespace Licenses {
             </li>
           </ul>
           <label>
-            <strong>{trans.__('Distributions')}</strong>
+            <strong className={FILTER_SECTION_TITLE_CLASS}>
+              {trans.__('Distributions')}
+            </strong>
           </label>
         </div>
       );

diff --git a/packages/help-extension/style/base.css b/packages/help-extension/style/base.css
@@ -40,13 +40,6 @@
   line-height: 1.12;
 }
 
-.jp-Dialog
-  .jp-Dialog-content
-  .jp-Dialog-footer
-  .jp-Dialog-button.jp-About-button {
-  margin-right: 0;
-}
-
 .jp-About-version {
   display: block;
   padding-top: 8px;
@@ -114,7 +107,7 @@
   display: block;
 }
 
-.jp-Licenses-Filters label strong {
+.jp-Licenses-Filters-title {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -209,7 +202,7 @@
   text-align: left;
 }
 
-.jp-Licenses-Grid table td:nth-child(1) {
+.jp-Licenses-Grid td:nth-child(1) {
   max-width: calc(2 * var(--jp-ui-font-size1));
 }
 
@@ -221,7 +214,7 @@
   background-color: transparent;
 }
 
-.jp-Licenses-Grid table tr.jp-mod-selected {
+.jp-Licenses-Grid tr.jp-mod-selected {
   background-color: var(--jp-brand-color1);
   color: #fff;
 }

diff --git a/packages/logconsole-extension/style/base.css b/packages/logconsole-extension/style/base.css
@@ -26,10 +26,9 @@
   background-color: var(--jp-brand-color1);
 }
 
-/* Need to be very specific to override the typestyle styles on status bar components */
+/* Override semi-transparent white with opaque white for higher contrast */
 .jp-LogConsoleStatusItem.jp-mod-selected,
-.jp-LogConsoleStatusItem.jp-mod-selected div,
-.jp-LogConsoleStatusItem.jp-mod-selected div span {
+.jp-LogConsoleStatusItem.jp-mod-selected .jp-StatusBar-TextItem {
   color: white;
 }
 

diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css
@@ -28,6 +28,8 @@
 | Notebook
 |----------------------------------------------------------------------------*/
 
+/* stylelint-disable selector-max-class */
+
 .jp-NotebookPanel {
   display: block;
   height: 100%;

diff --git a/packages/rendermime/style/base.css b/packages/rendermime/style/base.css
@@ -329,6 +329,8 @@
 
 /* Lists */
 
+/* stylelint-disable selector-max-type, selector-max-compound-selectors */
+
 .jp-RenderedHTMLCommon ul:not(.list-inline),
 .jp-RenderedHTMLCommon ol:not(.list-inline) {
   padding-left: 2em;
@@ -378,6 +380,8 @@
   margin-bottom: 0;
 }
 
+/* stylelint-enable selector-max-type, selector-max-compound-selectors */
+
 .jp-RenderedHTMLCommon hr {
   color: var(--jp-border-color2);
   background-color: var(--jp-border-color1);

diff --git a/packages/settingeditor/style/base.css b/packages/settingeditor/style/base.css
@@ -125,19 +125,6 @@
   background-color: var(--jp-error-color0);
 }
 
-.jp-PluginList button.jp-mod-selected.jp-ErrorPlugin span {
-  color: var(--jp-error-color0);
-}
-
-.jp-PluginList button.jp-mod-selected span {
-  font-weight: var(--jp-content-heading-font-weight);
-  color: var(--jp-brand-color1);
-}
-
-.jp-FormComponent li span {
-  overflow: hidden;
-}
-
 .jp-SettingEditor-header {
   font-size: var(--jp-content-font-size4);
   font-weight: var(--jp-content-heading-font-weight);
@@ -150,10 +137,6 @@
   background-color: var(--jp-layout-color0);
 }
 
-ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
-  background-image: var(--jp-icon-file-selected);
-}
-
 .jp-PluginList-icon {
   display: flex;
   height: 20px;
@@ -178,19 +161,6 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   align-items: center;
 }
 
-.jp-ToolbarButtonComponent-label
-  .jp-SettingsRawEditor.jp-mod-error
-  .jp-Toolbar-item.jp-BugIcon::after {
-  color: red;
-  content: '\25CF'; /* Unicode circle character (error dot) */
-  font-size: 7px;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 4px;
-  left: 6px;
-}
-
 .jp-SettingsRawEditor .jp-Inspector {
   border-top: 2px solid var(--jp-layout-color2);
   min-height: var(--jp-private-settingeditor-debug-height);

diff --git a/packages/toc/style/base.css b/packages/toc/style/base.css
@@ -45,6 +45,7 @@
   list-style-type: none;
 }
 
+/* stylelint-disable-next-line selector-max-type */
 .jp-TableOfContents li > ol {
   /* Align left border with triangle icon center */
   padding-left: 11px;

diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts
@@ -264,10 +264,6 @@ export namespace LabIconStyle {
         $nest: {
           '.lm-DockPanel-tabBar &': {
             marginRight: '4px'
-          },
-          '#tab-manager &': {
-            marginRight: '2px',
-            position: 'relative'
           }
         }
       },
@@ -276,10 +272,6 @@ export namespace LabIconStyle {
           '.lm-DockPanel-tabBar &': {
             height: '14px',
             width: '14px'
-          },
-          '#tab-manager &': {
-            height: '16px',
-            width: '16px'
           }
         }
       },

diff --git a/packages/ui-components/style/base.css b/packages/ui-components/style/base.css
@@ -179,6 +179,7 @@ input::placeholder {
 }
 
 /* Use our own theme for hover and option styles */
+/* stylelint-disable-next-line selector-max-type */
 .jp-HTMLSelect.jp-DefaultStyle select:hover,
 .jp-HTMLSelect.jp-DefaultStyle select > option {
   background-color: var(--jp-layout-color2);