initial enabling sourcemaps

* Closes #7036
- CSS fix to prevent toolbar overrun of main view area.

* a11y: add label to pane handles

* test(visual): toolbar overflow

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

.webpack/webpack.prod.js

@@ -15,5 +15,5 @@ export default merge(common, {
       __OPENMCT_ROOT_RELATIVE__: '""'
     })
   ],
-  devtool: 'source-map'
+  devtool: 'eval-source-map'
 });

e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

@@ -298,7 +298,7 @@ test.describe('Basic Condition Set Use', () => {
   }) => {
     const exampleTelemetry = await createExampleTelemetryObject(page);
 
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
     await page.goto(conditionSet.url);
     // Change the object to edit mode
     await page.getByLabel('Edit Object').click();
@@ -378,4 +378,83 @@ test.describe('Basic Condition Set Use', () => {
     await page.goto(conditionSet.url);
     await expect(outputValue).toHaveText('---');
   });
+
+  test('ConditionSet has correct outputs when test data is enabled', async ({ page }) => {
+    const exampleTelemetry = await createExampleTelemetryObject(page);
+
+    await page.getByLabel('Show selected item in tree').click();
+    await page.goto(conditionSet.url);
+    // Change the object to edit mode
+    await page.getByLabel('Edit Object').click();
+
+    // Create two conditions
+    await page.locator('#addCondition').click();
+    await page.locator('#addCondition').click();
+    await page.locator('#conditionCollection').getByRole('textbox').nth(0).fill('First Condition');
+    await page.locator('#conditionCollection').getByRole('textbox').nth(1).fill('Second Condition');
+
+    // Add Telemetry to ConditionSet
+    const sineWaveGeneratorTreeItem = page
+      .getByRole('tree', {
+        name: 'Main Tree'
+      })
+      .getByRole('treeitem', {
+        name: exampleTelemetry.name
+      });
+    const conditionCollection = page.locator('#conditionCollection');
+    await sineWaveGeneratorTreeItem.dragTo(conditionCollection);
+
+    // Modify First Criterion
+    const firstCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=0'
+    );
+    firstCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+    const firstCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=0'
+    );
+    firstCriterionMetadata.selectOption({ label: 'Sine' });
+    const firstCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=0'
+    );
+    firstCriterionComparison.selectOption({ label: 'is greater than or equal to' });
+    const firstCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=0');
+    await firstCriterionInput.fill('0');
+
+    // Modify Second Criterion
+    const secondCriterionTelemetry = page.locator(
+      '[aria-label="Criterion Telemetry Selection"] >> nth=1'
+    );
+    await secondCriterionTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const secondCriterionMetadata = page.locator(
+      '[aria-label="Criterion Metadata Selection"] >> nth=1'
+    );
+    await secondCriterionMetadata.selectOption({ label: 'Sine' });
+
+    const secondCriterionComparison = page.locator(
+      '[aria-label="Criterion Comparison Selection"] >> nth=1'
+    );
+    await secondCriterionComparison.selectOption({ label: 'is less than' });
+
+    const secondCriterionInput = page.locator('[aria-label="Criterion Input"] >> nth=1');
+    await secondCriterionInput.fill('0');
+
+    // Enable test data
+    await page.getByLabel('Apply Test Data').nth(1).click();
+    const testDataTelemetry = page.locator('[aria-label="Test Data Telemetry Selection"] >> nth=0');
+    await testDataTelemetry.selectOption({ label: exampleTelemetry.name });
+
+    const testDataMetadata = page.locator('[aria-label="Test Data Metadata Selection"] >> nth=0');
+    await testDataMetadata.selectOption({ label: 'Sine' });
+
+    const testInput = page.locator('[aria-label="Test Data Input"] >> nth=0');
+    await testInput.fill('0');
+
+    // Validate that the condition set is evaluating and outputting
+    // the correct value when the underlying telemetry subscription is active.
+    let outputValue = page.locator('[aria-label="Current Output Value"]');
+    await expect(outputValue).toHaveText('false');
+
+    await page.goto(exampleTelemetry.url);
+  });
 });

e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js

@@ -308,7 +308,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await page
       .getByRole('treeitem', { name: overlayPlot.name })
@@ -332,7 +332,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, 'Entry to drop into');
     await page
@@ -377,7 +377,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
 
@@ -404,7 +404,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
 
@@ -421,7 +421,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, `This should NOT be a link: ${TEST_LINK} is it?`);
 
@@ -438,7 +438,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, `This should be a link: ${INVALID_TEST_LINK} is it?`);
 
@@ -455,7 +455,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(page, `This should be a link: ${TEST_LINK} is it?`);
 
