Bug 1960743 - Add line breaks and indentation in Fonts panel @font-face description. r=devtools-reviewers,nchevobbe

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

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

@@ -60,17 +60,44 @@ class Font extends PureComponent {
       return null;
     }
 
+    const { isFontFaceRuleExpanded } = this.state;
+
     // Cut the rule text in 3 parts: the selector, the declarations, the closing brace.
     // This way we can collapse the declarations by default and display an expander icon
     // to expand them again.
     const leading = ruleText.substring(0, ruleText.indexOf("{") + 1);
-    const body = ruleText.substring(
-      ruleText.indexOf("{") + 1,
-      ruleText.lastIndexOf("}")
-    );
+
     const trailing = ruleText.substring(ruleText.lastIndexOf("}"));
 
-    const { isFontFaceRuleExpanded } = this.state;
+    let body;
+    if (isFontFaceRuleExpanded) {
+      const ruleBodyText = ruleText
+        .substring(ruleText.indexOf("{") + 1, ruleText.lastIndexOf("}"))
+        .trim();
+
+      const indent = "  ";
+      body = "\n";
+      const lexer = new InspectorCSSParser(ruleBodyText);
+      let token;
+      let isNewLine = true;
+      while ((token = lexer.nextToken())) {
+        if (isNewLine) {
+          // If we just added a new line, ignore any whitespace as we'll handle the
+          // indentation ourselves.
+          if (token.tokenType === "WhiteSpace") {
+            continue;
+          }
+          body += indent;
+          isNewLine = false;
+        }
+
+        body += token.text;
+        if (token.tokenType === "Semicolon") {
+          body += "\n";
+          isNewLine = true;
+        }
+      }
+    }
 
     return dom.pre(
       {

devtools/client/inspector/fonts/test/browser_fontinspector_expand-css-code.js

@@ -22,7 +22,7 @@ add_task(async function () {
   const onExpanded = BrowserTestUtils.waitForCondition(() => {
     return (
       codeEl.textContent ===
-      `@font-face { font-family: bar; src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype"); }`
+      `@font-face {\n  font-family: bar;\n  src: url("bad/font/name.ttf"), url("ostrich-regular.ttf") format("truetype");\n}`
     );
   }, "Waiting for the font-face rule 1");
 

devtools/client/themes/fonts.css

@@ -180,6 +180,9 @@
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-indent: 4ch hanging each-line;
   color: var(--theme-text-color-strong);
   grid-column: span 2;
 }