Fix bug where tabs were not taken into account for line length

Also clean up inline CSS for tab-width.

Bug: Issue 4049
Change-Id: Ie2e2b83e3da6791e32526da171e4568762bfecc9

polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder.js

@@ -431,14 +431,15 @@
       html = this._addIntralineHighlights(text, html, line.highlights);
     }
 
-    if (text.length > this._prefs.line_length) {
+    if (this._textLength(text, this._prefs.tab_size) >
+        this._prefs.line_length) {
       html = this._addNewlines(text, html);
     }
     html = this._addTabWrappers(html);
 
     // If the html is equivalent to the text then it didn't get highlighted
     // or escaped. Use textContent which is faster than innerHTML.
-    if (html == text) {
+    if (html === text) {
       td.textContent = text;
     } else {
       td.innerHTML = html;
@@ -446,6 +447,19 @@
     return td;
   };
 
+  GrDiffBuilder.prototype._textLength = function(text, tabSize) {
+    // TODO(andybons): Unicode support.
+    var numChars = 0;
+    for (var i = 0; i < text.length; i++) {
+      if (text[i] === '\t') {
+        numChars += tabSize;
+      } else {
+        numChars++;
+      }
+    }
+    return numChars;
+  };
+
   // Advance `index` by the appropriate number of characters that would
   // represent one source code character and return that index. For
   // example, for source code '<span>' the escaped html string is
@@ -553,10 +567,10 @@
     if (showTabs) {
       str += 'withIndicator';
     }
-    str += '" ';
+    str += '" style="';
     // TODO(andybons): CSS tab-size is not supported in IE.
-    str += 'style="tab-size:' + tabSize + ';';
-    str += 'style="-moz-tab-size:' + tabSize + ';';
+    str += 'tab-size:' + tabSize + ';';
+    str += '-moz-tab-size:' + tabSize + ';';
     str += '">\t</span>';
     return str;
   };

polygerrit-ui/app/elements/diff/gr-diff/gr-diff-builder_test.html

@@ -259,6 +259,11 @@ limitations under the License.
           '6789');
     });
 
+    test('text length with tabs', function() {
+      assert.equal(builder._textLength('12345', 4), 5);
+      assert.equal(builder._textLength('\t\t12', 4), 10);
+    });
+
     test('tab wrapper insertion', function() {
       var html = 'abc\tdef';
       var wrapper = builder._getTabWrapper(