DevTools: Blackbox content scripts - frontend.

Source/devtools/front_end/settings/SettingsScreen.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 873 matching lines @@
         if (!itemId)
             return;
         var listItem = this.itemForId(itemId);
         if (!listItem)
             return;
         for (var i = 0; i < this._columns.length; ++i) {
             var column = this._columns[i];
             var columnId = column.id;
 
             var value = this._valuesProvider(itemId, columnId);
-            var textElement = this._textElements.get(itemId).get(columnId);
-            textElement.textContent = value;
-            textElement.title = value;
+            this._setTextElementContent(itemId, columnId, value);
 
             var editElement = this._editInputElements.get(itemId).get(columnId);
             this._setEditElementValue(editElement, value || "");
         }
     },
 
     /**
+     * @param {?string} itemId
+     * @param {string} columnId
+     */
+    _textElementContent: function(itemId, columnId)
+    {
+        if (!itemId)
+            return "";
+        return this._textElements.get(itemId).get(columnId).textContent.replace(/\u200B/g, "");
+    },
+
+    /**
+     * @param {string} itemId
+     * @param {string} columnId
+     * @param {string} text
+     */
+    _setTextElementContent: function(itemId, columnId, text)
+    {
+        var textElement = this._textElements.get(itemId).get(columnId);
+        textElement.textContent = text.replace(/.{4}/g, "$&\u200B");
+        textElement.title = text;
+    },
+
+    /**
      * @param {!Element} columnElement
      * @param {{id: string, placeholder: (string|undefined), options: (!Array.<string>|undefined)}} column
      * @param {?string} itemId
      */
     _renderColumn: function(columnElement, column, itemId)
     {
         var columnId = column.id;
         if (itemId === null) {
             this._createEditElement(columnElement, column, itemId);
             return;
         }
         var validItemId = itemId;
 
         if (!this._editInputElements.has(itemId))
             this._editInputElements.set(itemId, new StringMap());
         if (!this._textElements.has(itemId))
             this._textElements.set(itemId, new StringMap());
 
         var value = this._valuesProvider(itemId, columnId);
 
         var textElement = /** @type {!HTMLSpanElement} */ (columnElement.createChild("span", "list-column-text"));
-        textElement.textContent = value;
-        textElement.title = value;
         columnElement.addEventListener("click", rowClicked.bind(this), false);
         this._textElements.get(itemId).set(columnId, textElement);
+        this._setTextElementContent(itemId, columnId, value);
 
         this._createEditElement(columnElement, column, itemId, value);
 
         /**
          * @param {!Event} event
          * @this {WebInspector.EditableSettingsList}
          */
         function rowClicked(event)
         {
             if (itemId === this._editingId)
@@ skipping 110 matching lines @@
 
     /**
      * @param {?string} itemId
      * @return {boolean}
      */
     _hasChanges: function(itemId)
     {
         var columns = this.columns();
         for (var i = 0; i < columns.length; ++i) {
             var columnId = columns[i];
-            var oldValue = itemId ? this._textElements.get(itemId).get(columnId).textContent : "";
+            var oldValue = this._textElementContent(itemId, columnId);
             var newValue = this._inputElements(itemId).get(columnId).value;
             if (oldValue !== newValue)
                 return true;
         }
         return false;
     },
 
     /**
      * @param {?string} itemId
      * @param {!Event} event
@@ skipping 14 matching lines @@
         delete this._editingId;
 
         if (!this._hasChanges(itemId))
             return;
 
         if (!this._validateEdit(itemId)) {
             var columns = this.columns();
             for (var i = 0; i < columns.length; ++i) {
                 var columnId = columns[i];
                 var editElement = this._editInputElements.get(itemId).get(columnId);
-                this._setEditElementValue(editElement, this._textElements.get(itemId).get(columnId).textContent);
+                this._setEditElementValue(editElement, this._textElementContent(itemId, columnId));
                 editElement.classList.remove("editable-item-error");
             }
             return;
         }
         this._editHandler(itemId, this._data(itemId));
     },
 
     /**
      * @param {!Event} event
      */
@@ skipping 15 matching lines @@
             var columnId = columns[i];
             var editElement = this._addInputElements.get(columnId);
             this._setEditElementValue(editElement, "");
         }
     },
 
     __proto__: WebInspector.SettingsList.prototype
 }
 
 WebInspector._settingsController = new WebInspector.SettingsController();