Add a custom backend for Kernel.dbg/2

.github/workflows/test.yaml

@@ -12,8 +12,8 @@ jobs:
       matrix:
         include:
           - pair:
-              elixir: 1.13.0
-              otp: 24.0
+              elixir: "1.14.0-rc.0"
+              otp: "25.0"
             lint: true
     steps:
       - uses: actions/checkout@v2

lib/assets/data_table/main.css

@@ -4,7 +4,7 @@ html {
 
 .app {
   font-family: "JetBrains Mono", monospace;
-  padding: 0px 12px 12px 12px;
+  padding: 12px;
 
   --gray-50: #f8fafc;
   --gray-100: #f0f5f9;

lib/assets/debug_default/main.css

@@ -0,0 +1,30 @@
+.app {
+  font-family: "JetBrains Mono", monospace;
+  color: var(--gray-700);
+
+  --gray-300: #cad5e0;
+  --gray-700: #304254;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+
+.headline .dbg {
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-right: 8px;
+  background-color: var(--gray-300);
+}
+
+.source {
+  font-size: 12px;
+  white-space: pre-wrap;
+}

lib/assets/debug_default/main.js

@@ -0,0 +1,50 @@
+import * as Vue from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.prod.js";
+
+export async function init(ctx, payload) {
+  ctx.importCSS("main.css");
+  ctx.importCSS(
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
+  );
+
+  const app = Vue.createApp({
+    template: `
+    <div class="app">
+      <div class="headline">
+        <span class="dbg">dbg:{{ dbgLine }}</span>
+        <span>{{ dbgInfo }}</span>
+      </div>
+      <div class="source">{{source}}</div>
+    </div>
+    `,
+
+    data() {
+      return {
+        dbgLine: payload.dbg_line,
+        dbgSameFile: payload.dbg_same_file,
+        callCount: payload.call_count,
+        source: payload.source,
+      };
+    },
+
+    computed: {
+      dbgInfo() {
+        const info = [
+          !this.dbgSameFile && "from another cell",
+          this.callCount > 1 && `showing first out of ${this.callCount} calls`,
+        ]
+          .filter((x) => x)
+          .join("; ");
+
+        if (info) {
+          return `(${info})`;
+        } else {
+          return null;
+        }
+      },
+    },
+  }).mount(ctx.root);
+
+  ctx.handleEvent("call_count_updated", ({ call_count }) => {
+    app.callCount = call_count;
+  });
+}

lib/assets/debug_pipeline/main.css

@@ -0,0 +1,216 @@
+.app {
+  font-family: "JetBrains Mono", monospace;
+  color: var(--gray-700);
+
+  --gray-50: #f8fafc;
+  --gray-100: #f0f5f9;
+  --gray-200: #e1e8f0;
+  --gray-300: #cad5e0;
+  --gray-400: #91a4b7;
+  --gray-500: #61758a;
+  --gray-600: #445668;
+  --gray-700: #304254;
+  --gray-800: #1c2a3a;
+  --gray-900: #0d1829;
+
+  --blue-600: #3e64ff;
+
+  --red-600: #db1920;
+
+  --yellow-bright-200: #fef08a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.headline {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.headline .dbg {
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-right: 8px;
+  background-color: var(--gray-300);
+}
+
+.output-label {
+  margin-top: 16px;
+  font-size: 12px;
+}
+
+.actions .copy-source {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.actions .copy-source .change-indicator {
+  margin-right: 4px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.actions .copy-source .change-indicator .dot {
+  margin-right: 8px;
+  position: relative;
+  display: inline-flex;
+  border-radius: 9999px;
+  height: 12px;
+  width: 12px;
+  background-color: var(--yellow-bright-200);
+}
+
+.actions .copy-source:hover .change-indicator,
+.actions .copy-source:hover .icon-button {
+  color: var(--gray-900);
+}
+
+.box {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  font-size: 14px;
+  border-top: 1px solid var(--gray-200);
+}
+
+.box.first {
+  border-top: 0;
+}
+
+.box .primary {
+  min-height: 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.box .primary .source {
+  white-space: pre-wrap;
+}
+
+.box .error {
+  margin-top: 16px;
+  white-space: pre-wrap;
+}
+
+.box:not(.selectable) {
+  color: var(--gray-400);
+}
+
+.box.selectable {
+  cursor: pointer;
+}
+
+.box.selected {
+  color: var(--blue-600);
+}
+
+.box.errored {
+  color: var(--red-600);
+}
+
+.box.disabled {
+  cursor: default;
+}
+
+.switch-button {
+  display: inline-block;
+  position: relative;
+  width: 56px;
+  height: 28px;
+  user-select: none;
+}
+
+.switch-button[disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.switch-button__checkbox {
+  outline: none;
+  appearance: none;
+  position: absolute;
+  display: block;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  border-radius: 9999px;
+  background-color: var(--gray-400);
+  border: 5px solid var(--gray-100);
+  cursor: pointer;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.switch-button__bg {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: 9999px;
+  background-color: var(--gray-100);
+  cursor: pointer;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.switch-button__checkbox:checked {
+  background: white;
+  border-color: var(--blue-600);
+  transform: translateX(100%);
+}
+
+.switch-button__checkbox:checked + .switch-button__bg {
+  background-color: var(--blue-600);
+}
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  color: var(--gray-500);
+  line-height: 1;
+}
+
+.icon-button:hover {
+  color: var(--gray-900);
+}
+
+.icon-button:focus {
+  outline: none;
+}
+
+.icon-button:disabled {
+  color: var(--gray-300);
+  cursor: default;
+}
+
+.ri {
+  font-size: 1.25rem;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+/* An override to keep the box shadow */
+.dndrop-container.vertical > .dndrop-draggable-wrapper {
+  overflow: visible;
+}