Simplify color HTML and CSS on SQL panel (django-commons#1333)

By using the CSS property "content", can remove the repetitive &django-commons#160; in the
HTML. The single non-breaking space determines the size of the color bar. The
total HTML and CSS is less for the same result.

Author: jdufresne

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -450,14 +450,8 @@
     min-width: 70px;
     white-space: nowrap;
 }
-#djDebug .djdt-panelContent table .djdt-color {
-    width: 3px;
-}
-#djDebug .djdt-panelContent table .djdt-color span {
-    width: 3px;
-    height: 12px;
-    overflow: hidden;
-    padding: 0;
+#djDebug .djdt-color:after {
+    content: "\00a0";
 }
 #djDebug .djToggleSwitch {
     text-decoration: none;

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -3,7 +3,7 @@
   <ul>
     {% for alias, info in databases %}
       <li>
-        <strong><span style="background-color:rgb({{ info.rgb_color|join:', ' }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
+        <strong><span class="djdt-color" style="background-color:rgb({{ info.rgb_color|join:', ' }})"></span> {{ alias }}</strong>
         {{ info.time_spent|floatformat:"2" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %}
         {% if info.similar_count %}
           {% blocktrans with count=info.similar_count trimmed %}
@@ -24,7 +24,7 @@
   <table>
     <thead>
       <tr>
-        <th class="djdt-color">&#160;</th>
+        <th></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>
@@ -34,7 +34,7 @@
     <tbody>
       {% for query in queries %}
         <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
-          <td class="djdt-color"><span style="background-color:rgb({{ query.rgb_color|join:', '}})">&#160;</span></td>
+          <td><span class="djdt-color" style="background-color:rgb({{ query.rgb_color|join:', '}})"></span></td>
           <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>
@@ -44,13 +44,13 @@
             </div>
             {% if query.similar_count %}
               <strong>
-                <span style="background-color:{{ query.similar_color }}">&#160;</span>
+                <span class="djdt-color" style="background-color:{{ query.similar_color }}"></span>
                 {% blocktrans with count=query.similar_count %}{{ count }} similar queries.{% endblocktrans %}
               </strong>
             {% endif %}
             {% if query.duplicate_count %}
               <strong>
-                <span style="background-color:{{ query.duplicate_color }}">&#160;</span>
+                <span class="djdt-color" style="background-color:{{ query.duplicate_color }}"></span>
                 {% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
               </strong>
             {% endif %}