Bug 1463055 - Font editor: merge editor panel with overview (temporary until redesign). r=pbro draft
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 21 May 2018 10:22:53 +0200
changeset 797788 c5dd7e81b9e8d9c0f424727ee90f970cfe20b9f6
parent 797787 5636a361b0e2375b006763e5a39f1c59cdf1dea2
child 797789 7611eb6ef9511963bf7da25acd3cbbfff5a28c38
push id110568
push userbmo:rcaliman@mozilla.com
push dateMon, 21 May 2018 16:43:03 +0000
reviewerspbro
bugs1463055
milestone62.0a1
Bug 1463055 - Font editor: merge editor panel with overview (temporary until redesign). r=pbro MozReview-Commit-ID: 5QSEEGgsoPO
devtools/client/inspector/fonts/components/FontEditor.js
devtools/client/inspector/fonts/components/FontsApp.js
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -189,20 +189,17 @@ class FontEditor extends PureComponent {
     const hasSlantOrItalicAxis = hasFontAxes && font.variationAxes.find(axis => {
       return axis.tag === "slnt" || axis.tag === "ital";
     });
     const hasWeightAxis = hasFontAxes && font.variationAxes.find(axis => {
       return axis.tag === "wght";
     });
 
     return dom.div(
-      {
-        className: "theme-sidebar inspector-tabpanel",
-        id: "sidebar-panel-fontinspector"
-      },
+      {},
       // Always render UI for font family, format and font file URL.
       this.renderFontFamily(font),
       // Render UI for font variation instances if they are defined.
       hasFontInstances && this.renderInstances(font.variationInstances, instance),
       // Always render UI for font size.
       this.renderFontSize(properties["font-size"]),
       // Render UI for font weight if no "wght" registered axis is defined.
       !hasWeightAxis && this.renderFontWeight(properties["font-weight"]),
--- a/devtools/client/inspector/fonts/components/FontsApp.js
+++ b/devtools/client/inspector/fonts/components/FontsApp.js
@@ -33,31 +33,31 @@ class FontsApp extends PureComponent {
       fontEditor,
       fontOptions,
       onInstanceChange,
       onPreviewFonts,
       onPropertyChange,
       onToggleFontHighlight,
     } = this.props;
 
+    const hasFonts = fontEditor.fonts.length > 0;
+
     return dom.div(
       {
         className: "theme-sidebar inspector-tabpanel",
         id: "sidebar-panel-fontinspector"
       },
-      fontEditor.isVisible ?
-        FontEditor({
-          fontEditor,
-          onInstanceChange,
-          onPropertyChange,
-        })
-        :
-        FontOverview({
-          fontData,
-          fontOptions,
-          onPreviewFonts,
-          onToggleFontHighlight,
-        })
+      hasFonts && FontEditor({
+        fontEditor,
+        onInstanceChange,
+        onPropertyChange,
+      }),
+      FontOverview({
+        fontData,
+        fontOptions,
+        onPreviewFonts,
+        onToggleFontHighlight,
+      })
     );
   }
 }
 
 module.exports = connect(state => state)(FontsApp);