core(dom-size): remove formatNumber

lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js

@@ -401,11 +401,11 @@ const expectations = [
           numericValue: 148,
           details: {
             items: [
-              {statistic: 'Total DOM Elements', value: '148'},
-              {statistic: 'Maximum DOM Depth', value: '4'},
+              {statistic: 'Total DOM Elements', value: 148},
+              {statistic: 'Maximum DOM Depth', value: 4},
               {
                 statistic: 'Maximum Child Elements',
-                value: '100',
+                value: 100,
                 element: {value: '<div id="shadow-root-container">'},
               },
             ],

lighthouse-core/audits/dobetterweb/dom-size.js

@@ -13,8 +13,7 @@
 'use strict';
 
 const Audit = require('../audit.js');
-const I18n = require('../../report/html/renderer/i18n.js');
-const i18n_ = require('../../lib/i18n/i18n.js');
+const i18n = require('../../lib/i18n/i18n.js');
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM elements and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -42,7 +41,7 @@ const UIStrings = {
   statisticDOMWidth: 'Maximum Child Elements',
 };
 
-const str_ = i18n_.createMessageInstanceIdFn(__filename, UIStrings);
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class DOMSize extends Audit {
   /**
@@ -88,35 +87,32 @@ class DOMSize extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'statistic', itemType: 'text', text: str_(UIStrings.columnStatistic)},
-      {key: 'element', itemType: 'code', text: str_(i18n_.UIStrings.columnElement)},
+      {key: 'element', itemType: 'code', text: str_(i18n.UIStrings.columnElement)},
       {key: 'value', itemType: 'numeric', text: str_(UIStrings.columnValue)},
     ];
 
-    const i18n = new I18n(context.settings.locale);
-
     /** @type {LH.Audit.Details.Table['items']} */
     const items = [
       {
         statistic: str_(UIStrings.statisticDOMElements),
         element: '',
-        // TODO: these values should be numbers once `_renderNumeric` in details-renderer can handle them
-        value: i18n.formatNumber(stats.totalBodyElements),
+        value: stats.totalBodyElements,
       },
       {
         statistic: str_(UIStrings.statisticDOMDepth),
         element: {
           type: 'code',
           value: stats.depth.snippet,
         },
-        value: i18n.formatNumber(stats.depth.max),
+        value: stats.depth.max,
       },
       {
         statistic: str_(UIStrings.statisticDOMWidth),
         element: {
           type: 'code',
           value: stats.width.snippet,
         },
-        value: i18n.formatNumber(stats.width.max),
+        value: stats.width.max,
       },
     ];
 

lighthouse-core/test/audits/dobetterweb/dom-size-test.js

@@ -27,9 +27,9 @@ describe('DOMSize audit', () => {
     assert.equal(auditResult.score, 0.43);
     assert.equal(auditResult.numericValue, numElements);
     expect(auditResult.displayValue).toBeDisplayString('1,500 elements');
-    assert.equal(auditResult.details.items[0].value, numElements.toLocaleString());
-    assert.equal(auditResult.details.items[1].value, '1');
-    assert.equal(auditResult.details.items[2].value, '2');
+    assert.equal(auditResult.details.items[0].value, numElements);
+    assert.equal(auditResult.details.items[1].value, 1);
+    assert.equal(auditResult.details.items[2].value, 2);
   });
 
   it('calculates score hitting top distribution', () => {

lighthouse-core/test/results/sample_v2.json

@@ -3626,23 +3626,23 @@
           {
             "statistic": "Total DOM Elements",
             "element": "",
-            "value": "31"
+            "value": 31
           },
           {
             "statistic": "Maximum DOM Depth",
             "element": {
               "type": "code",
               "value": "<h2>"
             },
-            "value": "3"
+            "value": 3
           },
           {
             "statistic": "Maximum Child Elements",
             "element": {
               "type": "code",
               "value": "<body>"
             },
-            "value": "29"
+            "value": 29
           }
         ]
       }