Merge pull request #2242 from ossreleasefeed/bug1038608-missing-symbo…

…ls-styling Fix Bug 1038608, finish styling for missing symbols
mozilla-services · Jul 25, 2014 · 3c3e148 · 3c3e148
2 parents 7caa658 + 76d859c
commit 3c3e148
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/webapp-django/crashstats/crashstats/static/crashstats/css/tables.less b/webapp-django/crashstats/crashstats/static/crashstats/css/tables.less
@@ -16,6 +16,12 @@ table.data-table {
         tr:hover {
             background-color: #D9D9D9;
         }
+        tr.missingsymbols,
+        tr.missingsymbols:hover {
+            background-color: #8f0222;
+            color: white;
+            border-top: 2px solid white;
+        }
     }
 }
 table.captioned-data-table {
@@ -79,3 +85,22 @@ table.vertical {
         font-weight: bold;
     }
 }
+/**
+ * Adds a little flyout to the left of a row in
+ * order to draw attention or display a notice.
+ */
+.row-notice {
+    display: inline-block;
+    position: absolute;
+    left: 15px;
+    background-color: #D33419;
+    color: white;
+    margin-top: -6px;
+    padding: .5rem .5rem .2rem;
+    border-radius: 6px 0 0 6px;
+    width: 26px;
+    font-size: 1.6rem;
+    line-height: 125%;
+    font-weight: bold;
+    text-align: center;
+}
diff --git a/webapp-django/crashstats/crashstats/templates/crashstats/report_index.html b/webapp-django/crashstats/crashstats/templates/crashstats/report_index.html
@@ -10,9 +10,6 @@
   #details th, #metadata th {
       width: 15%;
   }
-  .missingsymbols {
-    border: 2px solid darksalmon;
-  }
   </style>
   {% endcompress %}
 
@@ -356,7 +353,12 @@ <h2>Crashing Thread</h2>
               <tbody>
                 {% for frame in parsed_dump.threads[parsed_dump.crash_info.crashing_thread].frames %}
                 <tr class="{%if frame.missing_symbols %}missingsymbols{% endif %}">
-                  <td>{{ frame.frame }}</td>
+                  <td>
+                      {%if frame.missing_symbols %}
+                          <span class="row-notice" title="missing symbol">&Oslash;</span>
+                      {% endif %}
+                      {{ frame.frame }}
+                  </td>
                   <td>{{ frame.module }}</td>
                   <td title="{{ frame.signature }}">{{ frame.signature }}</td>
                   {% if frame.source_link %}
@@ -392,7 +394,12 @@ <h2>Thread {{ thread.thread }}</h2>
                 <tbody>
                   {% for frame in thread.frames %}
                   <tr class="{%if frame.missing_symbols %}missingsymbols{% endif %}">
-                    <td>{{ frame.frame }}</td>
+                    <td>
+                        {%if frame.missing_symbols %}
+                            <span class="row-notice" title="missing symbol">&Oslash;</span>
+                        {% endif %}
+                        {{ frame.frame }}
+                    </td>
                     <td>{{ frame.module }}</td>
                     <td title="{{ frame.signature }}">{{ frame.signature }}</td>
                     {% if frame.source_link %}