MozReview: Review Page Redesign: Enhance table toggling and add cookie table state (Bug 1309964). r?glob draft
authorDavid Walsh <dwalsh@mozilla.com>
Tue, 29 Nov 2016 10:03:45 -0600
changeset 9983 646d54730cf8012408c5ce9ea87999887c113b37
parent 9982 75e6bd4195a3cace92e9ef3ba542f3c2409cb9d3
child 9984 176c195aaf4b8f6b113246dd02e7bf6ee1bc4c71
push id1403
push userbmo:dwalsh@mozilla.com
push dateTue, 29 Nov 2016 16:23:11 +0000
reviewersglob
bugs1309964
MozReview: Review Page Redesign: Enhance table toggling and add cookie table state (Bug 1309964). r?glob MozReview-Commit-ID: FmOiyQq2o4U
pylib/mozreview/mozreview/static/mozreview/css/commits.less
pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-reviews.less
pylib/mozreview/mozreview/static/mozreview/js/review.js
pylib/mozreview/mozreview/templates/mozreview/commits-requests.html
--- a/pylib/mozreview/mozreview/static/mozreview/css/commits.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/commits.less
@@ -112,16 +112,32 @@
       content: " (r? cleared)";
     }
   }
 
   tbody > tr, tbody > tr:hover {
     background: #F9F9F9;
   }
 
+  .hidden {
+    display: none;
+  }
+
+  &.expanded {
+    .hidden {
+      display: table-row;
+    }
+
+    tbody > tr, tbody > tr:hover {
+      &[current] {
+        background: #fbfab9;
+      }
+    }
+  }
+
   #mozreview-child-requests-nav-row {
     background: #fff;
     font-size: 90%;
 
     td {
       padding: 7px;
       position: relative;
       text-align: center;
@@ -190,16 +206,21 @@
     font-size: @table-large-font-size;
   }
 }
 
 #mozreview-all-commits {
   font-weight: bold;
 }
 
+#mozreview-commits-presist {
+  display: inline-block;
+  margin-top: 8px;
+}
+
 #error-container {
   &:not([haserror="true"]) {
     display: none;
   }
 
   border: 1px solid red;
   background-color: #ffb2b2;
   padding: 15px;
