Expanded Time List enhancements for #8091 (#8095)

* Markup and CSS changes for expanded Activities in Time List
- Significant markup and CSS changes.
- Activities now use Plan colors.
- Greatly improved narrow space and wrapping.
- Added new global data uri's for status icons.
- Added new global `gear-spinner` animation for in-progress Activity status icon.
- Added new global `absCenter` mixin.
- Revised and greatly simplified execution status and time context labels.
- Revised, refined past/current/future styling and theme colors.
- Status icon coloring added to theme constants.
- Updated other themes constants for new approach to bg/fg/em.
- Smoke tested in Espresso and Snow themes.

* Remove unused imports

* Remove unused and commented out code

* Remove progress pie tests as that widget no longer exists

* lint fix

* remove tests for progress pie as it no longer exists

---------

Co-authored-by: Shefali <[email protected]>
Co-authored-by: David Tsay <[email protected]>

Author: 3 people

e2e/tests/functional/planning/timelistControlledClock.e2e.spec.js

@@ -54,7 +54,6 @@ const examplePlanSmall1 = JSON.parse(
 const TIME_TO_FROM_COLUMN = 2;
 const HEADER_ROW = 0;
 const NUM_COLUMNS = 5;
-const FULL_CIRCLE_PATH = 'M0,-50A50,50,0,1,1,0,50A50,50,0,1,1,0,-50Z';
 
 /**
  * The regular expression used to parse the countdown string.
@@ -176,14 +175,6 @@ test.describe('Activity progress when activity is in the future @clock', () => {
     await page.clock.resume();
     await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
   });
-
-  test('progress pie is empty', async ({ page }) => {
-    const anActivity = page.getByRole('row').nth(0);
-    // Progress pie shows no progress when now is less than the start time
-    await expect(anActivity.getByLabel('Activity in progress').locator('path')).not.toHaveAttribute(
-      'd'
-    );
-  });
 });
 
 test.describe('Activity progress when now is between start and end of the activity @clock', () => {
@@ -193,13 +184,6 @@ test.describe('Activity progress when now is between start and end of the activi
     await page.goto('./', { waitUntil: 'domcontentloaded' });
     await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
   });
-
-  test('progress pie is partially filled', async ({ page }) => {
-    const anActivity = page.getByRole('row').nth(0);
-    const pathElement = anActivity.getByLabel('Activity in progress').locator('path');
-    // Progress pie shows progress when now is greater than the start time
-    await expect(pathElement).toHaveAttribute('d');
-  });
 });
 
 test.describe('Activity progress when now is after end of the activity @clock', () => {
@@ -209,15 +193,6 @@ test.describe('Activity progress when now is after end of the activity @clock',
     await page.goto('./', { waitUntil: 'domcontentloaded' });
     await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
   });
-
-  test('progress pie is full', async ({ page }) => {
-    const anActivity = page.getByRole('row').nth(0);
-    // Progress pie is completely full and doesn't update if now is greater than the end time
-    await expect(anActivity.getByLabel('Activity in progress').locator('path')).toHaveAttribute(
-      'd',
-      FULL_CIRCLE_PATH
-    );
-  });
 });
 
 /**

e2e/tests/visual-a11y/planning-timelist.visual.spec.js

@@ -27,37 +27,17 @@ import { createPlanFromJSON } from '../../appActions.js';
 import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
 import {
-  createTimelistWithPlanAndSetActivityInProgress,
   getFirstActivity,
   setBoundsToSpanAllActivities,
   setDraftStatusForPlan
 } from '../../helper/planningUtils.js';
 
-const examplePlanSmall1 = JSON.parse(
-  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url))
-);
-
 const examplePlanSmall2 = JSON.parse(
   fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
 );
 
-const FIRST_ACTIVITY_SMALL_1 = getFirstActivity(examplePlanSmall1);
 const FIRST_ACTIVITY_SMALL_2 = getFirstActivity(examplePlanSmall2);
 
-test.describe('Visual - Timelist progress bar @clock @a11y', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.clock.install({ time: FIRST_ACTIVITY_SMALL_1.end + 10000 });
-    await page.clock.resume();
-    await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
-    await page.getByLabel('Click to collapse items').click();
-  });
-
-  test('progress pie is full', async ({ page, theme }) => {
-    // Progress pie is completely full and doesn't update if now is greater than the end time
-    await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`);
-  });
-});
-
 test.describe('Visual - Plan View @a11y', () => {
   test.beforeEach(async ({ page }) => {
     // Set the clock to the end of the first activity in the plan