Give a resize handle for sidebyside diffs.

https://bugs.webkit.org/show_bug.cgi?id=74465

Reviewed by Ryosuke Niwa.

This gives a drag handle so you can make the side-by-side
diff not be 50/50 on a per-file-diff basis. This is useful
for cases like new files where there's no value on the
left side.

* PrettyPatch/PrettyPatch.rb:
* code-review.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@102796 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/bugs.webkit.org/ChangeLog b/Websites/bugs.webkit.org/ChangeLog
index bef87a0..c38f3b6 100644 (file)
--- a/Websites/bugs.webkit.org/ChangeLog
+++ b/Websites/bugs.webkit.org/ChangeLog
@@ -1,5 +1,20 @@
 2011-12-13  Ojan Vafai  <ojan@chromium.org>
 
+        Give a resize handle for sidebyside diffs.
+        https://bugs.webkit.org/show_bug.cgi?id=74465
+
+        Reviewed by Ryosuke Niwa.
+
+        This gives a drag handle so you can make the side-by-side
+        diff not be 50/50 on a per-file-diff basis. This is useful
+        for cases like new files where there's no value on the
+        left side.
+
+        * PrettyPatch/PrettyPatch.rb:
+        * code-review.js:
+
+2011-12-13  Ojan Vafai  <ojan@chromium.org>
+
         Expanding context is broken for prepare-ChangeLog in the code review tool.
         https://bugs.webkit.org/show_bug.cgi?id=74458
 

diff --git a/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb b/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb
index be3eb65..29bbbb7 100644 (file)
--- a/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb
+++ b/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb
@@ -141,6 +141,7 @@ private
     border: 1px solid #ddd;
     font-family: monospace;
     margin: 1em 0;
+    position: relative;
 }
 
 h1 {
@@ -187,18 +188,28 @@ h1 :hover {
     float: right;
 }
 
-.LineSide:last-child {
-    float: right;
-}
-
 .LineSide,
 .sidebyside .DiffBlockPart.remove,
 .sidebyside .DiffBlockPart.add {
     display:inline-block;
-    width:50%;
+    width: 50%;
     vertical-align: top;
 }
 
+.sidebyside .resizeHandle {
+    width: 5px;
+    height: 100%;
+    cursor: move;
+    position: absolute;
+    top: 0;
+    left: 50%;
+}
+
+.sidebyside .resizeHandle:hover {
+    background-color: grey;
+    opacity: 0.5;
+}
+
 .sidebyside .DiffBlockPart.remove .to,
 .sidebyside .DiffBlockPart.add .from {
     display: none;

diff --git a/Websites/bugs.webkit.org/code-review.js b/Websites/bugs.webkit.org/code-review.js
index 14322f3..824c150 100644 (file)
--- a/Websites/bugs.webkit.org/code-review.js
+++ b/Websites/bugs.webkit.org/code-review.js
@@ -63,6 +63,9 @@ var CODE_REVIEW_UNITTEST;
   if (!attachment_id)
     console.log('No attachment ID');
 
+  var minLeftSideRatio = 10;
+  var maxLeftSideRatio = 90;
+  var file_diff_being_resized = null;
   var next_line_id = 0;
   var files = {};
   var original_file_contents = {};
@@ -1139,6 +1142,7 @@ var CODE_REVIEW_UNITTEST;
 
     updateToolbarAnchorState();
     loadDiffState();
+    generateFileDiffResizeStyleElement();
   };
 
   function handleReviewFormLoad() {
@@ -1223,6 +1227,9 @@ var CODE_REVIEW_UNITTEST;
     if (diffState(file_diff) == diff_type)
       return;
 
+    if (!$('.resizeHandle', file_diff).length)
+      $(file_diff).append('<div class="resizeHandle"></div>');
+
     $(file_diff).removeClass('sidebyside unified');
     $(file_diff).addClass(diff_type);
 
@@ -1713,7 +1720,51 @@ var CODE_REVIEW_UNITTEST;
     return lineOffsetFrom(line, 1);
   }
 
-  $(document.body).bind('mouseup', processSelectedLines);
+  $('.resizeHandle').live('mousedown', function(event) {
+    file_diff_being_resized = $(this).parent('.FileDiff');
+  });
+
+  function generateFileDiffResizeStyleElement() {
+    // FIXME: Once we support calc, we can replace this with something that uses the attribute value.
+    var styleText = '';
+    for (var i = minLeftSideRatio; i <= maxLeftSideRatio; i++) {
+      // FIXME: Once we support calc, put the resize handle at calc(i% - 5) so it doesn't cover up
+      // the right-side line numbers.
+      styleText += '.FileDiff[leftsidewidth="' + i + '"] .resizeHandle {' +
+        'left: ' + i + '%' +
+      '}' +
+      '.FileDiff[leftsidewidth="' + i + '"] .LineSide:first-child,' +
+      '.FileDiff[leftsidewidth="' + i + '"].sidebyside .DiffBlockPart.remove {' +
+        'width:' + i + '%;' +
+      '}' +
+      '.FileDiff[leftsidewidth="' + i + '"] .LineSide:last-child,' +
+      '.FileDiff[leftsidewidth="' + i + '"].sidebyside .DiffBlockPart.add {' +
+        'width:' + (100 - i) + '%;' +
+      '}';
+    }
+    var styleElement = document.createElement('style');
+    styleElement.innerText = styleText;
+    document.head.appendChild(styleElement);
+  }
+
+  $(document).bind('mousemove', function(event) {
+    if (!file_diff_being_resized)
+      return;
+
+    var ratio = event.pageX / window.innerWidth;
+    var percentage = Math.floor(ratio * 100);
+    if (percentage < minLeftSideRatio)
+      percentage = minLeftSideRatio;
+    if (percentage > maxLeftSideRatio)
+      percentage = maxLeftSideRatio;
+    file_diff_being_resized.attr('leftsidewidth', percentage);
+    event.preventDefault();
+  });
+
+  $(document).bind('mouseup', function(event) {
+    file_diff_being_resized = null;
+    processSelectedLines();
+  });
 
   $('.lineNumber').live('click', function(e) {
     var line = lineFromLineDescendant($(this));