Bug 1485324 - (Part 3) Remove obsolete font on element no longer used in Fonts panel; r=gl

Depends on D11506
Removes the `fonts` field from the Redux slice previously used by the FontOverview component
in the Font Inspector version of the Fonts panel. This field is duplicated with the `fonts`
used by the Font Editor. The telemetry can use that one instead.

Refactors the update() method which updates the Redux slice for the FontOverview component.
In time, the update() and refreshFontEditor() method will merge. So will the Redux slices:
`fontEditor` and `fonts` in order to save a duplicate call to the server for `allFonts`.

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/fonts/actions/fonts.js

@@ -13,10 +13,9 @@ module.exports = {
   /**
    * Update the list of fonts in the font inspector
    */
-  updateFonts(fonts, allFonts) {
+  updateFonts(allFonts) {
     return {
       type: UPDATE_FONTS,
-      fonts,
       allFonts,
     };
   },

devtools/client/inspector/fonts/fonts.js

@@ -559,11 +559,11 @@ class FontInspector {
    * Upon a new node selection, log some interesting telemetry probes.
    */
   logTelemetryProbesOnNewNode() {
-    const { fontData, fontEditor } = this.store.getState();
+    const { fontEditor } = this.store.getState();
     const { telemetry } = this.inspector;
 
     // Log the number of font faces used to render content of the element.
-    const nbOfFontsRendered = fontData.fonts.length;
+    const nbOfFontsRendered = fontEditor.fonts.length;
     if (nbOfFontsRendered) {
       telemetry.getHistogramById(HISTOGRAM_N_FONTS_RENDERED).add(nbOfFontsRendered);
     }
@@ -897,10 +897,9 @@ class FontInspector {
     }
 
     let allFonts = [];
-    let fonts = [];
 
     if (!this.isSelectedNodeValid()) {
-      this.store.dispatch(updateFonts(fonts, allFonts));
+      this.store.dispatch(updateFonts(allFonts));
       return;
     }
 
@@ -909,39 +908,24 @@ class FontInspector {
 
     const options = {
       includePreviews: true,
+      // Coerce the type of `supportsFontVariations` to a boolean.
+      includeVariations: !!this.pageStyle.supportsFontVariations,
       previewText,
       previewFillStyle: getColor("body-color"),
     };
 
-    // Add the includeVariations argument into the option to get font variation data.
-    if (this.pageStyle.supportsFontVariations) {
-      options.includeVariations = true;
-    }
-
-    const node = this.inspector.selection.nodeFront;
-    fonts = await this.getFontsForNode(node, options);
+    // If there are no fonts used on the page, the result is an empty array.
     allFonts = await this.getAllFonts(options);
 
-    if (!fonts.length) {
-      // No fonts to display. Clear the previously shown fonts.
-      if (this.store) {
-        this.store.dispatch(updateFonts(fonts, allFonts));
-      }
-      return;
-    }
-
+    // Augment each font object with a dataURI for an image with a sample of the font.
     for (const font of [...allFonts]) {
       font.previewUrl = await font.preview.data.string();
     }
 
-    // in case we've been destroyed in the meantime
-    if (!this.document) {
-      return;
-    }
-
-    this.store.dispatch(updateFonts(fonts, allFonts));
-
-    this.inspector.emit("fontinspector-updated");
+    // Dispatch to the store if it hasn't been destroyed in the meantime.
+    this.store && this.store.dispatch(updateFonts(allFonts));
+    // Emit on the inspector if it hasn't been destroyed in the meantime.
+    this.inspector && this.inspector.emit("fontinspector-updated");
   }
 
   /**

devtools/client/inspector/fonts/reducers/fonts.js

@@ -11,14 +11,12 @@ const {
 const INITIAL_FONT_DATA = {
   // All fonts on the current page.
   allFonts: [],
-  // Fonts used on the selected element.
-  fonts: [],
 };
 
 const reducers = {
 
-  [UPDATE_FONTS](_, { fonts, allFonts }) {
-    return { fonts, allFonts };
+  [UPDATE_FONTS](_, { allFonts }) {
+    return { allFonts };
   },
 
 };

devtools/client/inspector/fonts/types.js

@@ -106,7 +106,4 @@ exports.fontEditor = {
 exports.fontData = {
   // All fonts on the current page.
   allFonts: PropTypes.arrayOf(PropTypes.shape(font)),
-
-  // The fonts used in the current element.
-  fonts: PropTypes.arrayOf(PropTypes.shape(font)),
 };