feat(ui): create standard dialog with header and footer to use across shader code dialogs, screenshot, and future dialogs

src/layer/annotation/index.ts

@@ -39,7 +39,6 @@ import {
 } from "#src/layer/index.js";
 import type { LoadedDataSubsource } from "#src/layer/layer_data_source.js";
 import { SegmentationUserLayer } from "#src/layer/segmentation/index.js";
-import { Overlay } from "#src/overlay.js";
 import { getWatchableRenderLayerTransform } from "#src/render_coordinate_transform.js";
 import { RenderLayerRole } from "#src/renderlayer.js";
 import type { SegmentationDisplayState } from "#src/segmentation_display_state/frontend.js";
@@ -743,16 +742,6 @@ function makeShaderCodeWidget(layer: AnnotationUserLayer) {
   });
 }
 
-class ShaderCodeOverlay extends Overlay {
-  codeWidget: ShaderCodeWidget;
-  constructor(public layer: AnnotationUserLayer) {
-    super();
-    this.codeWidget = this.registerDisposer(makeShaderCodeWidget(this.layer));
-    this.content.appendChild(this.codeWidget.element);
-    this.codeWidget.textEditor.refresh();
-  }
-}
-
 class RenderingOptionsTab extends Tab {
   codeWidget: ShaderCodeWidget;
   constructor(public layer: AnnotationUserLayer) {
@@ -806,13 +795,13 @@ class RenderingOptionsTab extends Tab {
     element.appendChild(
       makeShaderCodeWidgetTopRow(
         this.layer,
-        this.codeWidget,
-        ShaderCodeOverlay,
+        this.codeWidget.element,
+        makeShaderCodeWidget,
         {
-          title: "Documentation on image layer rendering",
+          title: "Documentation on annotation layer rendering",
           href: "https://github.com/google/neuroglancer/blob/master/src/annotation/rendering.md",
+          type: "Annotation",
         },
-        "neuroglancer-annotation-dropdown-shader-top-row",
       ),
     );
 

src/layer/annotation/style.css

@@ -24,12 +24,6 @@
   flex-shrink: 0;
 }
 
-.neuroglancer-annotation-dropdown-shader-top-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
 .neuroglancer-annotation-shader-property-list {
   max-height: 8em;
   overflow: auto;

src/layer/image/index.ts

@@ -34,7 +34,6 @@ import {
   UserLayer,
 } from "#src/layer/index.js";
 import type { LoadedDataSubsource } from "#src/layer/layer_data_source.js";
-import { Overlay } from "#src/overlay.js";
 import { getChannelSpace } from "#src/render_coordinate_transform.js";
 import {
   RenderScaleHistogram,
@@ -544,13 +543,13 @@ class RenderingOptionsTab extends Tab {
     element.appendChild(
       makeShaderCodeWidgetTopRow(
         this.layer,
-        this.codeWidget,
-        ShaderCodeOverlay,
+        this.codeWidget.element,
+        makeShaderCodeWidget,
         {
           title: "Documentation on image layer rendering",
           href: "https://github.com/google/neuroglancer/blob/master/src/sliceview/image_layer_rendering.md",
+          type: "Image",
         },
-        "neuroglancer-image-dropdown-top-row",
       ),
     );
     element.appendChild(
@@ -576,17 +575,6 @@ class RenderingOptionsTab extends Tab {
   }
 }
 
-class ShaderCodeOverlay extends Overlay {
-  codeWidget: ShaderCodeWidget;
-  constructor(public layer: ImageUserLayer) {
-    super();
-    this.codeWidget = this.registerDisposer(makeShaderCodeWidget(this.layer));
-    this.content.classList.add("neuroglancer-image-layer-shader-overlay");
-    this.content.appendChild(this.codeWidget.element);
-    this.codeWidget.textEditor.refresh();
-  }
-}
-
 registerLayerType(ImageUserLayer);
 registerVolumeLayerType(VolumeType.IMAGE, ImageUserLayer);
 // Use ImageUserLayer as a fallback layer type if there is a `volume` subsource.

src/layer/image/style.css

@@ -27,17 +27,6 @@
   border: 1px solid transparent;
 }
 
-.neuroglancer-image-dropdown-top-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.neuroglancer-image-layer-shader-overlay .neuroglancer-shader-code-widget {
-  width: 80vw;
-  height: 80vh;
-}
-
 .neuroglancer-selection-details-value-grid {
   display: grid;
   grid-auto-rows: auto;

src/layer/segmentation/style.css

@@ -24,18 +24,6 @@
   height: 6em;
 }
 
-.neuroglancer-segmentation-dropdown-skeleton-shader-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.neuroglancer-segmentation-layer-skeleton-shader-overlay
-  .neuroglancer-shader-code-widget {
-  width: 80vw;
-  height: 80vh;
-}
-
 .neuroglancer-segment-list-entry {
   display: flex;
   flex-direction: row;

src/layer/single_mesh/index.ts

@@ -23,7 +23,6 @@ import {
   UserLayer,
 } from "#src/layer/index.js";
 import type { LoadedDataSubsource } from "#src/layer/layer_data_source.js";
-import { Overlay } from "#src/overlay.js";
 import type { VertexAttributeInfo } from "#src/single_mesh/base.js";
 import {
   getShaderAttributeType,
@@ -139,7 +138,7 @@ function makeShaderCodeWidget(layer: SingleMeshUserLayer) {
   });
 }
 
-class VertexAttributeWidget extends RefCounted {
+export class VertexAttributeWidget extends RefCounted {
   element = document.createElement("div");
   constructor(
     public attributes: WatchableValueInterface<
@@ -215,13 +214,13 @@ class DisplayOptionsTab extends Tab {
     element.appendChild(
       makeShaderCodeWidgetTopRow(
         this.layer,
-        this.codeWidget,
-        ShaderCodeOverlay,
+        this.codeWidget.element,
+        makeShaderCodeWidget,
         {
-          title: "Documentation on image layer rendering",
+          title: "Documentation on mesh rendering",
           href: "https://github.com/google/neuroglancer/blob/master/src/sliceview/image_layer_rendering.md",
+          type: "Mesh",
         },
-        "neuroglancer-single-mesh-dropdown-top-row",
       ),
     );
     element.appendChild(this.attributeWidget.element);
@@ -239,22 +238,6 @@ class DisplayOptionsTab extends Tab {
   }
 }
 
-class ShaderCodeOverlay extends Overlay {
-  attributeWidget: VertexAttributeWidget;
-  codeWidget: ShaderCodeWidget;
-  constructor(public layer: SingleMeshUserLayer) {
-    super();
-    this.attributeWidget = this.registerDisposer(
-      makeVertexAttributeWidget(layer),
-    );
-    this.codeWidget = this.registerDisposer(makeShaderCodeWidget(layer));
-    this.content.classList.add("neuroglancer-single-mesh-layer-shader-overlay");
-    this.content.appendChild(this.attributeWidget.element);
-    this.content.appendChild(this.codeWidget.element);
-    this.codeWidget.textEditor.refresh();
-  }
-}
-
 registerLayerType(SingleMeshUserLayer);
 registerLayerTypeDetector((subsource) => {
   if (subsource.singleMesh !== undefined) {

src/layer/single_mesh/style.css

@@ -21,19 +21,6 @@
 
 .neuroglancer-single-mesh-dropdown .neuroglancer-shader-code-widget {
   height: 6em;
-  width: 60ch;
-  border: 1px solid transparent;
-}
-
-.neuroglancer-single-mesh-dropdown-top-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.neuroglancer-single-mesh-shader-overlay .neuroglancer-shader-code-widget {
-  width: 80vw;
-  height: 80vh;
 }
 
 .neuroglancer-single-mesh-attribute-widget {
@@ -43,11 +30,6 @@
   grid-template-columns: [type] auto [name] auto [range] auto;
 }
 
-.neuroglancer-single-mesh-layer-shader-overlay
-  .neuroglancer-single-mesh-attribute-widget {
-  max-height: 20vh;
-}
-
 .neuroglancer-single-mesh-attribute {
   font-family: monospace;
   display: contents;

src/overlay.css

@@ -14,23 +14,78 @@
  * limitations under the License.
  */
 
-.overlay {
+.neuroglancer-overlay {
   height: 100%;
   width: 100%;
   position: fixed;
-  z-index: 99;
+  z-index: 100;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-.overlay-content {
+.neuroglancer-overlay-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
   z-index: 100;
   color: black;
-  padding: 1em;
+}
+
+.neuroglancer-framed-dialog:focus-visible {
+  outline: none;
+}
+
+.neuroglancer-framed-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.5rem;
+  border-bottom: 1px solid #ccc;
+  height: 2rem;
+  margin-bottom: 1px;
+}
+
+.neuroglancer-framed-dialog-body {
+  display: flex;
+  padding: 0 1.5rem;
+  overflow: auto;
+}
+
+.neuroglancer-framed-dialog-title {
+  margin-right: auto;
+  font-size: large;
+  font-weight: bold;
+  color: #333;
+}
+
+.neuroglancer-framed-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #ccc;
+  margin-top: 1px;
+}
+
+.neuroglancer-framed-dialog-primary-button {
+  margin-left: auto;
+}
+
+.neuroglancer-framed-dialog-close-icon {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.neuroglancer-framed-dialog-close-icon svg {
+  stroke: #141415;
+  opacity: 0.6;
+}
+
+.neuroglancer-framed-dialog-close-icon:hover svg {
+  stroke: white;
+  opacity: 1;
 }