diffs: rename .diff to .filediff and use .diffset for grouping

a list of diffs since .filediff refers to a single file rather than
the entire diff

rhodecode/public/css/code-block.less

@@ -648,37 +648,37 b' pre.literal-block, .codehilite pre{'
 @cb-line-code-padding: 10px;
 @cb-text-padding: 5px;
 
-@diff-pill-padding: 2px 7px;
+@pill-padding: 2px 7px;
 
-input.diff-collapse-state {
+input.filediff-collapse-state {
     display: none;
 
-    &:checked + .diff { /* file diff is collapsed */
+    &:checked + .filediff { /* file diff is collapsed */
         .cb {
             display: none
         }
-        .diff-collapse-indicator {
+        .filediff-collapse-indicator {
             border-width: 9px 0 9px 15.6px;
             border-color: transparent transparent transparent #ccc;
         }
-        .diff-menu {
+        .filediff-menu {
             display: none;
         }
         margin: -1px 0 0 0;
     }
 
-    &+ .diff { /* file diff is expanded */
-        .diff-collapse-indicator {
+    &+ .filediff { /* file diff is expanded */
+        .filediff-collapse-indicator {
             border-width: 15.6px 9px 0 9px;
             border-color: #ccc transparent transparent transparent;
         }
-        .diff-menu {
+        .filediff-menu {
             display: block;
         }
         margin: 20px 0;
     }
 }
-.diff {
+.filediff {
     border: 1px solid @grey5;
 
     /* START OVERRIDES */
@@ -697,16 +697,16 b' input.diff-collapse-state {'
     * {
         box-sizing: border-box;
     }
-    .diff-anchor {
+    .filediff-anchor {
         visibility: hidden;
     }
     &:hover {
-        .diff-anchor {
+        .filediff-anchor {
             visibility: visible;
         }
     }
 
-    .diff-collapse-indicator {
+    .filediff-collapse-indicator {
         width: 0;
         height: 0;
         border-style: solid;
@@ -715,22 +715,22 b' input.diff-collapse-state {'
         cursor: pointer;
     }
 
-    .diff-heading {
+    .filediff-heading {
         background: @grey7;
         cursor: pointer;
         display: block;
         padding: 5px 10px;
     }
-    .diff-heading:after {
+    .filediff-heading:after {
         content: "";
         display: table;
         clear: both;
     }
-    .diff-heading:hover {
+    .filediff-heading:hover {
         background: #e1e9f4 !important;
     }
 
-    .diff-menu {
+    .filediff-menu {
         float: right;
 
         a, span {
@@ -739,13 +739,13 b' input.diff-collapse-state {'
             float: left
         }
     }
-    .diff-pill {
+    .pill {
         display: block;
         float: left;
-        padding: @diff-pill-padding;
+        padding: @pill-padding;
     }
-    .diff-pill-group {
-        .diff-pill {
+    .pill-group {
+        .pill {
             opacity: .8;
             &:first-child {
                 border-radius: @border-radius 0 0 @border-radius;
@@ -758,7 +758,7 b' input.diff-collapse-state {'
             }
         }
     }
-    .diff-pill {
+    .pill {
         &[op="name"] {
             background: none;
             color: @grey2;
@@ -809,19 +809,19 b' input.diff-collapse-state {'
         }
     }
 
-    .diff-collapse-button, .diff-expand-button {
+    .filediff-collapse-button, .filediff-expand-button {
         cursor: pointer;
     }
-    .diff-collapse-button {
+    .filediff-collapse-button {
         display: inline;
     }
-    .diff-expand-button {
+    .filediff-expand-button {
         display: none;
     }
-    .diff-collapsed .diff-collapse-button {
+    .filediff-collapsed .filediff-collapse-button {
         display: none;
     }
-    .diff-collapsed .diff-expand-button {
+    .filediff-collapsed .filediff-expand-button {
         display: inline;
     }
 }

rhodecode/templates/codeblocks/diffs.html

@@ -71,8 +71,8 b' collapse_all = len(diffset.files) > coll'
 </div>
 % endif
 
-<div class="cs_files">
-    <div class="cs_files_title">
+<div class="diffset">
+    <div class="diffset-heading">
         %if diffset.files:
         <div class="pull-right">
             <div class="btn-group">
@@ -94,11 +94,11 b' collapse_all = len(diffset.files) > coll'
                 <a
                     class="btn"
                     href="#"
-                    onclick="$('input[class=diff-collapse-state]').prop('checked', false); return false">${_('Expand All')}</a>
+                    onclick="$('input[class=filediff-collapse-state]').prop('checked', false); return false">${_('Expand All')}</a>
                 <a
                     class="btn"
                     href="#"
-                    onclick="$('input[class=diff-collapse-state]').prop('checked', true); return false">${_('Collapse All')}</a>
+                    onclick="$('input[class=filediff-collapse-state]').prop('checked', true); return false">${_('Collapse All')}</a>
             </div>
         </div>
         %endif
@@ -122,13 +122,13 b' collapse_all = len(diffset.files) > coll'
     lines_changed = filediff['patch']['stats']['added'] + filediff['patch']['stats']['deleted']
     over_lines_changed_limit = lines_changed > lines_changed_limit
     %>
-        <input ${collapse_all and 'checked' or ''} class="diff-collapse-state" id="diff-collapse-${id(filediff)}" type="checkbox">
+        <input ${collapse_all and 'checked' or ''} class="filediff-collapse-state" id="filediff-collapse-${id(filediff)}" type="checkbox">
         <div
-            class="diff"
+            class="filediff"
             data-f-path="${filediff['patch']['filename']}"
             id="a_${h.FID(commit_id or '', filediff['patch']['filename'])}">
-            <label for="diff-collapse-${id(filediff)}" class="diff-heading">
-                <div class="diff-collapse-indicator"></div>
+            <label for="filediff-collapse-${id(filediff)}" class="filediff-heading">
+                <div class="filediff-collapse-indicator"></div>
                 ${diff_ops(filediff)}
             </label>
             ${diff_menu(filediff)}
@@ -206,7 +206,7 b" stats = filediff['patch']['stats']"
 from rhodecode.lib.diffs import NEW_FILENODE, DEL_FILENODE, \
     MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE
 %>
-    <span class="diff-pill">
+    <span class="pill">
         %if filediff.source_file_path and filediff.target_file_path:
             %if filediff.source_file_path != filediff.target_file_path: # file was renamed
                   <strong>${filediff.target_file_path}</strong> ⬅ <del>${filediff.source_file_path}</del>
@@ -224,48 +224,48 b' from rhodecode.lib.diffs import NEW_FILE'
             %endif
         %endif
     </span>
-    <span class="diff-pill-group" style="float: left">
+    <span class="pill-group" style="float: left">
         %if filediff.patch['is_limited_diff']:
-        <span class="diff-pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
+        <span class="pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
         %endif
         %if RENAMED_FILENODE in stats['ops']:
-        <span class="diff-pill" op="renamed">renamed</span>
+        <span class="pill" op="renamed">renamed</span>
         %endif
 
         %if NEW_FILENODE in stats['ops']:
-        <span class="diff-pill" op="created">created</span>
+        <span class="pill" op="created">created</span>
             %if filediff['target_mode'].startswith('120'):
-        <span class="diff-pill" op="symlink">symlink</span>
+        <span class="pill" op="symlink">symlink</span>
             %else:
-        <span class="diff-pill" op="mode">${nice_mode(filediff['target_mode'])}</span>
+        <span class="pill" op="mode">${nice_mode(filediff['target_mode'])}</span>
             %endif
         %endif
 
         %if DEL_FILENODE in stats['ops']:
-        <span class="diff-pill" op="removed">removed</span>
+        <span class="pill" op="removed">removed</span>
         %endif
 
         %if CHMOD_FILENODE in stats['ops']:
-        <span class="diff-pill" op="mode">
+        <span class="pill" op="mode">
             ${nice_mode(filediff['source_mode'])} ➡ ${nice_mode(filediff['target_mode'])}
         </span>
         %endif
     </span>
 
-    <a class="diff-pill diff-anchor" href="#a_${h.FID(commit_id or '', filediff.patch['filename'])}">¶</a>
+    <a class="pill filediff-anchor" href="#a_${h.FID(commit_id or '', filediff.patch['filename'])}">¶</a>
 
-    <span class="diff-pill-group" style="float: right">
+    <span class="pill-group" style="float: right">
         %if BIN_FILENODE in stats['ops']:
-        <span class="diff-pill" op="binary">binary</span>
+        <span class="pill" op="binary">binary</span>
             %if MOD_FILENODE in stats['ops']:
-            <span class="diff-pill" op="modified">modified</span>
+            <span class="pill" op="modified">modified</span>
             %endif
         %endif
         %if stats['added']:
-        <span class="diff-pill" op="added">+${stats['added']}</span>
+        <span class="pill" op="added">+${stats['added']}</span>
         %endif
         %if stats['deleted']:
-        <span class="diff-pill" op="deleted">-${stats['deleted']}</span>
+        <span class="pill" op="deleted">-${stats['deleted']}</span>
         %endif
     </span>
 
@@ -276,7 +276,7 b' from rhodecode.lib.diffs import NEW_FILE'
 </%def>
 
 <%def name="diff_menu(filediff)">
-    <div class="diff-menu">
+    <div class="filediff-menu">
 %if filediff.diffset.source_ref:
     %if filediff.patch['operation'] in ['D', 'M']:
         <a