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;
 }
1	1	.window
2	2	%table.backtrace
3		- %tr
	3	+ %tr.padding
	4	+ %th
	5	+ %td
	6	+ - lines.each do \|line\|
	7	+ %tr
	8	+ %th.line-numbers= line_number_with_link(@app, line)
	9	+ %td.lines{:class => (Notice.in_app_backtrace_line?(line) ? 'in-app' : nil)}
	10	+ = line['file']
	11	+ →
	12	+ %strong= line['method']
	13	+ %tr.padding
4	14	%th
5		- %ul.line-numbers
6		- - lines.each do \|line\|
7		- %li= line_number_with_link(@app, line)
8	15	%td
9		- %ul.lines
10		- - lines.each do \|line\|
11		- - in_app = line['file'].to_s.gsub!('[PROJECT_ROOT]','') && !line['file'].to_s.match(/^\/vendor\//)
12		- %li{:class => (in_app ? 'in-app' : nil)}
13		- = line['file']
14		- →
15		- %strong= line['method']
16	16
...	...
...	...	@@ -683,38 +683,49 @@ table.deploys td.when {
683	683	margin: 0;
684	684	}
685	685
	686	+table.backtrace td, table.backtrace th {
	687	+ border-top: none;
	688	+}
686	689	table.backtrace td {
687	690	width: 100%;
688	691	padding: 0;
689	692	margin: 0;
690	693	color: #C7C7C7;
691		- background-color: #222 !important;
692		-}
693		-table.backtrace ul.line-numbers {
694		- padding-top: 1px;
	694	+ background-color: #222;
695	695	}
696		-table.backtrace ul.line-numbers li {
	696	+
	697	+/* remove alternating color rules */
	698	+table.backtrace tr:nth-child(2n+1) td { background-color: #222; }
	699	+table.backtrace tr:first-child td { border-top: 0; }
	700	+
	701	+table.backtrace th.line-numbers {
697	702	border-bottom: 1px solid #F0F0F0;
698	703	font-size: 13px;
699		- line-height: 20px;
700	704	text-align: right;
	705	+ vertical-align: middle;
	706	+ padding: 1px 6px 1px 7px;
701	707	}
702	708
703		-table.backtrace ul.lines {
704		- padding: 10px 8px;
705		- overflow: auto;
706		-}
707		-table.backtrace ul.lines li {
	709	+table.backtrace td.lines {
708	710	border-bottom: 1px solid #2A2A2A;
709	711	font-size: 13px;
710		- line-height: 20px;
	712	+ padding-left: 8px;
	713	+ vertical-align: middle;
711	714	white-space: nowrap;
712	715	}
713		-table.backtrace ul.lines li.in-app {
	716	+table.backtrace td.lines.in-app {
714	717	color: #2adb2e;
715	718	background-color: #2f2f2f;
716	719	}
717	720
	721	+/* Extra empty rows at top and bottom of table */
	722	+table.backtrace tr.padding th, table.backtrace tr.padding td {
	723	+ height: 10px;
	724	+ margin: 0;
	725	+ padding: 0;
	726	+}
	727	+
	728	+
718	729	span.click_span {
719	730	font-size: 0.7em;
720	731	}
...	...