[devtools] Clean up utilities

This patch simplifies some utility methods by applying the following
changes:

1) `type=text/css` is the implicit default for <style> elements and for
    <link rel=stylesheet>. Thus, we should omit it in those cases.
    This additionally reduces visual clutter in various places,
    including the elements pane when inspecting DevTools using DevTools.

2) Prefer `const` over `let` even in dynamically generated scripts,
   matching Google's JS style guide.

3) Simplify `leadZero` by leveraging `String.prototype.padStart`, which
   shipped in Chrome 51.

BUG=v8:9396

Change-Id: I50d0b88ff9c9c2791a194d2f50445e4a561e3a23
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1803929Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697104}

third_party/blink/renderer/devtools/front_end/devtools_compatibility.js

@@ -1457,7 +1457,6 @@
    */
   function createStyleElement(styleText) {
     const style = document.createElement('style');
-    style.type = 'text/css';
     style.textContent = styleText;
     return style;
   }

third_party/blink/renderer/devtools/front_end/elements/ElementsTreeOutline.js

@@ -934,7 +934,6 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
 
       style = document.createElement('style');
       style.id = styleTagId;
-      style.type = 'text/css';
       style.textContent = rule;
 
       localRoot.appendChild(style);

third_party/blink/renderer/devtools/front_end/test_runner/TestRunner.js

