[CSS Overview] Tidies styles; adds localized string
[email protected]
Change-Id: I8b7f3ecde8f05f728245fbb32421a977b48a33a6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1886822
Reviewed-by: Tim van der Lippe <[email protected]>
Commit-Queue: Paul Lewis <[email protected]>
diff --git a/front_end/css_overview/CSSOverviewCompletedView.js b/front_end/css_overview/CSSOverviewCompletedView.js
index dde532d..d68608e 100644
--- a/front_end/css_overview/CSSOverviewCompletedView.js
+++ b/front_end/css_overview/CSSOverviewCompletedView.js
@@ -274,14 +274,20 @@
<div $="ignored-rules" class="results-section unused-rules">
<h1>${ls`Unused rules`}</h1>
- ${unusedRules.length > 0 ? this._unusedRulesGrid.element : `There are no unused rules.`}
+ ${
+ unusedRules.length > 0 ?
+ this._unusedRulesGrid.element :
+ UI.Fragment.build`<div class="horizontally-padded">${ls`There are no unused rules.`}</div>`}
</div>
<!-- TODO: Fonts -->
<div $="media-queries" class="results-section media-queries">
<h1>${ls`Media queries`}</h1>
- ${mediaQueries.length > 0 ? this._mediaQueryGrid.element : `There are no media queries.`}
+ ${
+ mediaQueries.length > 0 ?
+ this._mediaQueryGrid.element :
+ UI.Fragment.build`<div class="horizontally-padded">${ls`There are no media queries.`}</div>`}
</div>
</div>`;
diff --git a/front_end/css_overview/cssOverviewCompletedView.css b/front_end/css_overview/cssOverviewCompletedView.css
index 4961691..69ed01c 100644
--- a/front_end/css_overview/cssOverviewCompletedView.css
+++ b/front_end/css_overview/cssOverviewCompletedView.css
@@ -97,8 +97,9 @@
padding: var(--overview-default-padding) 0 var(--overview-default-padding) 0;
}
-.results-section.horizontally-padded {
- padding: var(--overview-default-padding);
+.horizontally-padded {
+ padding-left: var(--overview-default-padding);
+ padding-right: var(--overview-default-padding);
}
.results-section h1 {
diff --git a/front_end/css_overview/css_overview_strings.grdp b/front_end/css_overview/css_overview_strings.grdp
index 25079a8..cd654bd 100644
--- a/front_end/css_overview/css_overview_strings.grdp
+++ b/front_end/css_overview/css_overview_strings.grdp
@@ -27,6 +27,9 @@
<message name="IDS_DEVTOOLS_23717568804f63f75e7596dcced3119e" desc="Label for the number of universal selectors in the CSS Overview report">
Universal selectors
</message>
+ <message name="IDS_DEVTOOLS_2a8d89583e80580b7c9fbdba5e249562" desc="Message to show when no media queries are found in the target page">
+ There are no media queries.
+ </message>
<message name="IDS_DEVTOOLS_35870a8141aef89d26337451a06be0d6" desc="Label for unique fill colors in the CSS Overview Panel">
Unique fill colors: <ph name="SORTEDFILLCOLORS_LENGTH">$1s<ex>32</ex></ph>
</message>
@@ -51,6 +54,9 @@
<message name="IDS_DEVTOOLS_8a2d39bc733e82310760e2767889673a" desc="Title of the CSS Overview Panel">
CSS Overview
</message>
+ <message name="IDS_DEVTOOLS_93936d5ce040a34f129f1211a1efac9c" desc="Message to show when no unused rules in the target page">
+ There are no unused rules.
+ </message>
<message name="IDS_DEVTOOLS_95d366a44bd7bad09d9916e05b512cc6" desc="Label for the number of External stylesheets in the CSS Overview report">
External stylesheets
</message>
