bitbucket soft-wrap diffs bookmarklet

bitbucket-soft-wrap-diffs.md

BitBucket Soft-Wrap Diffs Bookmarklet

Create a bookmark in Chrome or Firefox and copy/paste this code into the URL.

javascript:(function()%7Bvar%20a%3Ddocument.createElement('style')%2Cb%3Bdocument.head.appendChild(a)%3Bb%3Da.sheet%3Bb.insertRule('.udiff-line%20.source%20%7B%20height%3A%20initial%3B%20white-space%3A%20pre-wrap%3B%20word-wrap%3A%20normal%3B%20%7D'%2C0)%3B%7D)()

This bookmarklet adds the following user-style:

.udiff-line .source {
  height: initial;
  white-space: pre-wrap;
  word-wrap: normal;
}

Reference: https://bitbucket.org/site/master/issues/3873/wrap-long-source-lines-when-viewing

Thanks for sharing this!

When using this bookmarklet, I noticed sometimes whitespace between words disappeared. Closer investigation showed this were trailing whitespaces in <ins> tags. It seems to work fine (so far) by changing the white-space to pre-wrap:

.udiff-line .source {
  height: initial;
  white-space: pre-wrap;
  word-wrap: normal;
}

Very useful, thank you! 😄

Thanks @bdumon, integrated your update! And glad it was useful @jmalarcon 🎉

Thanks for sharing this. These styles don't seem to be work for BitBucket Server (v5.8.0) so I created similar style overrides there. These aren't perfect but seem acceptable to me:

.text-view .CodeMirror-sizer {
    min-width: initial !important;
}
.content-view .CodeMirror pre {
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
}
.CodeMirror-hscrollbar.stash-scroll-fixed {
    display: none !important;
}