Render the diff change index from JS instead of Django.

Review Request #4545 — Created Sept. 9, 2013 and submitted

Information

Review Board
master

Reviewers

Render the diff change index from JS instead of Django.

The new change index was about half template half javascript--we'd render the
basic table with each of the files from a django template, and then as diffs
were loaded, update it.

This change moves the initial render into the javascript as well. The data is
plumbed into javascript by passing it into the DiffViewerPageView. This change
is one step towards being able to update the displayed diff (revision/page/etc)
without reloading everything.

  • Viewed a handful of diff revisions and interdiffs. Saw the table as before in
    each case.
  • Ran js-tests
  • Ran jshint
Description From Last Updated

'from settings_local import *' used; unable to detect undefined names

reviewbotreviewbot

<table/>, for consistency.

chipx86chipx86

Where does print come from? Is that something from underscore?

chipx86chipx86

!==

chipx86chipx86

!==

chipx86chipx86

Can probably be one line.

chipx86chipx86

This feels weird. Why not just use <% %> as usual for these?

chipx86chipx86

The indentation level for the for statement doesn't seem to match where it should be respective to other tags. Same …

chipx86chipx86

Make sure we're escaping for JavaScript. We had a security hole due to exactly this once.

chipx86chipx86

Here too.

chipx86chipx86

'from settings_local import *' used; unable to detect undefined names

reviewbotreviewbot

The $ should probably be #, I'm guessing?

chipx86chipx86

These probably need to be escaped too, right? Not sure I see much reason to use print() over underscore's standard …

chipx86chipx86

On the model, revision is an integer. We may as well reflect that here.

chipx86chipx86

Same here.

chipx86chipx86

'from settings_local import *' used; unable to detect undefined names

reviewbotreviewbot
reviewbot
  1. This is a review from Review Bot.
    Tool: PEP8 Style Checker
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. 
      
reviewbot
  1. This is a review from Review Bot.
    Tool: Pyflakes
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. reviewboard/settings.py (Diff revision 1)
     
     
    Show all issues

    'from settings_local import *' used; unable to detect undefined names

  3. 
      
chipx86
  1. 
      
  2. Show all issues

    <table/>, for consistency.

  3. Show all issues

    Where does print come from? Is that something from underscore?

  4. Show all issues

    !==

  5. Show all issues

    !==

  6. Show all issues

    Can probably be one line.

  7. Show all issues

    This feels weird. Why not just use <% %> as usual for these?

  8. Show all issues

    The indentation level for the for statement doesn't seem to match where it should be respective to other tags.

    Same with other template tags here.

    1. I really, really don't understand your system for indenting these :P

    2. I'm not sure it's a great system, honestly, but I think in ways, it's better than other methods. Even if it's sometimes a bit weird or confusing.

      HTML tags are aligned respective to each other. JavaScript code is aligned respective to each other. Template tags are aligned respective to each other. They do not interfere with each others' alignment.

      Some projects treat template tags like HTML tags and align relative to that. It works in simple cases. However, that doesn't really mesh with template tags in javascript, or other non-HTML output, though, and also has issues when you want to do something like:

      <div class="foo">
       {% if foo %}
        </div>
        <div class="bar">
       {% endif %}
      

      The indentation is weird both here and in output.

      So, since that indentation model doesn't work cleanly when mixing with outputted content, I prefer to keep template tag indentation consistent and pretend everything inside of it is a print statement of sorts.

      In the case above, it would be:

      {% block ... %}
      ...
      {%  for file in files %}
      

      Then, to minimize excess whitespace in output (which leads to more content to transfer), the indentation can go in {% .. %}.

      So those are my thoughts on it, and what I've been aiming for. A lot of our templates are just not consistent though, but I want to get closer to some level of consistency.

  9. reviewboard/templates/diffviewer/view_diff.html (Diff revision 1)
     
     
     
     
    Show all issues

    Make sure we're escaping for JavaScript. We had a security hole due to exactly this once.

  10. Show all issues

    Here too.

  11. 
      
david
reviewbot
  1. This is a review from Review Bot.
    Tool: PEP8 Style Checker
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. 
      
reviewbot
  1. This is a review from Review Bot.
    Tool: Pyflakes
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. reviewboard/settings.py (Diff revision 2)
     
     
    Show all issues

    'from settings_local import *' used; unable to detect undefined names

  3. 
      
chipx86
  1. 
      
  2. Show all issues

    The $ should probably be #, I'm guessing?

  3. Show all issues

    These probably need to be escaped too, right?

    Not sure I see much reason to use print() over underscore's standard templating.

    1. They do... sigh. The print calls feel more readable when there's a ton of jumping back and forth between js and template.

    2. It does, I'll agree.

  4. Show all issues

    On the model, revision is an integer. We may as well reflect that here.

  5. Show all issues

    Same here.

  6. 
      
david
reviewbot
  1. This is a review from Review Bot.
    Tool: PEP8 Style Checker
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. 
      
reviewbot
  1. This is a review from Review Bot.
    Tool: Pyflakes
    Processed Files:
    reviewboard/settings.py
    Ignored Files:
    reviewboard/static/rb/js/diffviewer/models/diffFileModel.js
    reviewboard/templates/diffviewer/view_diff.html
    reviewboard/static/rb/js/diffviewer/collections/diffFileCollection.js
    reviewboard/templates/diffviewer/changeindex.html
    reviewboard/static/rb/js/pages/views/diffViewerPageView.js

  2. reviewboard/settings.py (Diff revision 3)
     
     
    Show all issues

    'from settings_local import *' used; unable to detect undefined names

  3. 
      
chipx86
  1. Ship It!

  2. 
      
david
Review request changed
Status:
Completed
Change Summary:

Pushed to master (fa41428).