@jupyterlab/debugger 4.0.0-alpha.8 → 4.0.0-beta.0

package/style/breakpoints.css

@@ -55,25 +55,34 @@
   margin-left: auto;
 }
 
-[data-jp-debugger='true'] .CodeMirror-gutter-wrapper::after {
+[data-jp-debugger='true'] .cm-breakpoint-gutter .cm-gutterElement:empty::after {
   content: '●';
   color: var(--jp-error-color1);
   opacity: 0;
-  position: absolute;
-  left: 3px;
-  top: -1px;
 }
 
-[data-jp-debugger='true'].jp-Editor .CodeMirror-gutter-wrapper:hover::after,
+.cm-gutter {
+  cursor: default;
+}
+
+.cm-breakpoint-gutter .cm-gutterElement {
+  color: var(--jp-error-color1);
+  padding-left: 5px;
+  font-size: 20px;
+  position: relative;
+  top: -5px;
+}
+
+[data-jp-debugger='true'].jp-Editor
+  .cm-breakpoint-gutter
+  .cm-gutterElement:empty:hover::after,
 [data-jp-debugger='true']
   .jp-Notebook
   .jp-CodeCell.jp-mod-selected
-  .CodeMirror-gutter-wrapper:hover::after,
-[data-jp-debugger='true'] .jp-Editor .CodeMirror-gutter-wrapper:hover::after {
-  opacity: 0.5;
-}
-
-[data-jp-debugger='true'].jp-DebuggerEditors
-  .CodeMirror-gutter-wrapper:hover::after {
+  .cm-breakpoint-gutter:empty:hover::after,
+[data-jp-debugger='true']
+  .jp-Editor
+  .cm-breakpoint-gutter
+  .cm-gutterElement:empty:hover::after {
   opacity: 0.5;
 }

package/style/icons/exceptions.svg

@@ -0,0 +1,10 @@
+<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g class="jp-icon3" fill="#616161" transform="matrix(1.1999396,0,0,1.3858273,-2.3726971,-4.6347192)">
+    <path
+      d="M 12.023438,0.30859375 11.158203,1.8085937 -1.2382812,23.285156 l 26.5292972,-0.002 z m 0.002,3.99999995 9.800781,16.9746093 -19.6015626,0.002 z"
+      transform="matrix(0.72509832,0,0,0.7247701,3.2918397,3.480876)"
+    />
+    <path d="m 11.144475,9.117095 h 1.666751 v 7.215906 h -1.666751 z" />
+    <path d="m 11.144475,17.054592 h 1.666751 v 1.443181 h -1.666751 z" />
+  </g>
+</svg>

package/style/index.css

@@ -8,10 +8,10 @@
 @import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/codeeditor/style/index.css');
-@import url('~@jupyterlab/codemirror/style/index.css');
 @import url('~@jupyterlab/rendermime/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
+@import url('~@jupyterlab/codemirror/style/index.css');
 @import url('~@jupyterlab/cells/style/index.css');
 @import url('~@jupyterlab/console/style/index.css');
 @import url('~@jupyterlab/fileeditor/style/index.css');

package/style/index.js

@@ -8,10 +8,10 @@ import '@lumino/widgets/style/index.js';
 import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/codeeditor/style/index.js';
-import '@jupyterlab/codemirror/style/index.js';
 import '@jupyterlab/rendermime/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
 import '@jupyterlab/application/style/index.js';
+import '@jupyterlab/codemirror/style/index.js';
 import '@jupyterlab/cells/style/index.js';
 import '@jupyterlab/console/style/index.js';
 import '@jupyterlab/fileeditor/style/index.js';

package/style/kernelSources.css

@@ -35,6 +35,9 @@
   padding: 0;
   flex: 0 0 auto;
   margin: 0;
+  position: sticky;
+  top: 0;
+  background-color: var(--jp-layout-color1);
 }
 
 .jp-DebuggerKernelSource-filterBox-hidden {

package/style/variables.css

@@ -2,7 +2,6 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-
 .jp-DebuggerVariables {
   display: flex;
   flex-direction: column;
@@ -16,57 +15,96 @@
   flex: 1 1 auto;
   min-height: 24px;
   overflow: auto;
+
+  /* For absolute positioning of jp-DebuggerVariables-buttons. */
+  position: relative;
 }
 
-.jp-DebuggerVariables-body ul {
+.jp-DebuggerVariables-branch {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.jp-DebuggerVariables-body > ul {
+.jp-DebuggerVariables-body
+  .jp-DebuggerVariables-branch
+  .jp-DebuggerVariables-branch {
+  grid-area: nested;
+}
+
+.jp-DebuggerVariables-body > .jp-DebuggerVariables-branch {
   padding-top: 0.1em;
 }
 
-.jp-DebuggerVariables-body ul li {
-  padding: 5px 0 0;
+.jp-DebuggerVariables-branch li {
+  padding: 3px 0;
   cursor: pointer;
   color: var(--jp-content-font-color1);
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template:
+    'collapser name detail'
+    'nested nested nested';
+  grid-template-columns: max-content max-content 1fr;
 }
 
-.jp-DebuggerVariables-body ul li:hover .jp-DebuggerVariables-renderVariable {
-  display: block;
+.jp-DebuggerVariables-branch li:not(:has(li:hover)):hover {
+  background: var(--jp-layout-color2);
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-hspacer {
-  flex: 1 1 auto;
+.jp-DebuggerVariables-collapser {
+  width: 16px;
+  grid-area: collapser;
+  transform: rotate(-90deg);
+  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-renderVariable {
-  flex: 0 0 auto;
+.jp-DebuggerVariables-collapser.jp-mod-expanded {
+  transform: rotate(0);
+}
+
+.jp-DebuggerVariables-buttons {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  margin-top: 1px;
+}
+
+.jp-DebuggerVariables-name {
+  color: var(--jp-mirror-editor-attribute-color);
+  grid-area: name;
+}
+
+.jp-DebuggerVariables-name::after {
+  content: ':';
+  margin-right: 5px;
+}
+
+.jp-DebuggerVariables-detail {
+  /* detail contains value for primitive types or name of the type otherwise */
+  color: var(--jp-mirror-editor-string-color);
+}
+
+.jp-DebuggerVariables-renderVariable {
   border: none;
   background: none;
   cursor: pointer;
-  display: none;
-  padding: 0 8px;
+  transform-origin: center center;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-renderVariable:active {
-  transform: scale(1.272) translateX(-4px);
-  overflow: hidden;
+.jp-DebuggerVariables-renderVariable:active {
+  transform: scale(1.35);
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-renderVariable:hover {
+.jp-DebuggerVariables-renderVariable:hover {
   background-color: var(--jp-layout-color2);
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-renderVariable:disabled {
+.jp-DebuggerVariables-renderVariable:disabled {
   cursor: default;
 }
 
-.jp-DebuggerVariables-body ul li > ul {
+.jp-DebuggerVariables-branch li > .jp-DebuggerVariables-branch {
   margin-left: 12px;
 }
 
@@ -115,6 +153,15 @@
   color: var(--jp-content-font-color0);
 }
 
+.jp-VariableRendererPanel {
+  overflow: auto;
+}
+
+.jp-VariableRendererPanel-renderer {
+  overflow: auto;
+  height: 100%;
+}
+
 .jp-VariableRenderer-TrustButton[aria-pressed='true'] {
   box-shadow: inset 0 var(--jp-border-width) 4px
     rgba(