prefix timeline and query with djdt to avoid conflicting class names

Author: Brobin

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -503,7 +503,7 @@
 #djDebug .highlight .s2 { color:#333 } /* Literal.String.Double */
 #djDebug .highlight .cp { color:#333 } /* Comment.Preproc */
 
-#djDebug .timeline {
+#djDebug .djdt-timeline {
     width: 30%;
 }
 #djDebug .djDebugTimeline {

debug_toolbar/static/debug_toolbar/js/toolbar.timer.js

@@ -24,13 +24,13 @@
         if (endStat) {
             // Render a start through end bar
 	    $row.html('<td>' + stat.replace('Start', '') + '</td>' +
-                      '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
+                      '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
                       '<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
             $row.find('strong').css({width: getCSSWidth(stat, endStat)});
         } else {
             // Render a point in time
             $row.html('<td>' + stat + '</td>' +
-                      '<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
+                      '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
                       '<td>' + (perf.timing[stat] - timingOffset) + '</td>');
             $row.find('strong').css({width: 2});
         }

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -18,8 +18,8 @@
 		<thead>
 			<tr>
 				<th class="djdt-color">&#160;</th>
-				<th class="query" colspan="2">{% trans "Query" %}</th>
-				<th class="timeline">{% trans "Timeline" %}</th>
+				<th class="djdt-query" colspan="2">{% trans "Query" %}</th>
+				<th class="djdt-timeline">{% trans "Timeline" %}</th>
 				<th class="djdt-time">{% trans "Time (ms)" %}</th>
 				<th class="djdt-actions">{% trans "Action" %}</th>
 			</tr>
@@ -31,7 +31,7 @@
 					<td class="djdt-toggle">
 						<a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="">+</a>
 					</td>
-					<td class="query">
+					<td class="djdt-query">
 						<div class="djDebugSqlWrap">
 							<div class="djDebugSql">{{ query.sql|safe }}</div>
 						</div>
@@ -42,7 +42,7 @@
 							</strong>
 						{% endif %}
 					</td>
-					<td class="timeline">
+					<td class="djdt-timeline">
 						<div class="djDebugTimeline"><div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" data-left="{{ query.start_offset|unlocalize }}%"><strong data-width="{{ query.width_ratio_relative|unlocalize }}%" data-background-color="{{ query.trace_color }}">{{ query.width_ratio }}%</strong></div></div>
 					</td>
 					<td class="djdt-time">

debug_toolbar/templates/debug_toolbar/panels/timer.html

@@ -33,7 +33,7 @@ <h4>{% trans "Browser timing" %}</h4>
 		<thead>
 			<tr>
 				<th>{% trans "Timing attribute" %}</th>
-				<th class="timeline">{% trans "Timeline" %}</th>
+				<th class="djdt-timeline">{% trans "Timeline" %}</th>
 				<th class="djdt-time">{% trans "Milliseconds since navigation start (+length)" %}</th>
 			</tr>
 		</thead>