Changeset 140124 in webkit


Ignore:
Timestamp:
Jan 18, 2013 4:27:38 AM (11 years ago)
Author:
vsevik@chromium.org
Message:

Web Inspector: Add early version of file system mappings editor to settings.
​https://bugs.webkit.org/show_bug.cgi?id=107136

Reviewed by Pavel Feldman.

Source/WebCore:

FileMapping simplified to use only one type of entries.
Added start/stopBatchUpdates to FileSystemWorkspaceProvider for better TabbedPane performance.
Added fileSystemProject experiment for file system support and (early and ugly) file system mappings editor behind this experiment.

  • English.lproj/localizedStrings.js:
  • WebCore.gypi:
  • inspector/front-end/FileMapping.js:

(WebInspector.FileMapping):
(WebInspector.FileMapping.prototype._entryMatchesURL):
(WebInspector.FileMapping.prototype._entryURIPrefix):
(WebInspector.FileMapping.prototype.hasMappingForURL):
(WebInspector.FileMapping.prototype._innerURIForURL):
(WebInspector.FileMapping.prototype.uriForURL):
(WebInspector.FileMapping.prototype.urlForURI):
(WebInspector.FileMapping.prototype.mappingEntries):
(WebInspector.FileMapping.prototype.setMappingEntries):
(WebInspector.FileMapping.prototype.set _loadFromSettings.get this):
(WebInspector.FileMapping.prototype.set _loadFromSettings):
(WebInspector.FileMapping.Entry):

  • inspector/front-end/FileSystemWorkspaceProvider.js:

(WebInspector.FileSystemWorkspaceProvider.prototype._fileSystemRemoved):

  • inspector/front-end/IsolatedFileSystemModel.js:

(WebInspector.IsolatedFileSystemModel.prototype._fileSystemAdded):

  • inspector/front-end/Settings.js:

(WebInspector.ExperimentsSettings):

  • inspector/front-end/SettingsScreen.js:

(WebInspector.WorkspaceSettingsTab):
(WebInspector.WorkspaceSettingsTab.prototype._createFileSystemsEditor):
(WebInspector.WorkspaceSettingsTab.prototype._createShowTextInput):
(WebInspector.WorkspaceSettingsTab.prototype._createEditTextInput):
(WebInspector.WorkspaceSettingsTab.prototype._createRemoveButton):
(WebInspector.WorkspaceSettingsTab.prototype._createAddButton):
(WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow.removeFileSystemClicked):
(WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow.fileSystemRemoved):
(WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow):
(WebInspector.WorkspaceSettingsTab.prototype._addFileSystemClicked):
(WebInspector.WorkspaceSettingsTab.prototype._fileSystemAdded):
(WebInspector.WorkspaceSettingsTab.prototype._createFileMappingEditor):
(WebInspector.WorkspaceSettingsTab.prototype._addMappingRow.removeMappingClicked):
(WebInspector.WorkspaceSettingsTab.prototype._addMappingRow):
(WebInspector.WorkspaceSettingsTab.prototype._addFileMappingClicked):

  • inspector/front-end/helpScreen.css:

(.settings-tab .file-systems-editor input.file-system-path):
(.settings-tab .file-mappings-editor .workspace-settings-row input):
(.settings-tab .file-mappings-editor .workspace-settings-row input.file-mapping-url):
(#workspace-tab-content .button:hover):
(#workspace-tab-content .workspace-settings-row:hover .button):
(#workspace-tab-content .workspace-settings-row .button):
(#workspace-tab-content .workspace-settings-row .remove-button):
(#workspace-tab-content .workspace-settings-row .add-button):
(#workspace-tab-content .workspace-settings-row .file-system-add-button):
(#workspace-tab-content .workspace-settings-row .file-system-add-button:hover):

  • inspector/front-end/addIcon.png: Added.

LayoutTests:

  • inspector/file-mapping.html:
Location:
trunk
Files:
1 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r140123 r140124  
     12013-01-17  Vsevolod Vlasov  <vsevik@chromium.org>
     2
     3        Web Inspector: Add early version of file system mappings editor to settings.
     4        https://bugs.webkit.org/show_bug.cgi?id=107136
     5
     6        Reviewed by Pavel Feldman.
     7
     8        * inspector/file-mapping.html:
     9
    1102013-01-18  Eugene Klyuchnikov  <eustas.bug@gmail.com>
    211

  • trunk/LayoutTests/inspector/file-mapping.html

    r139860 r140124  
    1111        }
    1212    };
    13    
    14     function createMockMappingEntry(urlPrefix, pathPrefix)
    15     {
    16         var result = {};
    17         result.urlPrefix = urlPrefix;
    18         result.pathPrefix = pathPrefix;
    19         return result;
    20     }
    2113
    2214    // At first fill file mapping with entries.
    2315    var fileMapping = new WebInspector.FileMapping(new MockFileSystemMapping());
    2416    var mappingEntries = [];
    25     mappingEntries.push(createMockMappingEntry("http://localhost", "/var/www"));
    26     mappingEntries.push(createMockMappingEntry("http://www.example.com", "/home/example.com"));
    27     fileMapping.setMappings(mappingEntries);
     17    mappingEntries.push(new WebInspector.FileMapping.Entry("http://localhost", "/var/www"));
     18    mappingEntries.push(new WebInspector.FileMapping.Entry("http://www.example.com", "/home/example.com"));
     19    mappingEntries.push(new WebInspector.FileMapping.Entry("http://www.foo.com", "/bar/"));
     20    fileMapping.setMappingEntries(mappingEntries);
    2821
    2922    // Then create another file mapping to make sure it is correctly restored from the settings.

  • trunk/Source/WebCore/ChangeLog

    r140123 r140124  
     12013-01-17  Vsevolod Vlasov  <vsevik@chromium.org>
     2
     3        Web Inspector: Add early version of file system mappings editor to settings.
     4        https://bugs.webkit.org/show_bug.cgi?id=107136
     5
     6        Reviewed by Pavel Feldman.
     7
     8        FileMapping simplified to use only one type of entries.
     9        Added start/stopBatchUpdates to FileSystemWorkspaceProvider for better TabbedPane performance.
     10        Added fileSystemProject experiment for file system support and (early and ugly) file system mappings editor behind this experiment.
     11
     12        * English.lproj/localizedStrings.js:
     13        * WebCore.gypi:
     14        * inspector/front-end/FileMapping.js:
     15        (WebInspector.FileMapping):
     16        (WebInspector.FileMapping.prototype._entryMatchesURL):
     17        (WebInspector.FileMapping.prototype._entryURIPrefix):
     18        (WebInspector.FileMapping.prototype.hasMappingForURL):
     19        (WebInspector.FileMapping.prototype._innerURIForURL):
     20        (WebInspector.FileMapping.prototype.uriForURL):
     21        (WebInspector.FileMapping.prototype.urlForURI):
     22        (WebInspector.FileMapping.prototype.mappingEntries):
     23        (WebInspector.FileMapping.prototype.setMappingEntries):
     24        (WebInspector.FileMapping.prototype.set _loadFromSettings.get this):
     25        (WebInspector.FileMapping.prototype.set _loadFromSettings):
     26        (WebInspector.FileMapping.Entry):
     27        * inspector/front-end/FileSystemWorkspaceProvider.js:
     28        (WebInspector.FileSystemWorkspaceProvider.prototype._fileSystemRemoved):
     29        * inspector/front-end/IsolatedFileSystemModel.js:
     30        (WebInspector.IsolatedFileSystemModel.prototype._fileSystemAdded):
     31        * inspector/front-end/Settings.js:
     32        (WebInspector.ExperimentsSettings):
     33        * inspector/front-end/SettingsScreen.js:
     34        (WebInspector.WorkspaceSettingsTab):
     35        (WebInspector.WorkspaceSettingsTab.prototype._createFileSystemsEditor):
     36        (WebInspector.WorkspaceSettingsTab.prototype._createShowTextInput):
     37        (WebInspector.WorkspaceSettingsTab.prototype._createEditTextInput):
     38        (WebInspector.WorkspaceSettingsTab.prototype._createRemoveButton):
     39        (WebInspector.WorkspaceSettingsTab.prototype._createAddButton):
     40        (WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow.removeFileSystemClicked):
     41        (WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow.fileSystemRemoved):
     42        (WebInspector.WorkspaceSettingsTab.prototype._addFileSystemRow):
     43        (WebInspector.WorkspaceSettingsTab.prototype._addFileSystemClicked):
     44        (WebInspector.WorkspaceSettingsTab.prototype._fileSystemAdded):
     45        (WebInspector.WorkspaceSettingsTab.prototype._createFileMappingEditor):
     46        (WebInspector.WorkspaceSettingsTab.prototype._addMappingRow.removeMappingClicked):
     47        (WebInspector.WorkspaceSettingsTab.prototype._addMappingRow):
     48        (WebInspector.WorkspaceSettingsTab.prototype._addFileMappingClicked):
     49        * inspector/front-end/helpScreen.css:
     50        (.settings-tab .file-systems-editor input.file-system-path):
     51        (.settings-tab .file-mappings-editor .workspace-settings-row input):
     52        (.settings-tab .file-mappings-editor .workspace-settings-row input.file-mapping-url):
     53        (#workspace-tab-content .button:hover):
     54        (#workspace-tab-content .workspace-settings-row:hover .button):
     55        (#workspace-tab-content .workspace-settings-row .button):
     56        (#workspace-tab-content .workspace-settings-row .remove-button):
     57        (#workspace-tab-content .workspace-settings-row .add-button):
     58        (#workspace-tab-content .workspace-settings-row .file-system-add-button):
     59        (#workspace-tab-content .workspace-settings-row .file-system-add-button:hover):
     60        * inspector/front-end/addIcon.png: Added.
     61
    1622013-01-18  Eugene Klyuchnikov  <eustas.bug@gmail.com>
    263

  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r139614 r140124  
    444444localizedStrings["Word wrap"] = "Word wrap";
    445445localizedStrings["Workers"] = "Workers";
     446localizedStrings["Workspace"] = "Workspace";
    446447localizedStrings["XHR Load"] = "XHR Load";
    447448localizedStrings["XHR Ready State Change"] = "XHR Ready State Change";
    … …  
    830831localizedStrings["Live Edit"] = "Live Edit";
    831832localizedStrings["Live edit"] = "Live edit";
     833localizedStrings["File mapping url"] = "File mapping url";
     834localizedStrings["File mapping path"] = "File mapping path";
     835localizedStrings["Add file system"] = "Add file system";
     836localizedStrings["File systems"] = "File systems";
     837localizedStrings["Mappings"] = "Mappings";
     838localizedStrings["Add"] = "Add";

  • trunk/Source/WebCore/WebCore.gypi

    r140115 r140124  
    54095409        ],
    54105410        'webinspector_image_files': [
     5411            'inspector/front-end/Images/addIcon.png',
    54115412            'inspector/front-end/Images/applicationCache.png',
    54125413            'inspector/front-end/Images/back.png',

  • trunk/Source/WebCore/inspector/front-end/FileMapping.js

    r139978 r140124  
    3737    this._fileSystemMapping = fileSystemMapping;
    3838    this._mappingEntriesSetting = WebInspector.settings.createSetting("fileMappingEntries", []);
    39     /** @type {Array.<WebInspector.FileMapping.MappingEntry>} */
    40     this._mappingEntries = [];
    41     this._deserialize(/** @type {Array.<WebInspector.FileMapping.MappingEntry>} */ (this._mappingEntriesSetting.get()));
     39    /** @type {Array.<WebInspector.FileMapping.Entry>} */
     40    this._entries = [];
     41    this._loadFromSettings();
    4242}
    4343
    44 /** @typedef {{urlPrefix: string, pathPrefix: string}} */
    45 WebInspector.FileMapping.SerializedMappingEntry;
    46 
    4744WebInspector.FileMapping.prototype = {
     45    /**
     46     * @param {WebInspector.FileMapping.Entry} entry
     47     * @param {string} url
     48     * @return {boolean}
     49     */
     50    _entryMatchesURL: function(entry, url)
     51    {
     52        return url.indexOf(entry.urlPrefix) === 0;
     53    },
     54   
     55    /**
     56     * @param {WebInspector.FileMapping.Entry} entry
     57     * @return {?string}
     58     */
     59    _entryURIPrefix: function(entry)
     60    {
     61        return this._fileSystemMapping.uriForPath(entry.pathPrefix);
     62    },
     63   
    4864    /**
    4965     * @param {string} url
    … …  
    5268    hasMappingForURL: function(url)
    5369    {
    54         for (var i = 0; i < this._mappingEntries.length; ++i) {
    55             if (this._mappingEntries[i].matchesURL(url))
    56                 return true;
     70        return !!this._innerURIForURL(url);
     71    },
     72   
     73    /**
     74     * @param {string} url
     75     * @return {?string}
     76     */
     77    _innerURIForURL: function(url)
     78    {
     79        for (var i = 0; i < this._entries.length; ++i) {
     80            var entry = this._entries[i];
     81            var uriPrefix = this._entryURIPrefix(entry);
     82            if (uriPrefix && this._entryMatchesURL(entry, url))
     83                return uriPrefix + url.substring(entry.urlPrefix.length);
    5784        }
    58         return false;
     85        return null;
    5986    },
    6087   
    … …  
    6592    uriForURL: function(url)
    6693    {
    67         for (var i = 0; i < this._mappingEntries.length; ++i) {
    68             var uri = this._mappingEntries[i].uriForURL(url);
    69             if (typeof uri === "string")
    70                 return uri;
    71         }
    7294        // FIXME: FileMapping should be network project aware. It should return correct uri for network project uiSourceCodes.
    73         return url;
     95        return this._innerURIForURL(url) || url;
    7496    },
    7597   
    … …  
    80102    urlForURI: function(uri)
    81103    {
    82         for (var i = 0; i < this._mappingEntries.length; ++i) {
    83             if (this._mappingEntries[i].matchesURI(uri))
    84                 return this._mappingEntries[i].urlForURI(uri);
     104        for (var i = 0; i < this._entries.length; ++i) {
     105            var entry = this._entries[i];
     106            var uriPrefix = this._entryURIPrefix(entry);
     107            if (uriPrefix && uri.indexOf(uriPrefix) === 0)
     108                return entry.urlPrefix + uri.substring(uriPrefix.length);
    85109        }
    86110        return "";
    … …  
    88112
    89113    /**
    90      * @param {Array.<WebInspector.FileMapping.SerializedMappingEntry>} serializedMappingEntries
     114     * @return {Array.<WebInspector.FileMapping.Entry>}
    91115     */
    92     setMappings: function(serializedMappingEntries)
     116    mappingEntries: function()
    93117    {
    94         this._deserialize(serializedMappingEntries);
    95         this._serialize();
     118        return this._entries.slice();
    96119    },
    97120
    98121    /**
    99      * @return {Array.<WebInspector.FileMapping.MappingEntry>}
     122     * @param {Array.<WebInspector.FileMapping.Entry>} mappingEntries
    100123     */
    101     mappings: function()
     124    setMappingEntries: function(mappingEntries)
    102125    {
    103         return this._mappingEntries.slice();
     126        this._entries = mappingEntries;
     127        this._mappingEntriesSetting.set(mappingEntries);
    104128    },
    105129
    106     /**
    107      * @param {Array.<WebInspector.FileMapping.SerializedMappingEntry>} serializedMappingEntries
    108      */
    109     _deserialize: function(serializedMappingEntries)
     130    _loadFromSettings: function()
    110131    {
    111         this._mappingEntries = [];
    112         for (var i = 0; i < serializedMappingEntries.length; ++i)
    113             this._mappingEntries.push(WebInspector.FileMapping.MappingEntry.deserialize(serializedMappingEntries[i], this._fileSystemMapping));
    114     },
    115 
    116     _serialize: function()
    117     {
    118         var savedEntries = [];
    119         for (var i = 0; i < this._mappingEntries.length; ++i)
    120             savedEntries.push(this._mappingEntries[i].serialize());
    121         this._mappingEntriesSetting.set(savedEntries);
     132        var savedEntries = this._mappingEntriesSetting.get();
     133        this._entries = [];
     134        for (var i = 0; i < savedEntries.length; ++i) {
     135            var entry = new WebInspector.FileMapping.Entry(savedEntries[i].urlPrefix, savedEntries[i].pathPrefix);
     136            this._entries.push(entry);
     137        }
    122138    },
    123139
    … …  
    129145 * @param {string} urlPrefix
    130146 * @param {string} pathPrefix
    131  * @param {?string} uriPrefix
    132147 */
    133 WebInspector.FileMapping.MappingEntry = function(urlPrefix, pathPrefix, uriPrefix)
     148WebInspector.FileMapping.Entry = function(urlPrefix, pathPrefix)
    134149{
    135     this._urlPrefix = urlPrefix;
    136     this._pathPrefix = pathPrefix;
    137     this._uriPrefix = uriPrefix;
    138 }
    139 
    140 /**
    141  * @param {WebInspector.FileMapping.SerializedMappingEntry} serializedMappingEntry
    142  * @param {WebInspector.FileSystemMapping} fileSystemMapping
    143  */
    144 WebInspector.FileMapping.MappingEntry.deserialize = function(serializedMappingEntry, fileSystemMapping)
    145 {
    146     var uriPrefix = fileSystemMapping.uriForPath(serializedMappingEntry.pathPrefix);
    147     return new WebInspector.FileMapping.MappingEntry(serializedMappingEntry.urlPrefix, serializedMappingEntry.pathPrefix, uriPrefix);
    148 }
    149 
    150 WebInspector.FileMapping.MappingEntry.prototype = {
    151     /**
    152      * @param {string} url
    153      * @return {boolean}
    154      */
    155     matchesURL: function(url)
    156     {
    157         return url.indexOf(this._urlPrefix) === 0;
    158     },
    159    
    160     /**
    161      * @param {string} uri
    162      * @return {boolean}
    163      */
    164     matchesURI: function(uri)
    165     {
    166         if (!this._uriPrefix)
    167             return false;
    168         return uri.indexOf(this._uriPrefix) === 0;
    169     },
    170    
    171     /**
    172      * @param {string} url
    173      * @return {?string}
    174      */
    175     uriForURL: function(url)
    176     {
    177         if (this._uriPrefix && this.matchesURL(url))
    178             return this._uriPrefix + url.substring(this._urlPrefix.length);
    179         return null;
    180     },
    181    
    182     /**
    183      * @param {string} uri
    184      * @return {string}
    185      */
    186     urlForURI: function(uri)
    187     {
    188         if (this.matchesURI(uri))
    189             return this._urlPrefix + uri.substring(this._uriPrefix.length);
    190         return "";
    191     },
    192    
    193     /**
    194      * @return {Object}
    195      */
    196     serialize: function()
    197     {
    198         return { urlPrefix: this._urlPrefix, pathPrefix: this._pathPrefix };
    199     },
    200 
    201     __proto__: WebInspector.Object.prototype
     150    this.urlPrefix = urlPrefix;
     151    this.pathPrefix = pathPrefix;
    202152}
    203153

  • trunk/Source/WebCore/inspector/front-end/FileSystemWorkspaceProvider.js

    r139978 r140124  
    131131    _fileSystemRemoved: function(event)
    132132    {
     133        WebInspector.startBatchUpdate();
    133134        var fileSystemPath = /** @type {string} */ (event.data);
    134135        for (var uri in this._files[fileSystemPath])
    135136            this._removeFile(fileSystemPath, uri);
     137        WebInspector.endBatchUpdate();
    136138    },
    137139

  • trunk/Source/WebCore/inspector/front-end/IsolatedFileSystemModel.js

    r139978 r140124  
    7575
    7676    /**
    77      * @param {function(string)} callback
     77     * @param {function(?string)} callback
    7878     */
    7979    addFileSystem: function(callback)
    … …  
    135135    _fileSystemAdded: function(errorMessage, fileSystem)
    136136    {
    137         if (errorMessage) {
    138             console.error("Error: " + errorMessage);
    139             return;
    140         }
    141         if (!fileSystem)
    142             return;
    143137        var fileSystemPath;
    144         if (fileSystem) {
     138        if (errorMessage)
     139            WebInspector.showErrorMessage(errorMessage)
     140        else if (fileSystem) {
    145141            this._innerAddFileSystem(fileSystem);
    146142            fileSystemPath = fileSystem.fileSystemPath;
    147143        }
     144
    148145        if (this._selectFileSystemPathCallback) {
    149146            this._selectFileSystemPathCallback(fileSystemPath);

  • trunk/Source/WebCore/inspector/front-end/Settings.js

    r139634 r140124  
    210210    this.cssRegions = this._createExperiment("cssRegions", "CSS Regions Support");
    211211    this.showOverridesInDrawer = this._createExperiment("showOverridesInDrawer", "Show Overrides in drawer");
     212    this.fileSystemProject = this._createExperiment("fileSystemProject", "File system folders in Sources Panel");
    212213
    213214    this._cleanUpSetting();

  • trunk/Source/WebCore/inspector/front-end/SettingsScreen.js

    r139873 r140124  
    5252    if (!WebInspector.experimentsSettings.showOverridesInDrawer.isEnabled())
    5353        this._tabbedPane.appendTab(WebInspector.SettingsScreen.Tabs.Overrides, WebInspector.UIString("Overrides"), new WebInspector.OverridesSettingsTab());
     54    if (WebInspector.experimentsSettings.fileSystemProject.isEnabled())
     55        this._tabbedPane.appendTab(WebInspector.SettingsScreen.Tabs.Workspace, WebInspector.UIString("Workspace"), new WebInspector.WorkspaceSettingsTab());
    5456    if (WebInspector.experimentsSettings.experimentsEnabled)
    5557        this._tabbedPane.appendTab(WebInspector.SettingsScreen.Tabs.Experiments, WebInspector.UIString("Experiments"), new WebInspector.ExperimentsSettingsTab());
    … …  
    6668    General: "general",
    6769    Overrides: "overrides",
     70    Workspace: "workspace",
    6871    Experiments: "experiments",
    6972    Shortcuts: "shortcuts"
    … …  
    437440 * @extends {WebInspector.SettingsTab}
    438441 */
     442WebInspector.WorkspaceSettingsTab = function()
     443{
     444    WebInspector.SettingsTab.call(this, WebInspector.UIString("Workspace"), "workspace-tab-content");
     445    this._createFileSystemsEditor();
     446    this._createFileMappingEditor();
     447}
     448
     449WebInspector.WorkspaceSettingsTab.prototype = {
     450    _createFileSystemsEditor: function()
     451    {
     452        var p = this._appendSection(WebInspector.UIString("File systems"));
     453        this._fileSystemsEditor = p.createChild("p", "file-systems-editor");
     454
     455        this._addFileSystemRowElement = this._fileSystemsEditor.createChild("div", "workspace-settings-row");
     456        var addFileSystemButton = this._addFileSystemRowElement.createChild("input", "file-system-add-button");
     457        addFileSystemButton.type = "button";
     458        addFileSystemButton.value = WebInspector.UIString("Add file system");
     459        addFileSystemButton.addEventListener("click", this._addFileSystemClicked.bind(this));
     460
     461        var fileSystemPaths = WebInspector.isolatedFileSystemModel.mapping().fileSystemPaths();
     462        for (var i = 0; i < fileSystemPaths.length; ++i)
     463            this._addFileSystemRow(fileSystemPaths[i]);
     464
     465        return this._fileSystemsEditor;
     466    },
     467
     468    /**
     469     * @return {Element}
     470     */
     471    _createShowTextInput: function(className, value)
     472    {
     473        var inputElement = document.createElement("input");
     474        inputElement.addStyleClass(className);
     475        inputElement.type = "text";
     476        inputElement.value = value;
     477        inputElement.title = value;
     478        inputElement.disabled = true;
     479        return inputElement;
     480    },
     481
     482    /**
     483     * @return {Element}
     484     */
     485    _createEditTextInput: function(className, placeHolder)
     486    {
     487        var inputElement = document.createElement("input");
     488        inputElement.addStyleClass(className);
     489        inputElement.type = "text";
     490        inputElement.placeholder = placeHolder;
     491        return inputElement;
     492    },
     493
     494    /**
     495     * @param {function(Event)} handler
     496     * @return {Element}
     497     */
     498    _createRemoveButton: function(handler)
     499    {
     500        var removeButton = document.createElement("button");
     501        removeButton.addStyleClass("button");
     502        removeButton.addStyleClass("remove-button");
     503        removeButton.value = WebInspector.UIString("Remove");
     504        removeButton.addEventListener("click", handler, false);
     505        return removeButton;
     506    },
     507
     508    /**
     509     * @param {function(Event)} handler
     510     * @return {Element}
     511     */
     512    _createAddButton: function(handler)
     513    {
     514        var addButton = document.createElement("button");
     515        addButton.addStyleClass("button");
     516        addButton.addStyleClass("add-button");
     517        addButton.value = WebInspector.UIString("Add");
     518        addButton.addEventListener("click", handler, false);
     519        return addButton;
     520    },
     521
     522    /**
     523     * @param {string} fileSystemPath
     524     */
     525    _addFileSystemRow: function(fileSystemPath)
     526    {
     527        var fileSystemRow = document.createElement("div");
     528        fileSystemRow.addStyleClass("workspace-settings-row");
     529        fileSystemRow.addStyleClass("file-system-row");
     530        this._fileSystemsEditor.insertBefore(fileSystemRow, this._addFileSystemRowElement);
     531
     532        fileSystemRow.appendChild(this._createShowTextInput("file-system-path", fileSystemPath));
     533        var removeFileSystemButton = this._createRemoveButton(removeFileSystemClicked.bind(this));
     534        fileSystemRow.appendChild(removeFileSystemButton);
     535
     536        function removeFileSystemClicked()
     537        {
     538            removeFileSystemButton.disabled = true;
     539            WebInspector.isolatedFileSystemModel.removeFileSystem(fileSystemPath, fileSystemRemoved.bind(this));
     540        }
     541       
     542        function fileSystemRemoved()
     543        {
     544            this._fileSystemsEditor.removeChild(fileSystemRow);
     545            removeFileSystemButton.disabled = false;
     546        }
     547    },
     548
     549    _addFileSystemClicked: function()
     550    {
     551        WebInspector.isolatedFileSystemModel.addFileSystem(this._fileSystemAdded.bind(this));
     552    },
     553
     554    /**
     555     * @param {?string} fileSystemPath
     556     */
     557    _fileSystemAdded: function(fileSystemPath)
     558    {
     559        if (fileSystemPath)
     560            this._addFileSystemRow(fileSystemPath);
     561    },
     562
     563    _createFileMappingEditor: function()
     564    {
     565        var p = this._appendSection(WebInspector.UIString("Mappings"));
     566        this._fileMappingEditor = p.createChild("p", "file-mappings-editor");
     567
     568        this._addMappingRowElement = this._fileMappingEditor.createChild("div", "workspace-settings-row");
     569
     570        this._urlInputElement = this._createEditTextInput("file-mapping-url", WebInspector.UIString("File mapping url"));
     571        this._addMappingRowElement.appendChild(this._urlInputElement);
     572        this._pathInputElement = this._createEditTextInput("file-mapping-path", WebInspector.UIString("File mapping path"));
     573        this._addMappingRowElement.appendChild(this._pathInputElement);
     574
     575        this._addMappingRowElement.appendChild(this._createAddButton(this._addFileMappingClicked.bind(this)));
     576
     577        var mappingEntries = WebInspector.fileMapping.mappingEntries();
     578        for (var i = 0; i < mappingEntries.length; ++i)
     579            this._addMappingRow(mappingEntries[i]);
     580
     581        return this._fileMappingEditor;
     582    },
     583
     584    /**
     585     * @param {WebInspector.FileMapping.Entry} mappingEntry
     586     */
     587    _addMappingRow: function(mappingEntry)
     588    {
     589        var fileMappingRow = document.createElement("div");
     590        fileMappingRow.addStyleClass("workspace-settings-row");
     591        this._fileMappingEditor.insertBefore(fileMappingRow, this._addMappingRowElement);
     592
     593        fileMappingRow.appendChild(this._createShowTextInput("file-mapping-url", mappingEntry.urlPrefix));
     594        fileMappingRow.appendChild(this._createShowTextInput("file-mapping-path", mappingEntry.pathPrefix));
     595
     596        fileMappingRow.appendChild(this._createRemoveButton(removeMappingClicked.bind(this)));
     597
     598        function removeMappingClicked()
     599        {
     600            var index = Array.prototype.slice.call(fileMappingRow.parentElement.childNodes).indexOf(fileMappingRow);
     601            var mappingEntries = WebInspector.fileMapping.mappingEntries();
     602            mappingEntries.splice(index, 1);
     603            WebInspector.fileMapping.setMappingEntries(mappingEntries);
     604            this._fileMappingEditor.removeChild(fileMappingRow);
     605        }
     606    },
     607
     608    _addFileMappingClicked: function()
     609    {
     610        if (!this._urlInputElement.value || !this._pathInputElement.value)
     611            return;
     612        var mappingEntries = WebInspector.fileMapping.mappingEntries();
     613        var mappingEntry = new WebInspector.FileMapping.Entry(this._urlInputElement.value, this._pathInputElement.value);
     614        mappingEntries.push(mappingEntry);
     615        WebInspector.fileMapping.setMappingEntries(mappingEntries);
     616        this._addMappingRow(mappingEntry);
     617        this._urlInputElement.value = "";
     618        this._pathInputElement.value = "";
     619    },
     620
     621    __proto__: WebInspector.SettingsTab.prototype
     622}
     623
     624/**
     625 * @constructor
     626 * @extends {WebInspector.SettingsTab}
     627 */
    439628WebInspector.ExperimentsSettingsTab = function()
    440629{

  • trunk/Source/WebCore/inspector/front-end/helpScreen.css

    r137154 r140124  
    437437    background-color: rgb(221, 221, 221);
    438438}
     439
     440
     441
     442.settings-tab .file-systems-editor input.file-system-path {
     443    width: 383px;
     444}
     445
     446.settings-tab .file-mappings-editor .workspace-settings-row input {
     447    width: 190px;
     448}
     449
     450.settings-tab .file-mappings-editor .workspace-settings-row input.file-mapping-url {
     451    margin-right: 3px;
     452}
     453
     454#workspace-tab-content .button:hover {
     455    opacity: 1.0 !important;
     456}
     457
     458#workspace-tab-content .workspace-settings-row:hover .button {
     459    visibility: visible;
     460    opacity: 0.4;
     461}
     462
     463#workspace-tab-content .workspace-settings-row .button {
     464    width: 10px;
     465    height: 10px;
     466    border: none;
     467    -webkit-appearance: none;
     468    background-color: transparent;
     469    visibility: hidden;
     470    background-position: center;
     471    margin: 0 0 0 4px;
     472}
     473
     474#workspace-tab-content .workspace-settings-row .remove-button {
     475    background-image: url(Images/deleteIcon.png);
     476}
     477
     478#workspace-tab-content .workspace-settings-row .add-button {
     479    background-image: url(Images/addIcon.png);
     480}
     481
     482#workspace-tab-content .workspace-settings-row .file-system-add-button {
     483    color: gray;
     484    border: none;
     485    border-bottom: 1px transparent solid;
     486    -webkit-appearance: none;
     487    background: transparent;
     488}
     489
     490#workspace-tab-content .workspace-settings-row .file-system-add-button:hover {
     491    border-bottom: 1px gray dashed;
     492}
Note: See TracChangeset for help on using the changeset viewer.