@@ -577,14 +577,13 @@ TestRunner.addScriptTag = function(path) {
 TestRunner.addStylesheetTag = function(path) {
   return TestRunner.evaluateInPageAsync(`
     (function(){
-      let link = document.createElement('link');
+      const link = document.createElement('link');
       link.rel = 'stylesheet';
-      link.type = 'text/css';
       link.href = '${path}';
       link.onload = onload;
       document.head.append(link);
       let resolve;
-      let promise = new Promise(r => resolve = r);
+      const promise = new Promise(r => resolve = r);
       function onload() {
         // TODO(chenwilliam): It shouldn't be necessary to force
         // style recalc here but some tests rely on it.
@@ -603,10 +602,10 @@ TestRunner.addStylesheetTag = function(path) {
 TestRunner.addHTMLImport = function(path) {
   return TestRunner.evaluateInPageAsync(`
     (function(){
-      let link = document.createElement('link');
+      const link = document.createElement('link');
       link.rel = 'import';
       link.href = '${path}';
-      let promise = new Promise(r => link.onload = r);
+      const promise = new Promise(r => link.onload = r);
       document.body.append(link);
       return promise;
     })();
@@ -626,7 +625,7 @@ TestRunner.addIframe = function(path, options = {}) {
   options.name = options.name || '';
   return TestRunner.evaluateInPageAsync(`
     (function(){
-      let iframe = document.createElement('iframe');
+      const iframe = document.createElement('iframe');
       iframe.src = '${path}';
       iframe.id = '${options.id}';
       iframe.name = '${options.name}';

third_party/blink/renderer/devtools/front_end/ui/UIUtils.js

@@ -1287,14 +1287,12 @@ UI.appendStyle = function(node, cssFile) {
   if (!content)
     console.error(cssFile + ' not preloaded. Check module.json');
   let styleElement = createElement('style');
-  styleElement.type = 'text/css';
   styleElement.textContent = content;
   node.appendChild(styleElement);
 
   const themeStyleSheet = UI.themeSupport.themeStyleSheet(cssFile, content);
   if (themeStyleSheet) {
     styleElement = createElement('style');
-    styleElement.type = 'text/css';
     styleElement.textContent = themeStyleSheet + '\n' + Runtime.resolveSourceURL(cssFile + '.theme');
     node.appendChild(styleElement);
   }
@@ -1702,7 +1700,6 @@ UI.ThemeSupport = class {
   injectCustomStyleSheets(element) {
     for (const sheet of this._customSheets){
       const styleElement = createElement('style');
-      styleElement.type = 'text/css';
       styleElement.textContent = sheet;
       element.appendChild(styleElement);
     }
@@ -1732,7 +1729,6 @@ UI.ThemeSupport = class {
     result.push('/*# sourceURL=inspector.css.theme */');
 
     const styleElement = createElement('style');
-    styleElement.type = 'text/css';
     styleElement.textContent = result.join('\n');
     document.head.appendChild(styleElement);
   }
@@ -1750,7 +1746,6 @@ UI.ThemeSupport = class {
     let patch = this._cachedThemePatches.get(id);
     if (!patch) {
       const styleElement = createElement('style');
-      styleElement.type = 'text/css';
       styleElement.textContent = text;
       document.body.appendChild(styleElement);
       patch = this._patchForTheme(id, styleElement.sheet);
@@ -2115,8 +2110,7 @@ UI.formatTimestamp = function(timestamp, full) {
    * @return {string}
    */
   function leadZero(value, length) {
-    const valueString = value.toString();
-    const padding = length - valueString.length;
-    return padding <= 0 ? valueString : '0'.repeat(padding) + valueString;
+    const valueString = String(value);
+    return valueString.padStart(length, '0');
   }
 };

third_party/blink/web_tests/http/tests/devtools/elements/elements-panel-correct-case-expected.txt

@@ -4,7 +4,7 @@ Tests that elements panel shows all types of elements in the correct case.
 - <html>
     - <head>
           <base href="http://127.0.0.1:8000/devtools/elements/">
-          <link rel="stylesheet" type="text/css" href="resources/elements-panel-styles.css">
+          <link rel="stylesheet" href="resources/elements-panel-styles.css">
       </head>
     - <body>
         - <svg>

third_party/blink/web_tests/http/tests/devtools/security/interstitial-sidebar-expected.txt

@@ -3,13 +3,13 @@ Tests that the sidebar origin list disappears and appers when an interstitial is
 Before interstitial is shown:
 <DIV >
     <#document-fragment >
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
         <DIV class=tree-outline-disclosure >
             <OL class=tree-outline role=tree tabindex=-1 >
@@ -115,22 +115,22 @@ Unknown / canceled
                 </OL>
             </OL>
         </DIV>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
     </#document-fragment>
 </DIV>
 After interstitial is shown:
 <DIV >
     <#document-fragment >
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
         <DIV class=tree-outline-disclosure >
             <OL class=tree-outline role=tree tabindex=-1 >
@@ -236,22 +236,22 @@ Unknown / canceled
                 </OL>
             </OL>
         </DIV>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
     </#document-fragment>
 </DIV>
 After interstitial is hidden:
 <DIV >
     <#document-fragment >
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
         <DIV class=tree-outline-disclosure >
             <OL class=tree-outline role=tree tabindex=-1 >
@@ -357,9 +357,9 @@ Unknown / canceled
                 </OL>
             </OL>
         </DIV>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
     </#document-fragment>
 </DIV>

third_party/blink/web_tests/http/tests/devtools/security/mixed-content-sidebar-expected.txt

@@ -3,13 +3,13 @@ Tests that the sidebar uses the correct styling for mixed content subresources.
 Origin sidebar:
 <DIV >
     <#document-fragment >
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
         <DIV class=tree-outline-disclosure >
             <OL class=tree-outline role=tree tabindex=-1 >
@@ -115,9 +115,9 @@ Unknown / canceled
                 </OL>
             </OL>
         </DIV>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
-        <STYLE type=text/css >
+        <STYLE >
         </STYLE>
     </#document-fragment>
 </DIV>

third_party/blink/web_tests/http/tests/devtools/security/origin-view-ct-compliance-expected.txt

@@ -2,9 +2,9 @@ Tests that the panel includes Certificate Transparency compliance status
 
 Panel on origin view:
 <DIV class=widget vbox security-origin-view slot=insertion-point-main >
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
     <DIV class=title-section >
         <DIV class=title-section-header role=heading aria-level=1 >

third_party/blink/web_tests/http/tests/devtools/security/origin-view-noncryptographic-secure-origin-expected.txt

@@ -2,9 +2,9 @@ Tests that the panel shows the correct text for non-cryptographic secure origins
 
 Panel on origin view:
 <DIV class=widget vbox security-origin-view slot=insertion-point-main >
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
     <DIV class=title-section >
         <DIV class=title-section-header role=heading aria-level=1 >

third_party/blink/web_tests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt

@@ -30,9 +30,9 @@ Security overview
 </DIV>
 Panel on origin view before interstitial:
 <DIV class=widget vbox security-origin-view slot=insertion-point-main >
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
     <DIV class=title-section >
         <DIV class=title-section-header role=heading aria-level=1 >

third_party/blink/web_tests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt

@@ -46,9 +46,9 @@ bar.test
 </SPAN>
 Origin view ------------------------------------
 <DIV class=widget vbox security-origin-view slot=insertion-point-main >
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
-    <STYLE type=text/css >
+    <STYLE >
     </STYLE>
     <DIV class=title-section >
         <DIV class=title-section-header role=heading aria-level=1 >