Bug 1486891 - (Part 2) Remove old font preview functionality from font editor. r=gl

devtools/client/inspector/fonts/components/Font.js

@@ -18,8 +18,7 @@ class Font extends PureComponent {
   static get propTypes() {
     return {
       font: PropTypes.shape(Types.font).isRequired,
-      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
-      onPreviewFonts: PropTypes.func.isRequired,
+      onPreviewClick: PropTypes.func,
       onToggleFontHighlight: PropTypes.func.isRequired,
     };
   }
@@ -108,13 +107,10 @@ class Font extends PureComponent {
   render() {
     const {
       font,
-      fontOptions,
-      onPreviewFonts,
+      onPreviewClick,
       onToggleFontHighlight,
     } = this.props;
 
-    const { previewText } = fontOptions;
-
     const {
       CSSFamilyName,
       previewUrl,
@@ -132,7 +128,7 @@ class Font extends PureComponent {
         FontName({ font, onToggleFontHighlight })
       ),
       FontOrigin({ font }),
-      FontPreview({ previewText, previewUrl, onPreviewFonts }),
+      FontPreview({ onPreviewClick, previewUrl }),
       this.renderFontCSSCode(rule, ruleText)
     );
   }

devtools/client/inspector/fonts/components/FontList.js

@@ -8,6 +8,7 @@ const Services = require("Services");
 const {
   createElement,
   createFactory,
+  createRef,
   Fragment,
   PureComponent,
 } = require("devtools/client/shared/vendor/react");
@@ -31,6 +32,21 @@ class FontList extends PureComponent {
     };
   }
 
+  constructor(props) {
+    super(props);
+
+    this.onPreviewClick = this.onPreviewClick.bind(this);
+    this.previewInputRef = createRef();
+  }
+
+  /**
+   * Handler for clicks on the font preview image.
+   * Requests the FontPreviewInput component, if one exists, to focus its input field.
+   */
+  onPreviewClick() {
+    this.previewInputRef.current && this.previewInputRef.current.focus();
+  }
+
   render() {
     const {
       fonts,
@@ -40,6 +56,7 @@ class FontList extends PureComponent {
     } = this.props;
 
     const { previewText } = fontOptions;
+    const { onPreviewClick } = this;
 
     const list = dom.ul(
       {
@@ -48,7 +65,7 @@ class FontList extends PureComponent {
       fonts.map((font, i) => Font({
         key: i,
         font,
-        fontOptions,
+        onPreviewClick,
         onToggleFontHighlight,
       }))
     );
@@ -56,6 +73,7 @@ class FontList extends PureComponent {
     // Show the font preview input only when the font editor is enabled.
     const previewInput = Services.prefs.getBoolPref(PREF_FONT_EDITOR) ?
       FontPreviewInput({
+        ref: this.previewInputRef,
         onPreviewTextChange,
         previewText,
       })

devtools/client/inspector/fonts/components/FontPreview.js

@@ -9,86 +9,33 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const Types = require("../types");
-const { getStr } = require("../utils/l10n");
 
 class FontPreview extends PureComponent {
   static get propTypes() {
     return {
-      previewText: Types.fontOptions.previewText.isRequired,
+      onPreviewClick: PropTypes.func,
       previewUrl: Types.font.previewUrl.isRequired,
-      onPreviewFonts: PropTypes.func.isRequired,
     };
   }
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // Is the text preview input field currently focused?
-      isFocused: false,
+  static get defaultProps() {
+    return {
+      onPreviewClick: () => {},
     };
-
-    this.onBlur = this.onBlur.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.state.isFocused) {
-      const input = this.fontPreviewInput;
-      input.focus();
-      input.selectionStart = input.selectionEnd = input.value.length;
-    }
-  }
-
-  onBlur() {
-    this.setState({ isFocused: false });
-  }
-
-  onClick(event) {
-    this.setState({ isFocused: true });
-    event.stopPropagation();
-  }
-
-  onChange(event) {
-    this.props.onPreviewFonts(event.target.value);
   }
 
   render() {
     const {
-      previewText,
+      onPreviewClick,
       previewUrl,
     } = this.props;
 
-    const { isFocused } = this.state;
-
-    return dom.div(
+    return dom.img(
       {
-        className: "font-preview-container",
-      },
-      isFocused ?
-        dom.input(
-          {
-            type: "search",
-            className: "font-preview-input devtools-searchinput",
-            value: previewText,
-            onBlur: this.onBlur,
-            onChange: this.onChange,
-            ref: input => {
-              this.fontPreviewInput = input;
-            }
-          }
-        )
-        :
-        null,
-      dom.img(
-        {
-          className: "font-preview",
-          src: previewUrl,
-          onClick: this.onClick,
-          title: !isFocused ? getStr("fontinspector.editPreview") : "",
-        }
-      )
+        className: "font-preview",
+        onClick: onPreviewClick,
+        src: previewUrl,
+      }
     );
   }
 }

devtools/client/inspector/fonts/test/head.js

@@ -61,7 +61,7 @@ var openFontInspectorForURL = async function(url) {
 };
 
 /**
- * Focus one of the preview inputs, clear it, type new text into it and wait for the
+ * Focus the preview input, clear it, type new text into it and wait for the
  * preview images to be updated.
  *
  * @param {FontInspector} view - The FontInspector instance.
@@ -71,15 +71,8 @@ async function updatePreviewText(view, text) {
   info(`Changing the preview text to '${text}'`);
 
   const doc = view.document;
-  const previewImg = doc.querySelector("#sidebar-panel-fontinspector .font-preview");
-
-  info("Clicking the font preview element to turn it to edit mode");
-  const onClick = once(doc, "click");
-  previewImg.click();
-  await onClick;
-
-  const input = previewImg.parentNode.querySelector("input");
-  is(doc.activeElement, input, "The input was focused.");
+  const input = doc.querySelector("#font-preview-input-container input");
+  input.focus();
 
   info("Blanking the input field.");
   while (input.value.length) {
@@ -89,13 +82,13 @@ async function updatePreviewText(view, text) {
   }
 
   if (text) {
-    info("Typing the specified text to the input field.");
-    const update = waitForNEvents(view.inspector, "fontinspector-updated", text.length);
+    info(`Typing "${text}" into the input field.`);
+    const update = view.inspector.once("fontinspector-updated");
     EventUtils.sendString(text, doc.defaultView);
     await update;
   }
 
-  is(input.value, text, "The input now contains the correct text.");
+  is(input.value, text, `The input now contains "${text}".`);
 }
 
 /**

devtools/client/locales/en-US/font-inspector.properties

@@ -17,11 +17,6 @@ fontinspector.noFontsOnSelectedElement=No fonts were found for the current eleme
 # header of a collapsible section containing other fonts used in the page.
 fontinspector.otherFontsInPageHeader=Other fonts in page
 
-# LOCALIZATION NOTE (fontinspector.editPreview): This is the text that appears in a
-# tooltip on hover of a font preview string. Clicking on the string opens a text input
-# where users can type to change the preview text.
-fontinspector.editPreview=Click to edit preview
-
 # LOCALIZATION NOTE (fontinspector.copyURL): This is the text that appears in a tooltip
 # displayed when the user hovers over the copy icon next to the font URL.
 # Clicking the copy icon copies the full font URL to the user's clipboard

devtools/client/themes/fonts.css

@@ -84,28 +84,6 @@
   vertical-align: bottom;
 }
 
-.font-preview-container {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  overflow: hidden;
-  display: grid;
-  place-items: center end;
-  position: relative;
-}
-
-.font-preview {
-  height: 50px;
-  display: block;
-}
-
-.font-preview:hover {
-  cursor: text;
-  background-image: linear-gradient(to right,
-    var(--grey-40) 3px, transparent 3px, transparent);
-  background-size: 6px 1px;
-  background-repeat: repeat-x;
-  background-position-y: 45px;
-}
 #font-preview-input-container {
   background: var(--preview-input-background);
   border-bottom: 1px solid var(--theme-splitter-color);
@@ -113,26 +91,18 @@
   height: 23px;
 }
 
-#font-container .font-preview-input {
-  position: absolute;
-  top: 5px;
-  left: 0;
-  width: calc(100% - 5px);
-  height: calc(100% - 10px);
-  background: transparent;
-  color: transparent;
-  border-radius: 0;
-  padding: 0;
-}
 #font-preview-input-container input {
   background-image: none;
   flex: 1;
   padding-left: 14px;
 }
 
-.font-preview-input::-moz-selection {
-  background: transparent;
-  color: transparent;
+.font-preview {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  object-fit: contain;
+  height: 50px;
+  width: 100%;
 }
 
 .font-name,