Skip to content

Commit

Permalink
[DevTools] Inline EditFileSystemDialog into Workspace settings tab.
Browse files Browse the repository at this point in the history 
BUG=543457

Review URL: https://codereview.chromium.org/1411493003

Cr-Commit-Position: refs/heads/master@{#354419}
  • Loading branch information
@dgozman
dgozman authored and Commit bot committed Oct 16, 2015
1 parent 0bce8e5 commit d4b788f
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 132 deletions.
2 changes: 1 addition & 1 deletion third_party/WebKit/Source/devtools/devtools.gypi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -574,7 +574,7 @@
'front_end/script_formatter_worker/ScriptFormatterWorker.js',
],
'devtools_settings_js_files': [
'front_end/settings/EditFileSystemDialog.js',
'front_end/settings/EditFileSystemView.js',
'front_end/settings/FrameworkBlackboxSettingsTab.js',
'front_end/settings/SettingsScreen.js',
],
Expand Down
34 changes: 10 additions & 24 deletions ...ront_end/settings/EditFileSystemDialog.js → .../front_end/settings/EditFileSystemView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,12 @@
* @extends {WebInspector.VBox}
* @param {string} fileSystemPath
*/
WebInspector.EditFileSystemDialog = function(fileSystemPath)
WebInspector.EditFileSystemView = function(fileSystemPath)
{
WebInspector.VBox.call(this);
this.element.classList.add("dialog-contents", "settings-dialog", "settings-tab");
this._fileSystemPath = fileSystemPath;

var header = this.element.createChild("div", "header");
var headerText = header.createChild("span");
headerText.textContent = WebInspector.UIString("Edit file system");

var contents = this.element.createChild("div", "contents");

WebInspector.fileSystemMapping.addEventListener(WebInspector.FileSystemMapping.Events.FileMappingAdded, this._fileMappingAdded, this);
Expand Down Expand Up @@ -77,7 +73,7 @@ WebInspector.EditFileSystemDialog = function(fileSystemPath)
this._addMappingRow(entry);
}

blockHeader = contents.createChild("div", "block-header");
blockHeader = contents.createChild("div", "block-header excluded-folders-header");
blockHeader.textContent = WebInspector.UIString("Excluded folders");
this._excludedFolderListSection = contents.createChild("div", "section excluded-folders-section");
this._excludedFolderListContainer = this._excludedFolderListSection.createChild("div", "settings-list-container");
Expand All @@ -95,21 +91,17 @@ WebInspector.EditFileSystemDialog = function(fileSystemPath)

this.element.tabIndex = 0;
this._hasMappingChanges = false;

this._dialog = new WebInspector.Dialog();
this._dialog.setWrapsContent(true);
this._dialog.setMaxSize(new Size(600, 600));
this._dialog.addCloseButton();
this.show(this._dialog.element);
this._dialog.show();
}

