Bug 1630660 - Memoize Callstack FrameLocation component. r=davidwalsh

Differential Revision: https://phabricator.services.mozilla.com/D71196

devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-import React, { Component } from "react";
+import React, { Component, memo } from "react";
 import PropTypes from "prop-types";
 
 import classNames from "classnames";
@@ -30,34 +30,36 @@ function FrameTitle({ frame, options = {}, l10n }: FrameTitleProps) {
 
 type FrameLocationProps = { frame: Frame, displayFullUrl: boolean };
 
-function FrameLocation({ frame, displayFullUrl = false }: FrameLocationProps) {
-  if (!frame.source) {
-    return null;
-  }
+const FrameLocation = memo(
+  ({ frame, displayFullUrl = false }: FrameLocationProps) => {
+    if (!frame.source) {
+      return null;
+    }
+
+    if (frame.library) {
+      return (
+        <span className="location">
+          {frame.library}
+          <AccessibleImage
+            className={`annotation-logo ${frame.library.toLowerCase()}`}
+          />
+        </span>
+      );
+    }
+
+    const { location, source } = frame;
+    const filename = displayFullUrl
+      ? getFileURL(source, false)
+      : getFilename(source);
 
-  if (frame.library) {
     return (
-      <span className="location">
-        {frame.library}
-        <AccessibleImage
-          className={`annotation-logo ${frame.library.toLowerCase()}`}
-        />
+      <span className="location" title={source.url}>
+        <span className="filename">{filename}</span>:
+        <span className="line">{location.line}</span>
       </span>
     );
   }
-
-  const { location, source } = frame;
-  const filename = displayFullUrl
-    ? getFileURL(source, false)
-    : getFilename(source);
-
-  return (
-    <span className="location" title={source.url}>
-      <span className="filename">{filename}</span>:
-      <span className="line">{location.line}</span>
-    </span>
-  );
-}
+);
 
 FrameLocation.displayName = "FrameLocation";
 

devtools/client/debugger/src/utils/dbg.js

@@ -78,6 +78,8 @@ function getDocumentForUrl(dbg, url) {
   return getDocument(source.id);
 }
 
+const diff = (a, b) => Object.keys(a).filter(key => !Object.is(a[key], b[key]));
+
 export function setupHelper(obj: Object) {
   const selectors = bindSelectors(obj);
   const dbg: Object = {
@@ -105,6 +107,7 @@ export function setupHelper(obj: Object) {
     _telemetry: {
       events: {},
     },
+    diff,
   };
 
   window.dbg = dbg;