DevTools: CssChecker: avoid selector crafting in AuditsPanel.

BUG=405921

Review URL: https://codereview.chromium.org/721133003

git-svn-id: svn://svn.chromium.org/blink/trunk@185422 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/audits/audits-panel-functional-expected.txt

@@ -3,19 +3,19 @@ Tests audit rules.
    Text Link
 Page reloaded.
  Network Utilization
-    [severity-severe] Combine external JavaScript (4)
+    [severity severe] Combine external JavaScript (4)
      There are multiple resources served from same domain. Consider combining them into as few files as possible.
       4 JavaScript resources served from [domain].
-    [severity-warning] Specify image dimensions (2)
+    [severity warning] Specify image dimensions (2)
      A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:
        foo1.jpg
        foo2.jpg
  Web Page Performance
-    [severity-severe] Optimize the order of styles and scripts (2)
+    [severity severe] Optimize the order of styles and scripts (2)
      The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
        audits-style1.css
       1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
-    [severity-severe] Put CSS in the document head (2)
+    [severity severe] Put CSS in the document head (2)
      CSS in the document body adversely impacts rendering performance.
      1 style block(s) in the 
       audits-panel-functional.html
@@ -24,7 +24,7 @@ Page reloaded.
       audits-style1.css
       should be moved to the document head in 
       audits-panel-functional.html
-    [severity-warning] Remove unused CSS rules (10)
+    [severity warning] Remove unused CSS rules (10)
      10 rules (50%) of CSS not used by the current page.
       Inline block #1: 41% is not used by the current page.
        .unused
@@ -42,7 +42,7 @@ Page reloaded.
        audits-style1.css
       : 100% is not used by the current page.
        .some-style
-    [severity-warning] Use normal CSS property names instead of vendor-prefixed ones (2)
+    [severity warning] Use normal CSS property names instead of vendor-prefixed ones (2)
       audits-panel-functional.html
        .unused
        "-webkit-opacity" is used, but "opacity" is supported.

third_party/WebKit/LayoutTests/inspector/audits/audits-panel-noimages-functional-expected.txt

 Tests audit rules on a page without images.
 Page reloaded.
  Network Utilization
-    [severity-severe] Combine external JavaScript (4)
+    [severity severe] Combine external JavaScript (4)
      There are multiple resources served from same domain. Consider combining them into as few files as possible.
       4 JavaScript resources served from [domain].
  Web Page Performance
-    [severity-severe] Optimize the order of styles and scripts (3)
+    [severity severe] Optimize the order of styles and scripts (3)
       3 inline script blocks were found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
-    [severity-severe] Put CSS in the document head (2)
+    [severity severe] Put CSS in the document head (2)
      CSS in the document body adversely impacts rendering performance.
      1 style block(s) in the 
       audits-panel-noimages-functional.html
@@ -16,7 +16,7 @@ Page reloaded.
       audits-style1.css
       should be moved to the document head in 
       audits-panel-noimages-functional.html
-    [severity-warning] Remove unused CSS rules (5)
+    [severity warning] Remove unused CSS rules (5)
      5 rules (100%) of CSS not used by the current page.
       Inline block #1: 100% is not used by the current page.
        .unused

third_party/WebKit/LayoutTests/inspector/extensions/extensions-audits-content-script-expected.txt

@@ -4,7 +4,7 @@ Tests audit formatters performing evals on content scripts in WebInspector Exten
 Running tests...
 RUNNING TEST: extension_testAudits
  Extension audits
-    [severity-warning] Rule with details subtree (1)
+    [severity warning] Rule with details subtree (1)
       Test Formatters
            main world object
             whereAmI

third_party/WebKit/LayoutTests/inspector/extensions/extensions-audits-expected.txt

@@ -6,9 +6,9 @@ RUNNING TEST: extension_testAudits
 Progress: 50%
 Progress: 75%
  Extension audits
-    [severity-severe] Failed rule (42)
+    [severity severe] Failed rule (42)
      this rule always fails
-    [severity-warning] Rule with details subtree (1)
+    [severity warning] Rule with details subtree (1)
      This rule has a lot of details
       Subtree
        Some url: 
@@ -44,7 +44,7 @@ Progress: 75%
                  /span
                 >
          extensions-audits.html:20
-    [severity-info] Passed rule
+    [severity info] Passed rule
      this rule always passes ok
  Extension audits that fail
 category.onAuditStarted fired

third_party/WebKit/Source/devtools/front_end/audits/AuditResultView.js

@@ -103,7 +103,7 @@ WebInspector.AuditCategoryResultPane.prototype = {
         var titleFragment = createDocumentFragment();
         if (severity) {
             var severityElement = createElement("div");
-            severityElement.className = "severity-" + severity;
+            severityElement.classList.add("severity", severity);
             titleFragment.appendChild(severityElement);
         }
         titleFragment.createTextChild(title);

third_party/WebKit/Source/devtools/front_end/audits/auditsPanel.css

@@ -121,9 +121,7 @@
     display: block;
 }
 
-.audit-result-view .severity-severe,
-.audit-result-view .severity-warning,
-.audit-result-view .severity-info {
+.audit-result-view .severity {
     background-image: url(Images/statusbarButtonGlyphs.png);
     background-size: 320px 144px;
     display: inline-block;
@@ -136,22 +134,20 @@
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
-.audit-result-view .severity-severe,
-.audit-result-view .severity-warning,
-.audit-result-view .severity-info {
+.audit-result-view .severity {
     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 }
 } /* media */
 
-.audit-result-view .severity-severe {
+.audit-result-view .severity.severe {
     background-position: -224px -96px;
 }
 
-.audit-result-view .severity-warning {
+.audit-result-view .severity.warning {
     background-position: -246px -96px;
 }
 
-.audit-result-view .severity-info {
+.audit-result-view .severity.info {
     background-position: -235px -96px;
 }