Merge remote-tracking branches 'jdufresne/span-href', 'jdufresne/stats', 'jdufresne/screenshot' and 'jdufresne/dom-id'

* jdufresne/span-href:
  Remove invalid href attribute from span elements

* jdufresne/stats:
  Improve and simplify the "stats" CSS on the SQL panel

* jdufresne/screenshot:
  Automate screenshot generation in README.rst
  Make djdt-{{ panel.panel_id }} a DOM ID instead of DOM class
  Make it simpler to run the example project

* jdufresne/dom-id:
  Make djdt-{{ panel.panel_id }} a DOM ID instead of DOM class

Author: matthiask

Makefile

@@ -13,6 +13,9 @@ flake8:
 	flake8
 
 example:
+	python example/manage.py migrate --noinput
+	-DJANGO_SUPERUSER_PASSWORD=p python example/manage.py createsuperuser \
+		--noinput --username="$(USER)" --email="$(USER)@mailinator.com"
 	python example/manage.py runserver
 
 eslint: package-lock.json
@@ -44,3 +47,8 @@ translatable_strings:
 update_translations:
 	tx pull -a --minimum-perc=10
 	cd debug_toolbar && python -m django compilemessages
+
+.PHONY: example/django-debug-toolbar.png
+example/django-debug-toolbar.png: example/screenshot.py
+	python $< --browser firefox --headless -o $@
+	optipng $@

README.rst

@@ -25,8 +25,7 @@ more details about the panel's content.
 Here's a screenshot of the toolbar in action:
 
 .. image:: https://raw.github.com/jazzband/django-debug-toolbar/master/example/django-debug-toolbar.png
-   :width: 908
-   :height: 557
+   :alt: Django Debug Toolbar screenshot
 
 In addition to the built-in panels, a number of third-party panels are
 contributed by the community.

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -436,27 +436,6 @@
     stroke: #94b24d;
 }
 
-#djDebug .djdt-panelContent ul.djdt-stats {
-    position: relative;
-    list-style-type: none;
-}
-#djDebug .djdt-panelContent ul.djdt-stats li {
-    width: 30%;
-    float: left;
-}
-#djDebug .djdt-panelContent ul.djdt-stats li strong.djdt-label {
-    display: block;
-}
-#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-color {
-    height: 12px;
-    width: 3px;
-    display: inline-block;
-}
-#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-info {
-    display: block;
-    padding-left: 5px;
-}
-
 #djDebug .djdt-panelContent thead th {
     white-space: nowrap;
 }

debug_toolbar/templates/debug_toolbar/includes/panel_button.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<li class="djDebugPanelButton djdt-{{ panel.panel_id }}">
+<li id="djdt-{{ panel.panel_id }}" class="djDebugPanelButton">
   <input type="checkbox" data-cookie="djdt{{ panel.panel_id }}" {% if panel.enabled %}checked title="{% trans "Disable for next and successive requests" %}"{% else %}title="{% trans "Enable for next and successive requests" %}"{% endif %}>
   {% if panel.has_content and panel.enabled %}
     <a href="#" title="{{ panel.title }}" class="{{ panel.panel_id }}">

debug_toolbar/templates/debug_toolbar/panels/sql.html

@@ -1,21 +1,20 @@
 {% load i18n l10n %}
 <div class="djdt-clearfix">
-  <ul class="djdt-stats">
+  <ul>
     {% for alias, info in databases %}
       <li>
-        <strong class="djdt-label"><span style="background-color:rgb({{ info.rgb_color|join:', ' }})" class="djdt-color">&#160;</span> {{ alias }}</strong>
-        <span class="djdt-info">{{ 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 %}
-              including <abbr title="Similar queries are queries with the same SQL, but potentially different parameters.">{{ count }} similar</abbr>
+        <strong><span style="background-color:rgb({{ info.rgb_color|join:', ' }})" class="djdt-color">&#160;</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 %}
+            including <abbr title="Similar queries are queries with the same SQL, but potentially different parameters.">{{ count }} similar</abbr>
+          {% endblocktrans %}
+          {% if info.duplicate_count %}
+            {% blocktrans with dupes=info.duplicate_count trimmed %}
+              and <abbr title="Duplicate queries are identical to each other: they execute exactly the same SQL and parameters.">{{ dupes }} duplicates</abbr>
             {% endblocktrans %}
-            {% if info.duplicate_count %}
-              {% blocktrans with dupes=info.duplicate_count trimmed %}
-                and <abbr title="Duplicate queries are identical to each other: they execute exactly the same SQL and parameters.">{{ dupes }} duplicates</abbr>
-              {% endblocktrans %}
-            {% endif %}
-          {% endif %})
-        </span>
+          {% endif %}
+        {% endif %})
       </li>
     {% endfor %}
   </ul>

docs/contributing.rst

@@ -132,6 +132,14 @@ The release itself requires the following steps:
 
    Commit.
 
+#. Update the screenshot in ``README.rst``.
+
+   .. code-block:: console
+
+       $ make example/django-debug-toolbar.png
+
+   Commit.
+
 #. Bump version numbers in ``docs/changes.rst``, ``docs/conf.py``,
    ``README.rst`` and ``setup.py``. Add the release date to
    ``docs/changes.rst``. Commit.

