Skip to content

GitLab

T
tangled
Commit afee7cdd authored by Mathias Bynens's avatar Mathias Bynens Committed by Commit Bot
Browse files
Options

[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: default avatarYang Guo <yangguo@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697104}
parent 3aec5a35
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 49 deletions
third_party/blink/renderer/devtools/front_end/devtools_compatibility.js
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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
View file @ afee7cdd
......@@ -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 >
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment