Problems panel: add an icon per problem to tell which type it is (#13430)

Author: ficristo

src/htmlContent/problems-panel-table.html

@@ -2,7 +2,7 @@
     <tbody>
         {{#reportList}}
         <tr class="inspector-section">
-            <td colspan="3">
+            <td colspan="4">
                 <span class="disclosure-triangle {{#isExpanded}}expanded{{/isExpanded}}"></span>
                 <input type="hidden" value="{{providerName}}" />
                 {{providerName}} ({{results.length}})
@@ -11,6 +11,9 @@
         {{#results}}
         <tr class="{{display}}">
             <td class="line-number" data-character="{{pos.ch}}">{{friendlyLine}}</td>
+            <td class="line-icon">
+                <div class="line-icon-default line-icon-{{type}}"></div>
+            </td>
             <td class="line-text">{{message}}</td>
             <td class="line-snippet">{{codeSnippet}}</td>
         </tr>

src/styles/brackets.less

@@ -2112,9 +2112,33 @@ textarea.exclusions-editor {
         text-align: right;  // make line number line up with editor line numbers
     }
 
+    .line-icon {
+        vertical-align: middle;
+
+        .line-icon-default {
+            width: 20px;
+            height: 18px;
+            background-image: url(images/topcoat-inactive-15.svg);
+            background-repeat: no-repeat;
+            background-position: 0px 1px;
+        }
+
+        // Add an image based on the type of the problem.
+        .line-icon-problem_type_error {
+            background-image: url(images/topcoat-error-15.svg);
+        }
+        .line-icon-problem_type_warning {
+            background-image: url(images/topcoat-warning-15.svg);
+        }
+        .line-icon-problem_type_meta {
+            background-image: url(images/topcoat-inactive-15.svg);
+        }
+    }
+
     .line-text {
         white-space: nowrap;
         width: auto;
+        padding-left: 5px;
     }
 
     .line-snippet {