@@ -483,7 +483,7 @@ test.describe('Notebook entry tests', () => {
     await page.goto(notebookObject.url);
 
     // Reveal the notebook in the tree
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     await nbUtils.enterTextEntry(
       page,

e2e/tests/functional/recentObjects.e2e.spec.js

@@ -191,7 +191,7 @@ test.describe('Recent Objects', () => {
 
     // Navigate to the clock and reveal it in the tree
     await page.goto(clock.url);
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     // Right click the clock and create an alias using the "link" context menu action
     const clockTreeItem = page

e2e/tests/functional/tree.e2e.spec.js

@@ -40,7 +40,7 @@ test.describe('Main Tree', () => {
       type: 'Folder'
     });
 
-    await page.getByTitle('Show selected item in tree').click();
+    await page.getByLabel('Show selected item in tree').click();
 
     const clock = await createDomainObjectWithDefaults(page, {
       type: 'Clock',

e2e/tests/visual-a11y/displayLayout.visual.spec.js

@@ -93,4 +93,14 @@ test.describe('Visual - Display Layout', () => {
     await page.getByLabel('Parent Layout Layout', { exact: true }).click();
     await percySnapshot(page, `Parent outer layout selected (theme: '${theme}')`);
   });
+
+  test('Toolbar does not overflow into inspector', async ({ page, theme }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7036'
+    });
+    await page.getByLabel('Expand Inspect Pane').click();
+    await page.getByLabel('Resize Inspect Pane').dragTo(page.getByLabel('X:'));
+    await percySnapshot(page, `Toolbar does not overflow into inspector (theme: '${theme}')`);
+  });
 });

src/plugins/condition/components/TestData.vue

@@ -31,10 +31,10 @@
       <div class="c-cs__header-label c-section__label">Test Data</div>
     </div>
     <div v-if="expanded" class="c-cs__content">
-      <div class="c-cs__test-data__controls c-cdef__controls" :disabled="!telemetry.length">
+      <div :class="['c-cs__test-data__controls c-cdef__controls', { disabled: !telemetry.length }]">
         <label class="c-toggle-switch">
           <input type="checkbox" :checked="isApplied" @change="applyTestData" />
-          <span class="c-toggle-switch__slider"></span>
+          <span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
           <span class="c-toggle-switch__label">Apply Test Data</span>
         </label>
       </div>
@@ -47,7 +47,11 @@
           <span class="c-cs-test__label">Set</span>
           <span class="c-cs-test__controls">
             <span class="c-cdef__control">
-              <select v-model="testInput.telemetry" @change="updateMetadata(testInput)">
+              <select
+                v-model="testInput.telemetry"
+                aria-label="Test Data Telemetry Selection"
+                @change="updateMetadata(testInput)"
+              >
                 <option value="">- Select Telemetry -</option>
                 <option
                   v-for="(telemetryOption, index) in telemetry"
@@ -59,7 +63,11 @@
               </select>
             </span>
             <span v-if="testInput.telemetry" class="c-cdef__control">
-              <select v-model="testInput.metadata" @change="updateTestData">
+              <select
+                v-model="testInput.metadata"
+                aria-label="Test Data Metadata Selection"
+                @change="updateTestData"
+              >
                 <option value="">- Select Field -</option>
                 <option
                   v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
@@ -76,6 +84,7 @@
                 placeholder="Enter test input"
                 type="text"
                 class="c-cdef__control__input"
+                aria-label="Test Data Input"
                 @change="updateTestData"
               />
             </span>

src/ui/layout/PaneContainer.vue

@@ -21,7 +21,13 @@
 -->
 <template>
   <div class="l-pane" :class="paneClasses">
-    <div v-if="handle" class="l-pane__handle" @mousedown.prevent="startResizing"></div>
+    <div
+      v-if="handle"
+      class="l-pane__handle"
+      :aria-label="handleLabel"
+      :aria-grabbed="resizing"
+      @mousedown.prevent="startResizing"
+    ></div>
     <div class="l-pane__header">
       <span v-if="label" class="l-pane__label">{{ label }}</span>
       <slot name="controls"></slot>
@@ -88,6 +94,9 @@ export default {
     };
   },
   computed: {
+    handleLabel() {
+      return `Resize ${this.label} Pane`;
+    },
     isCollapsable() {
       return this.hideParam?.length > 0;
     },

src/ui/layout/pane.scss

@@ -60,7 +60,7 @@
       transition: opacity 150ms ease;
       opacity: 0;
       pointer-events: none;
-      overflow: hidden;
+      overflow: hidden; // Prevents toolbar from extending into Inspector
 
       > * {
         min-width: 0 !important;
@@ -93,6 +93,7 @@
   &__contents {
     flex: 1 1 100%;
     opacity: 1;
+    overflow: hidden;
     pointer-events: inherit;
     transition: opacity 250ms ease 250ms;