Things to do:

• [x] Add n-column option
• [x] Compatibility testing

Modifying both columns together

Initially, the plan was to have a text input only on the left indicator and disable the text input on the right indicator. This is because we are detecting the change event in .column-indicator and there is no way to tell whether the left or right indicator was changed. However, file additions on the diff viewer only show the right indicator, so disabling it won't work.

Therefore, we add an l and r class to the indicators. Then, we have one JS function for each indicator to catch the change event, onLeftIndicatorChanged and onRightIndicatorChanged.

n-column option

There is no way to easily manipulate pre::before so we will have to update the style sheet using stylesheet.insertRule().

var stylesheet = $('link[href*="/css/pages/diffviewer.css"]')[0].sheet;
stylesheet.insertRule('.sidebyside tr[line] pre::before { transform: translateX(' + newColumnNum + 'ch); }');

Problem

Using insertRule(), we are able to insert a new rule in the CSS. However, the newly inserted rule does not overwrite the old rule and the indicator stays at the same position.

To find a rule to delete, we will need to loop through all the rules in stylesheet.rules to get the index of the rule, then call deleteRule(i) to delete it.

Changing to div

Reasoning

• Allows easier manipulation of the position, since it is not a pseudo-element
• Get width of elements easier (to calculate how much to move, max columns allowed and to center input box with column indicator)

<pre><div class="column-indicator"></div>%(line1)s</pre>
<pre><div class="column-indicator"></div>%(line2)s</pre>

tr[line] td {
	div.column-indicator {
	  border-right: 1px dashed red;
	  content: '';
	  height: 100%;
	  transform: translateX(80ch);
	  position: absolute;
	}
}

ch vs. px

Originally, I used ch as the unit for the column indicator. However, I faced some problems: