Changed ul/li in backtrace 'table' to th/td. Subpixel rendering caused the lines…

… to go out of sync depending on zoom levels for webkit browsers. Sure, you shouldn't use tables for layouts, but when you have a 'heading' and a 'column' for a 'table' of data ... that's what they're for! [ci skip]

Changed ul/li in backtrace 'table' to th/td. Subpixel rendering caused the lines…
… to go out of sync depending on zoom levels for webkit browsers. Sure, you shouldn't use tables for layouts, but when you have a 'heading' and a 'column' for a 'table' of data ... that's what they're for! [ci skip]
Nathan Broadbent
1 parent 34f719db
Showing 2 changed files with 35 additions and 24 deletions Show diff stats
app/views/notices/_backtrace.html.haml
public/stylesheets/application.css
 .window
   %table.backtrace
-    %tr
+    %tr.padding
+      %th
+      %td
+    - lines.each do |line|
+      %tr
+        %th.line-numbers= line_number_with_link(@app, line)
+        %td.lines{:class => (Notice.in_app_backtrace_line?(line) ? 'in-app' : nil)}
+          = line['file']
+          &rarr;
+          %strong= line['method']
+    %tr.padding
       %th
-        %ul.line-numbers
-          - lines.each do |line|
-            %li= line_number_with_link(@app, line)
       %td
-        %ul.lines
-          - lines.each do |line|
-            - in_app = line['file'].to_s.gsub!('[PROJECT_ROOT]','') && !line['file'].to_s.match(/^\/vendor\//)
-            %li{:class => (in_app ? 'in-app' : nil)}
-              = line['file']
-              &rarr;
-              %strong= line['method']
@@ -683,38 +683,49 @@ table.deploys td.when {
   margin: 0;
 }
+table.backtrace td, table.backtrace th {
+  border-top: none;
+}
 table.backtrace td {
   width: 100%;
   padding: 0;
   margin: 0;
   color: #C7C7C7;
-  background-color: #222 !important;
-}
-table.backtrace ul.line-numbers {
-  padding-top: 1px;
+  background-color: #222;
 }
-table.backtrace ul.line-numbers li {
+
+/* remove alternating color rules */
+table.backtrace tr:nth-child(2n+1) td { background-color: #222; }
+table.backtrace tr:first-child td { border-top: 0; }
+
+table.backtrace th.line-numbers {
   border-bottom: 1px solid #F0F0F0;
   font-size: 13px;
-  line-height: 20px;
   text-align: right;
+  vertical-align: middle;
+  padding: 1px 6px 1px 7px;
 }
-table.backtrace ul.lines {
-  padding: 10px 8px;
-  overflow: auto;
-}
-table.backtrace ul.lines li {
+table.backtrace td.lines {
   border-bottom: 1px solid #2A2A2A;
   font-size: 13px;
-  line-height: 20px;
+  padding-left: 8px;
+  vertical-align: middle;
   white-space: nowrap;
 }
-table.backtrace ul.lines li.in-app {
+table.backtrace td.lines.in-app {
   color: #2adb2e;
   background-color: #2f2f2f;
 }
+/* Extra empty rows at top and bottom of table */
+table.backtrace tr.padding th, table.backtrace tr.padding td {
+  height: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+
 span.click_span {
   font-size: 0.7em;
 }