Changeset 102796 in webkit

Timestamp:

Dec 14, 2011 10:30:55 AM (12 years ago)

Author:

ojan@chromium.org

Message:

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:

Location:

trunk/Websites/bugs.webkit.org

Files:

• ChangeLog (modified) (1 diff)
• PrettyPatch/PrettyPatch.rb (modified) (2 diffs)
• code-review.js (modified) (4 diffs)

trunk/Websites/bugs.webkit.org/ChangeLog

@@ +1 @@
+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>
 

trunk/Websites/bugs.webkit.org/PrettyPatch/PrettyPatch.rb

@@ -142 +142 @@
     font-family: monospace;
     margin: 1em 0;
+    position: relative;
 }
 
@@ -188 +189 @@
 }
 
-.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;
 }
 

trunk/Websites/bugs.webkit.org/code-review.js

@@ -64 +64 @@
     console.log('No attachment ID');
 
+  var minLeftSideRatio = 10;
+  var maxLeftSideRatio = 90;
+  var file_diff_being_resized = null;
   var next_line_id = 0;
   var files = {};
@@ -1140 +1143 @@
     updateToolbarAnchorState();
     loadDiffState();
+    generateFileDiffResizeStyleElement();
   };
 
@@ -1223 +1227 @@
     if (diffState(file_diff) == diff_type)
       return;
+
+    if (!$('.resizeHandle', file_diff).length)
+      $(file_diff).append('<div class="resizeHandle"></div>');
 
     $(file_diff).removeClass('sidebyside unified');
@@ -1714 +1721 @@
   }
 
-  $(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) {