Rename "options/top bar" terminology to "control bar" and update comments

frontend/src/components/panels/Document.svelte

@@ -444,18 +444,18 @@
 </script>
 
 <LayoutCol class="document" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
-	<LayoutRow class="options-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
+	<LayoutRow class="control-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
 		{#if !$document.graphViewOverlayOpen}
 			<WidgetLayout layout={$document.documentModeLayout} />
 			<WidgetLayout layout={$document.toolOptionsLayout} />
 			<LayoutRow class="spacer" />
 			<WidgetLayout layout={$document.documentBarLayout} />
 		{:else}
-			<WidgetLayout layout={$document.nodeGraphBarLayout} />
+			<WidgetLayout layout={$document.nodeGraphControlBarLayout} />
 		{/if}
 	</LayoutRow>
 	<LayoutRow
-		class="shelf-and-table"
+		class="tool-shelf-and-viewport-area"
 		styles={toolShelfTotalToolsAndSeparators && {
 			"--total-separators": toolShelfTotalToolsAndSeparators.totalSeparators,
 			"--total-tool-rows-for-1-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor1Columns,
@@ -463,7 +463,7 @@
 			"--total-tool-rows-for-3-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor3Columns,
 		}}
 	>
-		<LayoutCol class="shelf">
+		<LayoutCol class="tool-shelf">
 			{#if !$document.graphViewOverlayOpen}
 				<LayoutCol class="tools" scrollableY={true}>
 					<WidgetLayout layout={$document.toolShelfLayout} />
@@ -471,24 +471,24 @@
 			{:else}
 				<LayoutRow class="spacer" />
 			{/if}
-			<LayoutCol class="shelf-bottom-widgets">
+			<LayoutCol class="tool-shelf-bottom-widgets">
 				<WidgetLayout class={"working-colors-input-area"} layout={$document.workingColorsLayout} />
 			</LayoutCol>
 		</LayoutCol>
-		<LayoutCol class="table">
+		<LayoutCol class="viewport-container">
 			{#if rulersVisible}
 				<LayoutRow class="ruler-or-scrollbar top-ruler">
 					<LayoutCol class="ruler-corner"></LayoutCol>
 					<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
 				</LayoutRow>
 			{/if}
-			<LayoutRow class="viewport-container">
+			<LayoutRow class="viewport-container-inner">
 				{#if rulersVisible}
 					<LayoutCol class="ruler-or-scrollbar">
 						<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
 					</LayoutCol>
 				{/if}
-				<LayoutCol class="viewport-container" styles={{ cursor: canvasCursor }}>
+				<LayoutCol class="viewport-container-inner" styles={{ cursor: canvasCursor }}>
 					{#if cursorEyedropper}
 						<EyedropperPreview
 							colorChoice={cursorEyedropperPreviewColorChoice}
@@ -547,7 +547,7 @@
 			padding-bottom: 0;
 		}
 
-		.options-bar {
+		.control-bar {
 			height: 32px;
 			flex: 0 0 auto;
 			margin: 0 4px;
@@ -561,7 +561,7 @@
 			}
 		}
 
-		.shelf-and-table {
+		.tool-shelf-and-viewport-area {
 			// Enables usage of the `100cqh` unit to reference the height of this container element.
 			container-type: size;
 
@@ -586,7 +586,7 @@
 			--columns-width: calc(var(--columns) * var(--tool-width));
 			--columns-width-max: calc(3px * var(--tool-width));
 
-			.shelf {
+			.tool-shelf {
 				flex: 0 0 auto;
 				justify-content: space-between;
 				// A precaution in case the variables above somehow fail
@@ -644,7 +644,7 @@
 					}
 				}
 
-				.shelf-bottom-widgets {
+				.tool-shelf-bottom-widgets {
 					flex: 0 0 auto;
 					align-items: center;
 
@@ -664,7 +664,7 @@
 				}
 			}
 
-			.table {
+			.viewport-container {
 				flex: 1 1 100%;
 
 				.ruler-or-scrollbar {
@@ -699,7 +699,7 @@
 					margin-right: 16px;
 				}
 
-				.viewport-container {
+				.viewport-container-inner {
 					flex: 1 1 100%;
 					position: relative;
 

frontend/src/components/panels/Layers.svelte

@@ -6,7 +6,7 @@
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
 	import type { Editor } from "@graphite/wasm-communication/editor";
-	import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerStructureJs, UpdateLayersPanelOptionsLayout } from "@graphite/wasm-communication/messages";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerStructureJs, UpdateLayersPanelControlBarLayout } from "@graphite/wasm-communication/messages";
 	import type { DataBuffer, LayerPanelEntry } from "@graphite/wasm-communication/messages";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -47,12 +47,12 @@
 	let dragInPanel = false;
 
 	// Layouts
-	let layersPanelOptionsLayout = defaultWidgetLayout();
+	let layersPanelControlBarLayout = defaultWidgetLayout();
 
 	onMount(() => {
-		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelOptionsLayout, (updateLayersPanelOptionsLayout) => {
-			patchWidgetLayout(layersPanelOptionsLayout, updateLayersPanelOptionsLayout);
-			layersPanelOptionsLayout = layersPanelOptionsLayout;
+		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLayout, (updateLayersPanelControlBarLayout) => {
+			patchWidgetLayout(layersPanelControlBarLayout, updateLayersPanelControlBarLayout);
+			layersPanelControlBarLayout = layersPanelControlBarLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerStructureJs, (updateDocumentLayerStructure) => {
@@ -403,8 +403,8 @@
 </script>
 
 <LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
-	<LayoutRow class="options-bar" scrollableX={true}>
-		<WidgetLayout layout={layersPanelOptionsLayout} />
+	<LayoutRow class="control-bar" scrollableX={true}>
+		<WidgetLayout layout={layersPanelControlBarLayout} />
 	</LayoutRow>
 	<LayoutRow class="list-area" scrollableY={true}>
 		<LayoutCol class="list" data-layer-panel bind:this={list} on:click={() => deselectAllLayers()} on:dragover={updateInsertLine} on:dragend={drop} on:drop={drop}>
@@ -489,8 +489,8 @@
 
 <style lang="scss" global>
 	.layers {
-		// Options bar
-		.options-bar {
+		// Control bar
+		.control-bar {
 			height: 32px;
 			flex: 0 0 auto;
 			margin: 0 4px;

frontend/src/components/panels/Properties.svelte

@@ -30,15 +30,6 @@
 		height: 100%;
 		flex: 1 1 100%;
 
-		.options-bar {
-			min-height: 32px;
-			margin: 0 4px;
-
-			.widget-span {
-				width: 100%;
-			}
-		}
-
 		.sections {
 			flex: 1 1 100%;