WebInspector.EditFileSystemDialog.show = function(fileSystemPath)
{
new WebInspector.EditFileSystemDialog(fileSystemPath);
}
WebInspector.EditFileSystemView.prototype = {
dispose: function()
{
WebInspector.fileSystemMapping.removeEventListener(WebInspector.FileSystemMapping.Events.FileMappingAdded, this._fileMappingAdded, this);
WebInspector.fileSystemMapping.removeEventListener(WebInspector.FileSystemMapping.Events.FileMappingRemoved, this._fileMappingRemoved, this);
WebInspector.isolatedFileSystemManager.removeEventListener(WebInspector.IsolatedFileSystemManager.Events.ExcludedFolderAdded, this._excludedFolderAdded, this);
WebInspector.isolatedFileSystemManager.removeEventListener(WebInspector.IsolatedFileSystemManager.Events.ExcludedFolderRemoved, this._excludedFolderRemoved, this);
},

WebInspector.EditFileSystemDialog.prototype = {
_fileMappingAdded: function(event)
{
var entry = /** @type {!WebInspector.FileSystemMapping.Entry} */ (event.data);
Expand All @@ -125,8 +117,6 @@ WebInspector.EditFileSystemDialog.prototype = {
delete this._entries[key];
if (this._fileMappingsList.itemForId(key))
this._fileMappingsList.removeItem(key);
if (this._dialog)
this._dialog.contentResized();
},

/**
Expand Down Expand Up @@ -256,8 +246,6 @@ WebInspector.EditFileSystemDialog.prototype = {
this._entries[key] = entry;
var keys = Object.keys(this._entries).sort();
this._fileMappingsList.addItem(key, keys[keys.indexOf(key) + 1], !entry.configurable);
if (this._dialog)
this._dialog.contentResized();
},

/**
Expand Down Expand Up @@ -350,8 +338,6 @@ WebInspector.EditFileSystemDialog.prototype = {
// Insert configurable entries before non-configurable.
var insertBefore = readOnly ? null : this._firstNonConfigurableExcludedFolder;
this._excludedFolderList.addItem(readOnly ? WebInspector.UIString("%s (via .devtools)", path) : path, insertBefore, readOnly);
if (this._dialog)
this._dialog.contentResized();
},

/**
Expand Down
142 changes: 46 additions & 96 deletions third_party/WebKit/Source/devtools/front_end/settings/SettingsScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,122 +327,73 @@ WebInspector.WorkspaceSettingsTab = function()
this._addFileSystemRowElement = this._fileSystemsSection.createChild("div");
this._addFileSystemRowElement.appendChild(createTextButton(WebInspector.UIString("Add folder\u2026"), this._addFileSystemClicked.bind(this)));

this._editFileSystemButton = createTextButton(WebInspector.UIString("Folder options\u2026"), this._editFileSystemClicked.bind(this));
this._addFileSystemRowElement.appendChild(this._editFileSystemButton);
this._updateEditFileSystemButtonState();
/** @type {!Map<string, !Element>} */
this._elementByPath = new Map();

/** @type {!Map<string, !WebInspector.EditFileSystemView>} */
this._mappingViewByPath = new Map();

this._reset();
var fileSystemPaths = WebInspector.isolatedFileSystemManager.fileSystemPaths();
for (var i = 0; i < fileSystemPaths.length; ++i)
this._addItem(/** @type {!WebInspector.IsolatedFileSystem} */ (WebInspector.isolatedFileSystemManager.fileSystem(fileSystemPaths[i])));
}

WebInspector.WorkspaceSettingsTab.prototype = {
wasShown: function()
{
WebInspector.SettingsTab.prototype.wasShown.call(this);
this._reset();
},

_reset: function()
{
this._resetFileSystems();
},

_resetFileSystems: function()
{
this._fileSystemsListContainer.removeChildren();
var fileSystemPaths = WebInspector.isolatedFileSystemManager.fileSystemPaths();
delete this._fileSystemsList;

if (!fileSystemPaths.length) {
var noFileSystemsMessageElement = this._fileSystemsListContainer.createChild("div", "no-file-systems-message");
noFileSystemsMessageElement.textContent = WebInspector.UIString("You have no file systems added.");
return;
}

this._fileSystemsList = new WebInspector.SettingsList([{ id: "path" }], this._renderFileSystem.bind(this));
this._fileSystemsList.element.classList.add("file-systems-list");
this._fileSystemsList.addEventListener(WebInspector.SettingsList.Events.Selected, this._fileSystemSelected.bind(this));
this._fileSystemsList.addEventListener(WebInspector.SettingsList.Events.Removed, this._fileSystemRemovedfromList.bind(this));
this._fileSystemsList.addEventListener(WebInspector.SettingsList.Events.DoubleClicked, this._fileSystemDoubleClicked.bind(this));
this._fileSystemsListContainer.appendChild(this._fileSystemsList.element);
for (var i = 0; i < fileSystemPaths.length; ++i)
this._fileSystemsList.addItem(fileSystemPaths[i]);
this._updateEditFileSystemButtonState();
},

_updateEditFileSystemButtonState: function()
{
this._editFileSystemButton.disabled = !this._selectedFileSystemPath();
},

/**
* @param {!WebInspector.Event} event
*/
_fileSystemSelected: function(event)
{
this._updateEditFileSystemButtonState();
},

/**
* @param {!WebInspector.Event} event
* @param {!WebInspector.IsolatedFileSystem} fileSystem
*/
_fileSystemDoubleClicked: function(event)
_addItem: function(fileSystem)
{
var id = /** @type{?string} */ (event.data);
this._editFileSystem(id);
},
var element = this._renderFileSystem(fileSystem);
this._elementByPath.set(fileSystem.path(), element);

_editFileSystemClicked: function()
{
this._editFileSystem(this._selectedFileSystemPath());
},
this._fileSystemsListContainer.appendChild(element);

/**
* @param {?string} id
*/
_editFileSystem: function(id)
{
WebInspector.EditFileSystemDialog.show(id);
var mappingView = new WebInspector.EditFileSystemView(fileSystem.path());
this._mappingViewByPath.set(fileSystem.path(), mappingView);
mappingView.show(element);
},

/**
* @param {!Element} columnElement
* @param {{id: string, placeholder: (string|undefined), options: (!Array.<string>|undefined)}} column
* @param {?string} id
* @param {!WebInspector.IsolatedFileSystem} fileSystem
* @return {!Element}
*/
_renderFileSystem: function(columnElement, column, id)
_renderFileSystem: function(fileSystem)
{
if (!id)
return "";
var fileSystemPath = id;
var textElement = columnElement.createChild("span", "list-column-text");
var pathElement = textElement.createChild("span", "file-system-path");
var element = createElementWithClass("div", "file-system-container");
var fileSystemPath = fileSystem.path();
var textElement = element.createChild("div", "file-system-header");
var pathElement = textElement.createChild("div", "file-system-path");
pathElement.title = fileSystemPath;

const maxTotalPathLength = 55;
const maxFolderNameLength = 30;
const maxTotalPathLength = 75;
const maxFolderNameLength = 40;

var lastIndexOfSlash = fileSystemPath.lastIndexOf(WebInspector.isWin() ? "\\" : "/");
var folderName = fileSystemPath.substr(lastIndexOfSlash + 1);
var folderPath = fileSystemPath.substr(0, lastIndexOfSlash + 1);
folderPath = folderPath.trimMiddle(maxTotalPathLength - Math.min(maxFolderNameLength, folderName.length));
folderName = folderName.trimMiddle(maxFolderNameLength);

pathElement.createChild("span").textContent = WebInspector.UIString("Folder: ");

var folderPathElement = pathElement.createChild("span");
folderPathElement.textContent = folderPath;

var nameElement = pathElement.createChild("span", "file-system-path-name");
nameElement.textContent = folderName;

textElement.appendChild(createTextButton(WebInspector.UIString("Remove"), this._removeFileSystemClicked.bind(this, fileSystem)));

return element;
},

/**
* @param {!WebInspector.Event} event
* @param {!WebInspector.IsolatedFileSystem} fileSystem
*/
_fileSystemRemovedfromList: function(event)
_removeFileSystemClicked: function(fileSystem)
{
var id = /** @type{?string} */ (event.data);
if (!id)
return;
WebInspector.isolatedFileSystemManager.removeFileSystem(id);
WebInspector.isolatedFileSystemManager.removeFileSystem(fileSystem.path());
},

_addFileSystemClicked: function()
Expand All @@ -453,25 +404,24 @@ WebInspector.WorkspaceSettingsTab.prototype = {
_fileSystemAdded: function(event)
{
var fileSystem = /** @type {!WebInspector.IsolatedFileSystem} */ (event.data);
if (!this._fileSystemsList)
this._reset();
else
this._fileSystemsList.addItem(fileSystem.path());
this._addItem(fileSystem);
},

_fileSystemRemoved: function(event)
{
var fileSystem = /** @type {!WebInspector.IsolatedFileSystem} */ (event.data);
if (this._fileSystemsList.itemForId(fileSystem.path()))
this._fileSystemsList.removeItem(fileSystem.path());
if (!this._fileSystemsList.itemIds().length)
this._reset();
this._updateEditFileSystemButtonState();
},

_selectedFileSystemPath: function()
{
return this._fileSystemsList ? this._fileSystemsList.selectedId() : null;
var mappingView = this._mappingViewByPath.get(fileSystem.path());
if (mappingView) {
mappingView.dispose();
this._mappingViewByPath.delete(fileSystem.path());
}

var element = this._elementByPath.get(fileSystem.path());
if (element) {
this._elementByPath.delete(fileSystem.path());
element.remove();
}
},

__proto__: WebInspector.SettingsTab.prototype
Expand Down
2 changes: 1 addition & 1 deletion third_party/WebKit/Source/devtools/front_end/settings/module.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"components"
],
"scripts": [
"EditFileSystemDialog.js",
"EditFileSystemView.js",
"SettingsScreen.js",
"FrameworkBlackboxSettingsTab.js"
]
Expand Down
32 changes: 22 additions & 10 deletions third_party/WebKit/Source/devtools/front_end/ui/helpScreen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,11 +315,6 @@ body.dock-to-bottom .help-content {
margin-right: 20px;
}

.settings-tab .settings-list-container {
background-color: white;
margin-bottom: 10px;
}

.settings-tab .settings-list {
border: 1px solid hsl(0, 0%, 85%);
border-radius: 2px;
Expand Down Expand Up @@ -443,16 +438,30 @@ select.list-column-editor {
margin-left: 0;
}

.settings-tab .settings-list .settings-list-item .file-system-path {
.settings-tab .file-system-container {
margin-bottom: 20px;
}

.settings-tab .file-system-header {
display: flex;
flex-direction: row;
align-items: baseline;
}

.settings-tab .file-system-path {
white-space: nowrap;
font-size: 12px;
padding-left: 6px;
font-size: 1.4em;
padding-right: 5px;
-webkit-box-flex: 1;
color: hsl(210, 16%, 22%);
margin-bottom: 8px;
overflow: hidden;
flex: 0 1 auto;
margin-right: 5px;
text-overflow: ellipsis;
}

.settings-tab .settings-list .settings-list-item .file-system-path-name {
.settings-tab .file-system-path-name {
padding-right: 6px;
font-weight: bold;
}
Expand Down Expand Up @@ -481,6 +490,10 @@ select.list-column-editor {
width: 20%;
}

.excluded-folders-header {
margin-top: 10px;
}

.excluded-folders-list .settings-list-item .list-column.settings-list-column-path {
width: 100%;
}
Expand All @@ -493,7 +506,6 @@ select.list-column-editor {
.settings-dialog {
display: -webkit-flex;
-webkit-flex-direction: column;
background: white;
}

.settings-dialog .dialog-contents {
Expand Down

0 comments on commit d4b788f

Please sign in to comment.