Cleaner debug strings

GoogleChrome · Nov 9, 2016 · 83e7b4c · 83e7b4c
1 parent c1421d9
commit 83e7b4c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -398,10 +398,19 @@ a {
   font-size: 14px;
   color: #D0021B;
   font-style: italic;
-  margin-top: 8px;
   padding: 8px 16px;
   max-width: 90%;
-  background-color: #eee;
+  display: inline-flex;
+  align-items: center;
+}
+
+.report-section__item-debug .info-icon {
+  height: 18px;
+  width: 18px;
+  background: url('data:image/svg+xml;utf8,<svg fill="#777" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/></svg>') no-repeat 50% 50%;
+  background-size: contain;
+  opacity: 0.6;
+  margin-right: 4px;
 }
 
 .report-section__item-help-toggle {

diff --git a/lighthouse-core/report/templates/report.html b/lighthouse-core/report/templates/report.html
@@ -130,8 +130,7 @@ <h1 class="report-section__subtitle">{{ aggregation.name }}</h1>
 
                   {{#if subItem.debugString }}
                     <div class="report-section__item-debug">
-                      <b>Audit debug info:</b>
-                      {{ subItem.debugString }}
+                      <span class="info-icon"></span> {{ subItem.debugString }}
                     </div>
                   {{/if}}