Merge "Show tab indicators in the diff view"

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

@@ -60,6 +60,11 @@ limitations under the License.
         /* Line feed */
         content: '\A';
       }
+      .tab:before {
+        color: #C62828;
+        /* >> character */
+        content: '\00BB';
+      }
       .filler {
         background: #eee;
       }
@@ -80,6 +85,8 @@ limitations under the License.
       SEMICOLON: ';'.charCodeAt(0),
     };
 
+    var TAB_REGEX = /\t/g;
+
     Polymer({
       is: 'gr-diff-side',
 
@@ -201,6 +208,7 @@ limitations under the License.
         if (numLines > 1) {
           html = this._addNewLines(code.content, html, numLines);
         }
+        html = this._addTabIndicators(code.content, html);
 
         // If the html is equivalent to the text then it didn't get highlighted
         // or escaped. Use textContent which is faster than innerHTML.
@@ -300,6 +308,11 @@ limitations under the License.
         return result;
       },
 
+      _addTabIndicators: function(content, html) {
+        return html.replace(TAB_REGEX,
+            '<span class="style-scope gr-diff-side tab">\t</span>');
+      },
+
       _createElement: function(tagName, className) {
         var el = document.createElement(tagName);
         // When Shady DOM is being used, these classes are added to account for