chore(null): strict null checks for injected drawing-controller

src/DetailsView/components/base-visual-helper-toggle.tsx

@@ -64,7 +64,7 @@ export abstract class BaseVisualHelperToggle extends React.Component<VisualHelpe
         });
     }
 
-    private renderNoMatchingElementsMessage(isDisabled: boolean): JSX.Element {
+    private renderNoMatchingElementsMessage(isDisabled: boolean): JSX.Element | null {
         if (isDisabled) {
             return (
                 <span className="no-matching-elements">

src/injected/drawing-controller.ts

@@ -19,8 +19,8 @@ export interface VisualizationWindowMessage {
     visualizationType?: VisualizationType;
     isEnabled: boolean;
     configId: string;
-    elementResults?: AssessmentVisualizationInstance[];
-    featureFlagStoreData?: FeatureFlagStoreData;
+    elementResults: AssessmentVisualizationInstance[] | null;
+    featureFlagStoreData: FeatureFlagStoreData;
 }
 
 export class DrawingController {
@@ -69,7 +69,7 @@ export class DrawingController {
     };
 
     private async enableVisualization(
-        elementResults: AssessmentVisualizationInstance[] | undefined,
+        elementResults: AssessmentVisualizationInstance[] | null,
         configId: string,
     ): Promise<void> {
         if (elementResults) {
@@ -96,7 +96,7 @@ export class DrawingController {
         const childFrameResults = elementResultsByFrame.filter(results => results.frame != null);
         await this.allFramesMessenger.sendCommandToMultipleFrames(
             DrawingController.triggerVisualizationCommand,
-            childFrameResults.map(results => results.frame),
+            childFrameResults.map(results => results.frame!),
             (_frame, index) =>
                 this.createEnableVisualizationPayload(
                     configId,
@@ -110,12 +110,12 @@ export class DrawingController {
 
         await this.allFramesMessenger.sendCommandToAllFrames(
             DrawingController.triggerVisualizationCommand,
-            this.createEnableVisualizationPayload(configId),
+            this.createEnableVisualizationPayload(configId, null),
         );
     }
 
     private enableVisualizationInCurrentFrame = async (
-        currentFrameResults: AssessmentVisualizationInstance[],
+        currentFrameResults: AssessmentVisualizationInstance[] | null,
         configId: string,
     ): Promise<void> => {
         const drawer = this.getDrawer(configId);
@@ -128,10 +128,10 @@ export class DrawingController {
 
     private createEnableVisualizationPayload(
         configId: string,
-        frameResults?: AssessmentVisualizationInstance[],
+        frameResults: AssessmentVisualizationInstance[] | null,
     ): VisualizationWindowMessage {
         return {
-            elementResults: frameResults ?? null,
+            elementResults: frameResults,
             isEnabled: true,
             featureFlagStoreData: this.featureFlagStoreData,
             configId: configId,
@@ -164,8 +164,8 @@ export class DrawingController {
     }
 
     private getInitialElements(
-        currentFrameResults: AssessmentVisualizationInstance[],
-    ): AssessmentVisualizationInstance[] {
+        currentFrameResults: AssessmentVisualizationInstance[] | null,
+    ): AssessmentVisualizationInstance[] | null {
         if (currentFrameResults == null) {
             return null;
         }

src/injected/drawing-initiator.ts

@@ -76,6 +76,7 @@ export class DrawingInitiator {
             isEnabled: false,
             featureFlagStoreData: featureFlagStoreData,
             configId: configId,
+            elementResults: null,
         };
 
         await this.drawingController.processRequest(visualizationMessage);

src/injected/visualization/base-drawer.ts

@@ -39,7 +39,7 @@ export abstract class BaseDrawer implements Drawer {
         this.drawerUtils = drawerUtils;
     }
 
-    public abstract initialize(config: DrawerInitData<any>): void;
+    public abstract initialize(config: DrawerInitData): void;
 
     public drawLayout = async (): Promise<void> => {
         this.addListeners();

src/injected/visualization/drawer.ts

@@ -1,15 +1,16 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { AssessmentVisualizationInstance } from 'injected/frameCommunicators/html-element-axe-results-helper';
 import { FeatureFlagStoreData } from '../../common/types/store-data/feature-flag-store-data';
 
 export interface Drawer {
-    initialize(config: DrawerInitData<any>): void;
+    initialize(config: DrawerInitData): void;
     isOverlayEnabled: boolean;
     drawLayout(): Promise<void>;
     eraseLayout(): void;
 }
 
-export interface DrawerInitData<T> {
-    data: T[];
+export interface DrawerInitData {
+    data: AssessmentVisualizationInstance[] | null;
     featureFlagStoreData: FeatureFlagStoreData;
 }

src/injected/visualization/highlight-box-drawer.ts

@@ -36,8 +36,8 @@ export class HighlightBoxDrawer extends BaseDrawer {
         this.dialogRenderer = this.formatter?.getDialogRenderer();
     }
 
-    public initialize(config: DrawerInitData<HtmlElementAxeResults>): void {
-        this.elementResults = config.data;
+    public initialize(config: DrawerInitData): void {
+        this.elementResults = config.data ?? [];
         this.eraseLayout();
     }
 

src/injected/visualization/null-drawer.ts

@@ -3,7 +3,7 @@
 import { Drawer, DrawerInitData } from './drawer';
 
 export class NullDrawer implements Drawer {
-    public initialize(drawerData: DrawerInitData<any>): void {}
+    public initialize(drawerData: DrawerInitData): void {}
     public isOverlayEnabled: boolean = false;
     public drawLayout = async (): Promise<void> => {};
     public eraseLayout(): void {}

src/injected/visualization/single-target-drawer.ts

@@ -17,9 +17,9 @@ export class SingleTargetDrawer implements Drawer {
         this.formatter = formatter;
     }
 
-    public initialize(drawerInfo: DrawerInitData<HtmlElementAxeResults>): void {
+    public initialize(drawerInfo: DrawerInitData): void {
         this.eraseLayout();
-        const elementResults = drawerInfo.data;
+        const elementResults = drawerInfo.data ?? [];
         const myDocument = this.drawerUtils.getDocumentElement();
         this.target = this.getFirstElementTarget(myDocument, elementResults);
     }

src/injected/visualization/svg-drawer.ts

@@ -42,20 +42,18 @@ export class SVGDrawer extends BaseDrawer {
         this.failureItems = [];
     }
 
-    public initialize(
-        drawerInfo: DrawerInitData<TabStopVisualizationInstance | TabbedElementData>,
-    ): void {
-        const visualizationInstances: TabStopVisualizationInstance[] = drawerInfo.data.map(
-            (element: TabStopVisualizationInstance) => {
+    public initialize(drawerInfo: DrawerInitData): void {
+        const originalVisualizationInstances = drawerInfo.data ?? [];
+        const annotatedVisualizationInstances: TabStopVisualizationInstance[] =
+            originalVisualizationInstances.map((element: TabStopVisualizationInstance) => {
                 return {
                     propertyBag: {
                         tabOrder: this.getTabOrder(element),
                     },
                     ...element,
                 };
-            },
-        );
-        this.updateTabbedElements(visualizationInstances);
+            });
+        this.updateTabbedElements(annotatedVisualizationInstances);
         this.tabOrderedItems = this.allVisualizedItems.filter(item => item.tabOrder != null);
         this.failureItems = this.allVisualizedItems.filter(item => item.isFailure);
     }

src/injected/window-initializer.ts

@@ -92,13 +92,21 @@ export class WindowInitializer {
         const htmlElementUtils = new HTMLElementUtils();
         this.clientUtils = new ClientUtils(window);
 
+        const extensionId = browserAdapter.getExtensionId();
+        if (extensionId == null) {
+            logger.error(
+                'Aborting Accessibility Insights initialization - extension instance is unloaded',
+            );
+            return;
+        }
+
         this.actionMessageDispatcher = new RemoteActionMessageDispatcher(
             this.browserAdapter.sendMessageToFrames,
             null,
             logger,
         );
 
-        const telemetrySanitizer = new ExceptionTelemetrySanitizer(browserAdapter.getExtensionId());
+        const telemetrySanitizer = new ExceptionTelemetrySanitizer(extensionId);
         const exceptionTelemetryListener = new ExceptionTelemetryListener(
             TelemetryEventSource.TargetPage,
             this.actionMessageDispatcher.sendTelemetry,

src/tests/unit/tests/injected/drawing-controller.test.ts

@@ -1,6 +1,5 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { HtmlElementAxeResults } from 'common/types/store-data/visualization-scan-result-data';
 import { AllFramesMessenger } from 'injected/frameCommunicators/all-frames-messenger';
 import {
     CommandMessage,
@@ -23,12 +22,13 @@ import { HighlightBoxDrawer } from '../../../../injected/visualization/highlight
 class VisualizationWindowMessageStubBuilder {
     private isEnabled: boolean;
     private configId: string;
-    private elementResults?: AssessmentVisualizationInstance[];
+    private elementResults: AssessmentVisualizationInstance[] | null;
     private featureFlagStoreData?: FeatureFlagStoreData;
 
     public constructor(configId: string) {
         this.configId = configId;
         this.featureFlagStoreData = getDefaultFeatureFlagsWeb();
+        this.elementResults = null;
     }
 
     public setVisualizationEnabled(): VisualizationWindowMessageStubBuilder {
@@ -42,7 +42,7 @@ class VisualizationWindowMessageStubBuilder {
     }
 
     public setElementResults(
-        results: AssessmentVisualizationInstance[],
+        results: AssessmentVisualizationInstance[] | null,
     ): VisualizationWindowMessageStubBuilder {
         this.elementResults = results;
         return this;
@@ -158,7 +158,7 @@ describe('DrawingControllerTest', () => {
         const iframeResults = ['iframeContent'];
         const iframeElement = 'iframeElement';
         const targetFrame = iframeElement as any;
-        const visibleResultStub = {} as HtmlElementAxeResults;
+        const visibleResultStub = {} as AssessmentVisualizationInstance;
         const disabledResultStub = {
             isVisualizationEnabled: false,
         } as AssessmentVisualizationInstance;
@@ -207,7 +207,7 @@ describe('DrawingControllerTest', () => {
             })
             .verifiable(Times.once());
 
-        const expected: DrawerInitData<HtmlElementAxeResults> = {
+        const expected: DrawerInitData = {
             data: [visibleResultStub],
             featureFlagStoreData,
         };

src/tests/unit/tests/injected/drawing-initiator.test.ts

@@ -51,6 +51,7 @@ describe('DrawingInitiatorTest', () => {
             isEnabled: false,
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
             configId: configId,
+            elementResults: null,
         };
 
         drawingControllerMock

src/tests/unit/tests/injected/visualization/drawer.test.ts

@@ -1,11 +1,11 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { getDefaultFeatureFlagsWeb } from 'common/feature-flags';
-import { HtmlElementAxeResults } from 'common/types/store-data/visualization-scan-result-data';
 import { WindowUtils } from 'common/window-utils';
 import { BoundingRect } from 'injected/bounding-rect';
 import { ClientUtils } from 'injected/client-utils';
 import { DialogRenderer } from 'injected/dialog-renderer';
+import { AssessmentVisualizationInstance } from 'injected/frameCommunicators/html-element-axe-results-helper';
 import { ShadowUtils } from 'injected/shadow-utils';
 import { DrawerInitData } from 'injected/visualization/drawer';
 import { DrawerUtils } from 'injected/visualization/drawer-utils';
@@ -1195,20 +1195,22 @@ describe('Drawer', () => {
         verifyOverlayStyle(overlays[2], element4Config);
     });
 
-    function createDrawerInfo<T>(elementResults: T[]): DrawerInitData<T> {
+    function createDrawerInfo<T>(
+        elementResults: AssessmentVisualizationInstance[] | null,
+    ): DrawerInitData {
         return {
             data: elementResults,
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
         };
     }
 
-    function createElementResults(ids: string[]): HtmlElementAxeResults[] {
+    function createElementResults(ids: string[]): AssessmentVisualizationInstance[] {
         return ids.map(id => {
             return {
                 ruleResults: {},
                 target: [id],
                 targetIndex: 0,
-            };
+            } as AssessmentVisualizationInstance;
         });
     }
 

src/tests/unit/tests/injected/visualization/single-target-drawer.test.ts

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
-import { HtmlElementAxeResults } from 'common/types/store-data/visualization-scan-result-data';
+import { AssessmentVisualizationInstance } from 'injected/frameCommunicators/html-element-axe-results-helper';
 import { IMock, Mock, Times } from 'typemoq';
 
 import { getDefaultFeatureFlagsWeb } from '../../../../../common/feature-flags';
@@ -29,12 +29,12 @@ describe('SingleTargetDrawer Tests', () => {
 
         const testSubject = new SingleTargetDrawer(drawerUtilsMock.object, formatterMock.object);
 
-        const drawerInfo: DrawerInitData<HtmlElementAxeResults> = {
+        const drawerInfo: DrawerInitData = {
             data: [
                 {
                     target: ['body'],
-                },
-            ] as HtmlElementAxeResults[],
+                } as AssessmentVisualizationInstance,
+            ],
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
         };
 
@@ -53,12 +53,12 @@ describe('SingleTargetDrawer Tests', () => {
 
         const testSubject = new SingleTargetDrawer(drawerUtilsMock.object, formatterMock.object);
 
-        const drawerInfo: DrawerInitData<HtmlElementAxeResults> = {
+        const drawerInfo: DrawerInitData = {
             data: [
                 {
                     target: ['body'],
-                },
-            ] as HtmlElementAxeResults[],
+                } as AssessmentVisualizationInstance,
+            ],
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
         };
 
@@ -84,12 +84,12 @@ describe('SingleTargetDrawer Tests', () => {
 
         const testSubject = new SingleTargetDrawer(drawerUtilsMock.object, formatterMock.object);
 
-        const drawerInfo: DrawerInitData<HtmlElementAxeResults> = {
+        const drawerInfo: DrawerInitData = {
             data: [
                 {
                     target: ['body'],
-                },
-            ] as HtmlElementAxeResults[],
+                } as AssessmentVisualizationInstance,
+            ],
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
         };
 
@@ -115,12 +115,12 @@ describe('SingleTargetDrawer Tests', () => {
 
         const testSubject = new SingleTargetDrawer(drawerUtilsMock.object, formatterMock.object);
 
-        const drawerInfo: DrawerInitData<HtmlElementAxeResults> = {
+        const drawerInfo: DrawerInitData = {
             data: [
                 {
                     target: ['body'],
-                },
-            ] as HtmlElementAxeResults[],
+                } as AssessmentVisualizationInstance,
+            ],
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
         };
 

src/tests/unit/tests/injected/visualization/svg-drawer.test.ts

@@ -1,7 +1,10 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { TabbedElementData } from 'common/types/store-data/visualization-scan-result-data';
-import { TabStopVisualizationInstance } from 'injected/frameCommunicators/html-element-axe-results-helper';
+import {
+    AssessmentVisualizationInstance,
+    TabStopVisualizationInstance,
+} from 'injected/frameCommunicators/html-element-axe-results-helper';
 import { IMock, It, Mock, Times } from 'typemoq';
 
 import { getDefaultFeatureFlagsWeb } from '../../../../../common/feature-flags';
@@ -47,7 +50,9 @@ describe('SVGDrawer', () => {
         shadowUtilsMock.setup(x => x.getShadowContainer()).returns(() => shadowContainer);
     });
 
-    function createDrawerInfo<T>(elementResults: T[]): DrawerInitData<T> {
+    function createDrawerInfo(
+        elementResults: AssessmentVisualizationInstance[] | null,
+    ): DrawerInitData {
         return {
             data: elementResults,
             featureFlagStoreData: getDefaultFeatureFlagsWeb(),
@@ -176,7 +181,7 @@ describe('SVGDrawer', () => {
             null,
         );
 
-        testSubject.initialize(createDrawerInfo(tabbedElements));
+        testSubject.initialize(createDrawerInfo(tabbedElements as any));
         expect((testSubject as any).allVisualizedItems).toEqual(expectedAllVisualizedItems);
         drawerUtilsMock.verifyAll();
     });