@jupyterlab/debugger 4.0.0-alpha.2 → 4.0.0-alpha.20

package/style/base.css

@@ -6,6 +6,7 @@
 @import './callstack.css';
 @import './editor.css';
 @import './icons.css';
+@import './kernelSources.css';
 @import './sidebar.css';
 @import './sources.css';
 @import './variables.css';
@@ -17,7 +18,7 @@
 }
 
 #jp-debugger .jp-switch-label {
-  margin-right: 0px;
+  margin-right: 0;
 }
 
 .jp-DebuggerBugButton[aria-pressed='true'] path {

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/arrow-collapse.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>

package/style/icons/arrow-expand.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>

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/icons/open-kernel-source.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g class="jp-icon3" fill="#616161">
+        <path d="M5 2H15L20 7V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V14H4V16L8 13L4 10V12H3V4C3 3.46957 3.21071 2.96086 3.58579 2.58579C3.96086 2.21071 4.46957 2 5 2ZM12 18H16V16H12V18ZM12 14H18V12H12V14ZM12 10H18V8H12V10ZM10 14C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12C9.44771 12 9 12.4477 9 13C9 13.5523 9.44771 14 10 14Z"/>
+        <path d="M3 12V14H1V13V12H3Z"/>
+    </g>
+</svg>

package/style/icons/pause.svg

@@ -0,0 +1,6 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <g class="jp-icon3" fill="#616161">
+        <path d="m 7,6 h 4 V 18 H 7 Z" />
+        <path d="m 13,6 h 4 v 12 h -4 z" />
+    </g>
+</svg>

package/style/icons.css

@@ -12,16 +12,17 @@ button.jp-Button.jp-mod-minimal.jp-TreeView.jp-TableView {
   width: 35px;
 }
 
-button.jp-Button.jp-mod-minimal.jp-TreeView:hover {
-  cursor: pointer;
-  background-color: var(--jp-layout-color1);
+.jp-ViewModeSelected .jp-Button,
+.jp-PauseOnExceptions.lm-mod-toggled {
+  background-color: var(--jp-inverse-layout-color3);
 }
 
-button.jp-Button.jp-mod-minimal.jp-TableView:hover {
-  cursor: pointer;
-  background-color: var(--jp-layout-color1);
+.jp-ViewModeSelected .jp-Button:hover,
+.jp-PauseOnExceptions.lm-mod-toggled:hover {
+  background-color: var(--jp-inverse-layout-color4);
 }
 
-.jp-ViewModeSelected {
-  background-color: var(--jp-layout-color1);
+.jp-ViewModeSelected .jp-Button .jp-icon3[fill],
+.jp-PauseOnExceptions.lm-mod-toggled .jp-icon3[fill] {
+  fill: var(--jp-layout-color1);
 }

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

@@ -0,0 +1,45 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-DebuggerKernelSources {
+  min-height: 50px;
+  margin-top: 3px;
+}
+
+[data-jp-debugger='true'].jp-Editor .jp-mod-readOnly {
+  background: var(--jp-layout-color2);
+  height: 100%;
+}
+
+.jp-DebuggerKernelSources-body [data-jp-debugger='true'].jp-Editor {
+  height: 100%;
+}
+
+.jp-DebuggerKernelSources-body {
+  height: 100%;
+  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;
+  margin: 0;
+  position: sticky;
+  top: 0;
+  background-color: var(--jp-layout-color1);
+}
+
+.jp-DebuggerKernelSource-filterBox-hidden {
+  display: none;
+}

package/style/sidebar.css

@@ -7,6 +7,6 @@
   /* Set font-size to override default h2 sizing but keeping default --jp-ui-font-size0 */
   font-size: 100%;
   font-weight: 600;
-  margin: 0px auto 0px 0px;
+  margin: 0 auto 0 0;
   padding: 4px 10px;
 }

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 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-collapser.jp-mod-expanded {
+  transform: rotate(0);
+}
+
+.jp-DebuggerVariables-buttons {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  margin-top: 1px;
 }
 
-.jp-DebuggerVariables-body .jp-DebuggerVariables-renderVariable {
-  flex: 0 0 auto;
+.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: 0px 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;
 }
 
@@ -114,3 +152,26 @@
 .jp-DebuggerVariables-colorPalette .jp-mod-text {
   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(
+      var(--jp-shadow-base-lightness),
+      var(--jp-shadow-base-lightness),
+      var(--jp-shadow-base-lightness),
+      0.6
+    );
+}
+
+.jp-DebuggerRichVariable div[data-mime-type='text/plain'] > pre {
+  white-space: normal;
+}