Handle images with identical pixels better

Author: danvk

webdiff/static/js/components.jsx

@@ -258,8 +258,11 @@ var NoChanges = React.createClass({
     filePair: React.PropTypes.object.isRequired
   },
   render: function() {
-    if (this.props.filePair.no_changes) {
-      return <div className="no-changes">(No Changes)</div>;
+    var fp = this.props.filePair;
+    if (fp.no_changes) {
+      return <div className="no-changes">(File content is identical)</div>;
+    } else if (fp.is_image_diff && fp.are_same_pixels) {
+      return <div className="no-changes">Pixels are the same, though file content differs (perhaps the headers are different?)</div>;
     } else {
       return null;
     }

webdiff/static/js/image.jsx

@@ -140,6 +140,7 @@ function makePerceptualBoxDiv(pdiffMode, filePair, scaleDown) {
     if (filePair.diffData &&
         filePair.diffData.diffBounds) {
       var bbox = filePair.diffData.diffBounds;
+      if (bbox.width == 0 || bbox.height == 0) return null;
       var styles = {
         top: Math.floor(scaleDown * (bbox.top - padding)) + 'px',
         left: Math.floor(scaleDown * (bbox.left - padding)) + 'px',
@@ -434,3 +435,17 @@ var ImageSwipe = React.createClass({
     );
   }
 });
+
+
+var NoPixelsChanged = React.createClass({
+  propTypes: {
+    filePair: React.PropTypes.object.isRequired
+  },
+  render: function() {
+    if (this.props.filePair.are_same_pixels) {
+      return <div className="no-changes">(Pixels are identical)</div>;
+    } else {
+      return null;
+    }
+  }
+});