foo.diff

diff --git a/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js b/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
index f8dcc736..89f19a52 100644
--- a/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@@ -238,10 +238,7 @@ export function addHighlightToTargetSiblings(target, props) {
     // properties like innerHTML can't be checked on nextSibling
     // without creating a flow error even if the node is an element type.
     while (
-      nextSibling &&
-      nextElementSibling &&
-      nextSibling.nodeType === 1 &&
-      nextElementSibling.className.includes(tokenType) &&
+      nextElementSibling?.className.includes(tokenType) &&
       previewExpression.includes(nextElementSibling.innerHTML)
     ) {
       // All checks passed, add highlight and continue the search.
@@ -255,11 +252,8 @@ export function addHighlightToTargetSiblings(target, props) {
     let previousElementSibling = target.previousElementSibling;
 
     while (
-      previousSibling &&
-      previousElementSibling &&
-      previousSibling.nodeType === 1 &&
-      previousElementSibling.className.includes(tokenType) &&
-      previewExpression.includes(previousElementSibling.innerHTML)
+      previousElementSibling?.className.includes(tokenType) &&
+      previewExpression?.includes(previousElementSibling.innerHTML)
     ) {
       // All checks passed, add highlight and continue the search.
       previousElementSibling.classList.add("preview-token");
@@ -275,12 +269,12 @@ export function removeHighlightForTargetSiblings(target) {
   // If they also have the highlight class 'preview-token',
   // remove that class.
   let nextSibling = target.nextElementSibling;
-  while (nextSibling && nextSibling.className.includes("preview-token")) {
+  while (nextSibling?.className.includes("preview-token")) {
     nextSibling.classList.remove("preview-token");
     nextSibling = nextSibling.nextElementSibling;
   }
   let previousSibling = target.previousElementSibling;
-  while (previousSibling && previousSibling.className.includes("preview-token")) {
+  while (previousSibling?.className.includes("preview-token")) {
     previousSibling.classList.remove("preview-token");
     previousSibling = previousSibling.previousElementSibling;
   }
diff --git a/src/protocol/graphics.ts b/src/protocol/graphics.ts
index de57eb74..a7fbbdc4 100644
--- a/src/protocol/graphics.ts
+++ b/src/protocol/graphics.ts
@@ -115,8 +115,10 @@ function onMouseEvents(events: MouseEvent[], store: UIStore) {
   store.dispatch(actions.setEventsForType(gMouseClickEvents, "mousedown"));
 }
 
+let onCanvasUpdate = details => {};
+
 export function setupGraphics(store: UIStore) {
-  gStore = store;
+  onCanvasUpdate = details => store.dispatch(actions.setCanvas(details));
 
   ThreadFront.sessionWaiter.promise.then((sessionId: string) => {
     client.Graphics.findPaints({}, sessionId);
@@ -355,16 +357,14 @@ export function refreshGraphics() {
     }
   }
 
-  gStore.dispatch(
-    actions.setCanvas({
-      scale,
-      gDevicePixelRatio,
-      width: image.width,
-      height: image.height,
-      left: offsetLeft,
-      top: offsetTop,
-    })
-  );
+  onCanvasUpdate({
+    scale,
+    gDevicePixelRatio,
+    width: image.width,
+    height: image.height,
+    left: offsetLeft,
+    top: offsetTop,
+  });
 
   // Apply the same transforms to any displayed highlighter.
   const highlighterContainer = document.querySelector(".highlighter-container") as HTMLElement;