Clean up markup and CSS for the review request box.

Review Request #8312 — Created July 27, 2016 and submitted

Information

Review Board
release-3.0.x
7ea1e31...

Reviewers

This change does a major cleanup for the HTML and CSS related to the review
request box. There are no real functional changes, but lots of small refactors
and cleanups:

  • All styles relating to the review request box now live in review-request.less
  • Spacing and alignment has been fixed throughout. Examples of this include a
    1px misalignment that we had between the "Summary:" box and the rest of the
    boxes, a 4px misalignment on the pencil icon for fields that didn't have any
    content, and a big handful of places that just grabbed spacing values out of
    a hat. Things now rely on a common "review-request-section" class which sets
    the spacing around the box.
  • IDs in this box now consistently use hyphens, where before we had a mix.
  • Use of rem rather than em (since it's supported on all the browsers we
    now care about).
  • Menus now actually use our common .has-menu and .menu rules, rather than
    completely reimplementing them.
  • Better namespacing for all the action classes, swapping out the very general
    .action* for .review-request-action*
  • Useless elements were removed, including the use of {% box %} around the
    review request, since we were overriding all the box styles anyway.
  • A bunch of totally obsolete style rules (relevant classes/IDs didn't exist
    anymore) were removed.

Tested a variety of browsers on both desktop and mobile for the appearance and
functionality of the review request detail, diff viewer, and review UI pages.


Description From Last Updated

Doesn't this generate .field:not(:empty):empty, which can't match anything?

brenniebrennie

We prefer hex over color names, don't we?

brenniebrennie

Uppercase B.

brenniebrennie

Might be a good candidate for a constant.

chipx86chipx86

This must use @{STATIC_ROOT}djblets/css/mixins/markdown.less, or packaging will break.

chipx86chipx86

Two blank lines.

chipx86chipx86

Order should be tags, IDs, classes.

chipx86chipx86

Let's define a constant for this.

chipx86chipx86

You can use .desktop-only(); instead.

chipx86chipx86

Tags and then classes.

chipx86chipx86
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
    
    
  2. 
      
brennie
  1. 
      
  2. reviewboard/static/rb/css/pages/review-request.less (Diff revision 1)
     
     
     
     
     
     
     
     
    Show all issues

    Doesn't this generate .field:not(:empty):empty, which can't match anything?

  3. 
      
david
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
    
    
  2. 
      
david
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
david
reviewbot
  1. Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
david
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
brennie
  1. 
      
  2. Show all issues

    We prefer hex over color names, don't we?

  3. Show all issues

    Uppercase B.

  4. 
      
david
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
chipx86
  1. This looks like a nice cleanup change. We will absolutely be breaking users with some of the ID/class renames. In another review request, I mentioned putting together a page on Notion with things that we're changing, so that authors can read through them. Can you document the major ID/class name changes as well (review request and action ones) so we can include them in the release notes, so Mozilla (and other companies I can't mention here) aren't completely in shock and have a decent guide on transitioning these?

    1. https://www.notion.so/Review-Request-page-changes-for-3-0-8d27aac9e3ed4f81ac1e849ebb6127fe

  2. Show all issues

    Might be a good candidate for a constant.

    1. It's only used in the one place.

  3. Show all issues

    This must use @{STATIC_ROOT}djblets/css/mixins/markdown.less, or packaging will break.

    1. Huh?

      We needed @{STATIC_ROOT} for rendering in the browser back when .less files were compiled through javascript. We now compile everything on the backend, and pipeline is set up with the right import paths.

  4. Show all issues

    Two blank lines.

  5. reviewboard/static/rb/css/pages/review-request.less (Diff revision 6)
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Show all issues

    Order should be tags, IDs, classes.

  6. Show all issues

    Let's define a constant for this.

  7. reviewboard/static/rb/css/pages/review-request.less (Diff revision 6)
     
     
     
     
     
    Show all issues

    You can use .desktop-only(); instead.

  8. reviewboard/static/rb/css/pages/review-request.less (Diff revision 6)
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Show all issues

    Tags and then classes.

  9. Once upon a time, we had issues with these appearing unless display: none was set. This was probably due to the dynamic nature of how less stylesheets were loaded before, but I just want to verify that the menus never appear unexpectedly on load.

    1. Yeah, not a problem anymore.

  10. 
      
david
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/staticbundles.py
    
    Ignored Files:
        reviewboard/templates/reviews/review_detail.html
        reviewboard/templates/reviews/ui/base.html
        reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
        reviewboard/static/rb/css/pages/diffviewer.less
        reviewboard/static/rb/css/ui/menus.less
        reviewboard/templates/reviews/review_request_header.html
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
        reviewboard/templates/diffviewer/view_diff.html
        reviewboard/templates/reviews/review_issue_summary_table.html
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/templates/reviews/action.html
        reviewboard/templates/reviews/review_request_box.html
        reviewboard/static/rb/css/pages/review-request.less
        reviewboard/static/rb/css/defs.less
        reviewboard/templates/reviews/menu_action.html
        reviewboard/static/rb/js/pages/views/reviewablePageView.js
        reviewboard/static/rb/css/mixins/style.less
    
    
  2. 
      
brennie
  1. Ship It!
  2. 
      
chipx86
  1. Ship It!
  2. 
      
david
Review request changed
Status:
Completed
Change Summary:
Pushed to release-3.0.x (f86e4bc)