--- a/pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-reviews.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-reviews.less
@@ -41,46 +41,17 @@
   .review-request-meta {
     color: #777;
     text-align: center;
     line-height: 1.6;
     font-size: 110%;
   }
 
   .status {
-    .review-status-icon();
-    font-size: 20px;
     margin-bottom: 10px;
-
-    &.no-approval {
-      cursor: default;
-    }
-
-    &.approval {
-      cursor: default;
-      background-color: @approval-bg;
-    }
-
-    &.approval-issues {
-      background: #fff4B0;
-    }
-
-    .issue-count {
-      text-decoration: none;
-      color: inherit;
-     }
-
-    .shipit-count {
-      background-image: url("../shipit_bg.png");
-      background-position: top left;
-      background-repeat: repeat-x;
-      background-color: #6bc810;
-      border: 1px solid @approval-border-color;
-      color: #205003;
-    }
   }
 
   #review-request-inputs {
     margin-top: 20px;
 
     input {
       .border-radius(3px);
       padding: 2px 6px;
@@ -127,17 +98,16 @@
       margin-right: 20px;
     }
   }
 }
 
 .status {
   .review-status-icon();
   font-size: 20px;
-  margin-bottom: 10px;
 
   &.no-approval {
     cursor: default;
   }
 
   &.approval {
     cursor: default;
     background-color: @approval-background-color;
--- a/pylib/mozreview/mozreview/static/mozreview/js/review.js
+++ b/pylib/mozreview/mozreview/static/mozreview/js/review.js
@@ -15,20 +15,42 @@
   // understand what clicking it does.
   $("#review-link").text("Finish Review...");
 
   if (MozReview.isParent) {
     $('#review_request_extra').prepend(MRParents.parentWarning);
   }
 
   // Show all commits when link is clicked
-  $('#mozreview-all-commits').on('click', function(e) {
+  var $commitsViewLink = $('#mozreview-all-commits');
+  var $commitsTable = $('#mozreview-child-requests');
+  var toggleTable = function(forceOpen) {
+    var isExpanded = $commitsTable.hasClass('expanded');
+
+    if (forceOpen || !isExpanded) {
+      $commitsTable.addClass('expanded');
+      $commitsViewLink.attr('data-expanded', true).text($commitsViewLink.attr('data-one-text'));
+    }
+    else {
+      $commitsTable.removeClass('expanded');
+      $commitsViewLink.attr('data-expanded', false).text($commitsViewLink.attr('data-all-text'));
+    }
+  };
+
+  $commitsViewLink.on('click', function(e) {
     e.preventDefault();
-    $('#mozreview-child-requests tr[hidden]').removeAttr('hidden');
-    $(this).hide();
+    toggleTable();
+  });
+
+  // Toggle "always show all commits" in table cookie
+  $('#mozreview-commits-presist input').on('change', function(e) {
+    RB.UserSession.instance.set('commitsTableAlwaysShowFull', this.checked + '');
+    if (this.checked) {
+      toggleTable(true);
+    }
   });
 
   var reviewRequest = RB.PageManager.getPage().reviewRequest;
   RB.apiCall({
     type: 'GET',
     prefix: reviewRequest.get('sitePrefix'),
     noActivityIndicator: true,
     url: '/api/review-requests/' + reviewRequest.get('id') + '/reviews/' +
--- a/pylib/mozreview/mozreview/templates/mozreview/commits-requests.html
+++ b/pylib/mozreview/mozreview/templates/mozreview/commits-requests.html
@@ -2,17 +2,17 @@
 This is the template for the "Commits" list in a review request. It is used
 by both the commits template and the commits_summary_table_fragment view.
 {% endcomment %}
 
 {% load i18n %}
 {% load djblets_utils %}
 {% load mozreview %}
 
-<table id="mozreview-child-requests">
+<table id="mozreview-child-requests"{% if request.COOKIES.commits_table_show == 'true' %} class="expanded"{% endif %}>
   <thead>
   <tr>
     <th class="commits">{% trans "Commit" %}</th>
     {% comment "TODO: show this column when the commit author will be available" %}
     <th class="submitter">{% trans "Submitter" %}</th>
     {% endcomment %}
     <th class="reviewers">{% trans "Reviewers" %}</th>
   </tr>
@@ -20,32 +20,34 @@ by both the commits template and the com
 
   {% if parent_details.get_review_request.id != review_request_details.get_review_request.id and num_children > 1 %}
   <tr id="mozreview-child-requests-nav-row">
     <td colspan="2">
       {% if prev_child %}
         <a href="{{prev_child.get_review_request.get_absolute_url}}" rel="previous">&lt;&lt; Previous Commit</a>
       {% endif %}
       Viewing commit {{current_child_num}} of {{num_children}}.
-      <a href="javascript:;" id="mozreview-all-commits">View All Commits</a>
+      <a href="javascript:;" data-one-text="Hide Other Commits" data-all-text="Show Other Commits" id="mozreview-all-commits">{% if request.COOKIES.commits_table_show == 'true' %}Hide Other Commits{% else %}Show Other Commits{% endif %}</a>
       {% if next_child %}
         <a href="{{next_child.get_review_request.get_absolute_url}}" rel="next">Next Commit &gt;&gt;</a>
       {% endif %}
+      <br />
+      <label id="mozreview-commits-presist"><input type="checkbox" {% if request.COOKIES.commits_table_show == 'true' %}checked{% endif %}> Always Show All Commits</label>
     </td>
   </tr>
   {% endif %}
 
 
   {% for child_details in children_details %}
   <tr
     {% if child_details.get_review_request.id == review_request_details.get_review_request.id %}
       current="true"
     {% else %}
       {% if parent_details.get_review_request.id != review_request_details.get_review_request.id %}
-        hidden
+        class="hidden"
       {% endif %}
     {% endif %}>
 
   <td class="commits">
     <div class="truncate_text">
       {% if child_details.get_review_request.issue_open_count > 0 %}
         <div class="status approval-issues" title="{{child_details.get_review_request.issue_open_count}} open issue{{ child_details.get_review_request.issue_open_count|pluralize }}">
           <a class="issue-count" href="{{child_details.get_review_request.get_absolute_url}}#issue-summary">