example/README.rst

@@ -13,24 +13,36 @@ interfere with common JavaScript frameworks.
 How to
 ------
 
-The test project requires a working installation of Django::
+The example project requires a working installation of Django::
 
     $ pip install Django
 
-The following commands must be run from the root directory of a checkout of
-the debug toolbar, ie. the directory that contains ``example/``.
+The following command must run from the root directory of Django Debug Toolbar,
+i.e. the directory that contains ``example/``::
 
-Before running the example for the first time, you must create a database::
+    $ make example
 
-    $ python -m django migrate --settings=example.settings
+This will create a database, superuser, and run the Django development server.
+The superuser's username will be the same as the current OS user and the
+password is "p".
 
-Then you can use the following command to run the example::
+If you'd like to run these steps individually, use the following commands.
+Again, run from the root directory of Django Debug Toolbar.
 
-    $ python -m django runserver --settings=example.settings
+Create a database::
+
+    $ python example/manage.py migrate
+
+Create a superuser::
+
+    $ python example/manage.py createsuperuser
+
+Run the Django development server::
+
+    $ python example/manage.py runserver
 
 You can change the database used by specifying the ``DJANGO_DATABASE_ENGINE``
 environment variable::
 
-    $ DJANGO_DATABASE_ENGINE=postgresql python -m django migrate --settings=example.settings
-    $ DJANGO_DATABASE_ENGINE=postgresql python -m django runserver --settings=example.settings
-
+    $ DJANGO_DATABASE_ENGINE=postgresql python example/manage.py migrate
+    $ DJANGO_DATABASE_ENGINE=postgresql python example/manage.py runserver

example/django-debug-toolbar.png

@@ -0,0 +1,83 @@
+import argparse
+import importlib
+import os
+import signal
+import subprocess
+
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.support.wait import WebDriverWait
+
+
+def parse_args():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--browser", required=True)
+    parser.add_argument("--headless", action="store_true")
+    parser.add_argument("--outfile", "-o", required=True)
+    parser.add_argument("--width", type=int, default=900)
+    parser.add_argument("--height", type=int, default=700)
+    return parser.parse_args()
+
+
+def create_webdriver_options(browser, headless):
+    mod = importlib.import_module(f"selenium.webdriver.{browser}.options")
+    options = mod.Options()
+    if headless:
+        options.headless = True
+    return options
+
+
+def create_webdriver(browser, headless):
+    mod = importlib.import_module(f"selenium.webdriver.{browser}.webdriver")
+    return mod.WebDriver(options=create_webdriver_options(browser, headless))
+
+
+def example_server():
+    return subprocess.Popen(["make", "example"])
+
+
+def set_viewport_size(selenium, width, height):
+    script = """
+        return [
+            window.outerWidth - window.innerWidth + arguments[0],
+            window.outerHeight - window.innerHeight + arguments[1],
+        ];
+    """
+    window_width, window_height = selenium.execute_script(script, width, height)
+    selenium.set_window_size(window_width, window_height)
+
+
+def submit_form(selenium, data):
+    url = selenium.current_url
+    for name, value in data.items():
+        el = selenium.find_element_by_name(name)
+        el.send_keys(value)
+    el.send_keys(Keys.RETURN)
+    WebDriverWait(selenium, timeout=5).until(EC.url_changes(url))
+
+
+def main():
+    args = parse_args()
+    with example_server() as p:
+        try:
+            with create_webdriver(args.browser, args.headless) as selenium:
+                set_viewport_size(selenium, args.width, args.height)
+
+                selenium.get("http://localhost:8000/admin/login/")
+                submit_form(selenium, {"username": os.environ["USER"], "password": "p"})
+
+                selenium.get("http://localhost:8000/admin/auth/user/")
+                # Close the admin sidebar.
+                el = selenium.find_element_by_id("toggle-nav-sidebar")
+                el.click()
+                # Open the SQL panel.
+                el = selenium.find_element_by_id("djdt-SQLPanel")
+                el.click()
+
+                selenium.save_screenshot(args.outfile)
+        finally:
+            p.send_signal(signal.SIGTERM)
+
+
+if __name__ == "__main__":
+    main()

example/screenshot.py

@@ -19,7 +19,7 @@ def test_escapes_panel_title(self):
         self.assertContains(
             response,
             """
-            <li class="djDebugPanelButton djdt-CustomPanel">
+            <li id="djdt-CustomPanel" class="djDebugPanelButton">
             <input type="checkbox" checked title="Disable for next and successive requests" data-cookie="djdtCustomPanel">
             <a class="CustomPanel" href="#" title="Title with special chars &amp;&quot;&#39;&lt;&gt;">
             Title with special chars &amp;&quot;&#39;&lt;&gt;

tests/panels/test_custom.py

@@ -12,7 +12,7 @@ def test_panel_title(self):
         self.assertContains(
             response,
             """
-            <li class="djDebugPanelButton djdt-SettingsPanel">
+            <li id="djdt-SettingsPanel" class="djDebugPanelButton">
             <input type="checkbox" checked title="Disable for next and successive requests" data-cookie="djdtSettingsPanel">
             <a class="SettingsPanel" href="#" title="Settings from None">Settings</a>
             </li>