Commit a593c3da authored by pfeldman@chromium.org's avatar pfeldman@chromium.org
Browse files

2011-07-04 Pavel Feldman <pfeldman@google.com>

        Web Inspector: Enable settings screen with settings for console and elements panels.
        https://bugs.webkit.org/show_bug.cgi?id=62853

        Reviewed by Yury Semikhatsky.

        * English.lproj/localizedStrings.js:
        * inspector/front-end/HelpScreen.js:
        (WebInspector.HelpScreen.prototype.hide):
        * inspector/front-end/SettingsScreen.js:
        (WebInspector.SettingsScreen):
        (WebInspector.SettingsScreen.prototype._createRadioSetting.clickListener):
        (WebInspector.SettingsScreen.prototype._createRadioSetting.get for):
        * inspector/front-end/ShortcutsScreen.js:
        (WebInspector.ShortcutsScreen.prototype.hide):
        * inspector/front-end/StylesSidebarPane.js:
        (WebInspector.StylesSidebarPane.prototype._colorFormatSettingChanged):
        (WebInspector.StylesSidebarPane.prototype._updateColorFormatFilter.get var):
        (WebInspector.StylesSidebarPane.prototype._updateColorFormatFilter):
        (WebInspector.StylesSidebarPane.prototype._changeSetting):
        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
        * inspector/front-end/inspector.css:
        (#counters):
        * inspector/front-end/inspector.js:
        (WebInspector._createGlobalStatusBarItems):
        (WebInspector._toggleSettings):
        (WebInspector._showShortcutsScreen):
        (WebInspector._hideShortcutsScreen):
        (WebInspector._showSettingsScreen.onhide):
        (WebInspector._showSettingsScreen):
        (WebInspector._hideSettingsScreen):
        (WebInspector.documentKeyDown):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@90387 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent bd1d9398
2011-07-04 Pavel Feldman <pfeldman@google.com>
Web Inspector: Enable settings screen with settings for console and elements panels.
https://bugs.webkit.org/show_bug.cgi?id=62853
Reviewed by Yury Semikhatsky.
* English.lproj/localizedStrings.js:
* inspector/front-end/HelpScreen.js:
(WebInspector.HelpScreen.prototype.hide):
* inspector/front-end/SettingsScreen.js:
(WebInspector.SettingsScreen):
(WebInspector.SettingsScreen.prototype._createRadioSetting.clickListener):
(WebInspector.SettingsScreen.prototype._createRadioSetting.get for):
* inspector/front-end/ShortcutsScreen.js:
(WebInspector.ShortcutsScreen.prototype.hide):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype._colorFormatSettingChanged):
(WebInspector.StylesSidebarPane.prototype._updateColorFormatFilter.get var):
(WebInspector.StylesSidebarPane.prototype._updateColorFormatFilter):
(WebInspector.StylesSidebarPane.prototype._changeSetting):
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
* inspector/front-end/inspector.css:
(#counters):
* inspector/front-end/inspector.js:
(WebInspector._createGlobalStatusBarItems):
(WebInspector._toggleSettings):
(WebInspector._showShortcutsScreen):
(WebInspector._hideShortcutsScreen):
(WebInspector._showSettingsScreen.onhide):
(WebInspector._showSettingsScreen):
(WebInspector._hideSettingsScreen):
(WebInspector.documentKeyDown):
2011-07-05 Shinya Kawanaka <shinyak@google.com>
 
Reviewed by Kent Tamura.
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -66,6 +66,9 @@ WebInspector.HelpScreen.prototype = {
hide: function()
{
if (!this._isShown)
return;
this._isShown = false;
document.body.removeChild(this._element);
WebInspector.currentFocusElement = this._previousFocusElement;
......
......@@ -115,6 +115,11 @@ WebInspector.Setting.prototype = {
this._eventSupport.removeEventListener(this._name, listener, thisObject);
},
get name()
{
return this._name;
},
get: function()
{
var value = this._defaultValue;
......
......@@ -35,19 +35,19 @@ WebInspector.SettingsScreen = function()
this._leftColumnElement = document.createElement("td");
this._rightColumnElement = document.createElement("td");
var p = this._appendSection("Console");
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Log XMLHttpRequests"), "monitoringXHREnabled"));
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Preserve log upon navigation"), "preserveConsoleLog"));
var p = this._appendSection(WebInspector.UIString("Elements"));
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Word wrap"), WebInspector.settings.domWordWrap));
p = this._appendSection("Elements");
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Word wrap"), "domWordWrap"));
p.appendChild(this._createRadioSetting(WebInspector.UIString("Color format"), [WebInspector.UIString("As authored"), "hex", "rgb", "hsl"]));
p = this._appendSection(WebInspector.UIString("Styles"));
p.appendChild(this._createRadioSetting(WebInspector.UIString("Color format"), [
[ WebInspector.StylesSidebarPane.ColorFormat.Original, WebInspector.UIString("As authored") ],
[ WebInspector.StylesSidebarPane.ColorFormat.HEX, "HEX: #DAC0DE" ],
[ WebInspector.StylesSidebarPane.ColorFormat.RGB, "RGB: rgb(128, 255, 255)" ],
[ WebInspector.StylesSidebarPane.ColorFormat.HSL, "HSL: hsl(300, 80%, 90%)" ] ], WebInspector.settings.colorFormat));
p = this._appendSection("Network", true);
p.appendChild(this._createCheckboxSetting(("Enable background events collection")));
p = this._appendSection("Scripts", true);
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Enable workers debugging")));
p = this._appendSection(WebInspector.UIString("Console"));
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Log XMLHttpRequests"), WebInspector.settings.monitoringXHREnabled));
p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Preserve log upon navigation"), WebInspector.settings.preserveConsoleLog));
var table = document.createElement("table");
table.className = "help-table";
......@@ -76,19 +76,17 @@ WebInspector.SettingsScreen.prototype = {
return right ? this._rightColumnElement : this._leftColumnElement;
},
_createCheckboxSetting: function(name, settingName)
_createCheckboxSetting: function(name, setting)
{
var input = document.createElement("input");
input.type = "checkbox";
input.name = name;
if (settingName) {
input.checked = WebInspector.settings[settingName].get();
function listener()
{
WebInspector.settings[settingName].set(input.checked);
}
input.addEventListener("click", listener, false);
input.checked = setting.get();
function listener()
{
setting.set(input.checked);
}
input.addEventListener("click", listener, false);
var p = document.createElement("p");
var label = document.createElement("label");
......@@ -98,7 +96,7 @@ WebInspector.SettingsScreen.prototype = {
return p;
},
_createRadioSetting: function(name, options)
_createRadioSetting: function(name, options, setting)
{
var pp = document.createElement("p");
var fieldsetElement = document.createElement("fieldset");
......@@ -106,18 +104,29 @@ WebInspector.SettingsScreen.prototype = {
legendElement.textContent = name;
fieldsetElement.appendChild(legendElement);
for (var i = 0; i < options.length; ++i) {
var p = document.createElement("p");
var label = document.createElement("label");
p.appendChild(label);
var input = document.createElement("input");
input.type = "radio";
input.name = name;
label.appendChild(input);
label.appendChild(document.createTextNode(options[i]));
function clickListener(e)
{
setting.set(e.target.value);
}
fieldsetElement.appendChild(p);
var settingValue = setting.get();
for (var i = 0; i < options.length; ++i) {
var p = document.createElement("p");
var label = document.createElement("label");
p.appendChild(label);
var input = document.createElement("input");
input.type = "radio";
input.name = setting.name;
input.value = options[i][0];
input.addEventListener("click", clickListener, false);
if (settingValue == input.value)
input.checked = true;
label.appendChild(input);
label.appendChild(document.createTextNode(options[i][1]));
fieldsetElement.appendChild(p);
}
pp.appendChild(fieldsetElement);
......
......@@ -51,6 +51,12 @@ WebInspector.ShortcutsScreen.prototype = {
this._helpScreen.show();
},
hide: function()
{
if (this._helpScreen)
this._helpScreen.hide();
},
_buildTable: function(parent, nColumns)
{
var height = 0;
......
......@@ -35,40 +35,30 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
this.settingsSelectElement.className = "select-settings";
var option = document.createElement("option");
option.value = "original";
option.action = this._changeColorFormat.bind(this);
option.label = WebInspector.UIString("As Authored");
option.value = WebInspector.StylesSidebarPane.ColorFormat.Original;
option.label = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "As authored" : "As Authored");
this.settingsSelectElement.appendChild(option);
var option = document.createElement("option");
option.value = "hex";
option.action = this._changeColorFormat.bind(this);
option.value = WebInspector.StylesSidebarPane.ColorFormat.HEX;
option.label = WebInspector.UIString("Hex Colors");
this.settingsSelectElement.appendChild(option);
option = document.createElement("option");
option.value = "rgb";
option.action = this._changeColorFormat.bind(this);
option.value = WebInspector.StylesSidebarPane.ColorFormat.RGB;
option.label = WebInspector.UIString("RGB Colors");
this.settingsSelectElement.appendChild(option);
option = document.createElement("option");
option.value = "hsl";
option.action = this._changeColorFormat.bind(this);
option.value = WebInspector.StylesSidebarPane.ColorFormat.HSL;
option.label = WebInspector.UIString("HSL Colors");
this.settingsSelectElement.appendChild(option);
// Prevent section from collapsing.
this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
var format = WebInspector.settings.colorFormat.get();
if (format === "original")
this.settingsSelectElement[0].selected = true;
else if (format === "hex")
this.settingsSelectElement[1].selected = true;
else if (format === "rgb")
this.settingsSelectElement[2].selected = true;
else if (format === "hsl")
this.settingsSelectElement[3].selected = true;
this._updateColorFormatFilter();
this.titleElement.appendChild(this.settingsSelectElement);
......@@ -80,6 +70,18 @@ WebInspector.StylesSidebarPane = function(computedStylePane)
this._computedStylePane = computedStylePane;
this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));
}
WebInspector.StylesSidebarPane.ColorFormat = {
Original: "original",
Nickname: "nickname",
HEX: "hex",
ShortHEX: "shorthex",
RGB: "rgb",
RGBA: "rgba",
HSL: "hsl",
HSLA: "hsla"
}
WebInspector.StylesSidebarPane.StyleValueDelimiters = " \t\n\"':;,/()";
......@@ -546,34 +548,36 @@ WebInspector.StylesSidebarPane.prototype = {
return false;
},
_changeSetting: function(event)
_colorFormatSettingChanged: function(event)
{
var options = this.settingsSelectElement.options;
var selectedOption = options[this.settingsSelectElement.selectedIndex];
selectedOption.action(event);
this._updateColorFormatFilter();
for (var pseudoId in this.sections) {
var sections = this.sections[pseudoId];
for (var i = 0; i < sections.length; ++i)
sections[i].update(true);
}
},
_updateColorFormatFilter: function()
{
// Select the correct color format setting again, since it needs to be selected.
var selectedIndex = 0;
var value = WebInspector.settings.colorFormat.get();
var options = this.settingsSelectElement.options;
for (var i = 0; i < options.length; ++i) {
if (options[i].value === WebInspector.settings.colorFormat.get()) {
if (options[i].value === value) {
selectedIndex = i;
break;
}
}
this.settingsSelectElement.selectedIndex = selectedIndex;
},
_changeColorFormat: function(event)
_changeSetting: function(event)
{
var selectedOption = this.settingsSelectElement[this.settingsSelectElement.selectedIndex];
var options = this.settingsSelectElement.options;
var selectedOption = options[this.settingsSelectElement.selectedIndex];
WebInspector.settings.colorFormat.set(selectedOption.value);
for (var pseudoId in this.sections) {
var sections = this.sections[pseudoId];
for (var i = 0; i < sections.length; ++i)
sections[i].update(true);
}
},
_createNewRule: function(event)
......@@ -1324,6 +1328,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
valueElement.className = "value";
this.valueElement = valueElement;
var cf = WebInspector.StylesSidebarPane.ColorFormat;
if (value) {
var self = this;
......@@ -1384,18 +1390,19 @@ WebInspector.StylePropertyTreeElement.prototype = {
swatchElement.addEventListener("dblclick", function(event) { event.stopPropagation() }, false);
var format;
if (WebInspector.settings.colorFormat.get() === "original")
format = "original";
var formatSetting = WebInspector.settings.colorFormat.get();
if (formatSetting === cf.Original)
format = cf.Original;
else if (Preferences.showColorNicknames && color.nickname)
format = "nickname";
else if (WebInspector.settings.colorFormat.get() === "rgb")
format = (color.simple ? "rgb" : "rgba");
else if (WebInspector.settings.colorFormat.get() === "hsl")
format = (color.simple ? "hsl" : "hsla");
format = cf.Nickname;
else if (formatSetting === cf.RGB)
format = (color.simple ? cf.RGB : cf.RGBA);
else if (formatSetting === cf.HSL)
format = (color.simple ? cf.HSL : cf.HSLA);
else if (color.simple)
format = (color.hasShortHex() ? "shorthex" : "hex");
format = (color.hasShortHex() ? cf.ShortHEX : cf.HEX);
else
format = "rgba";
format = cf.RGBA;
var colorValueElement = document.createElement("span");
colorValueElement.textContent = color.toString(format);
......@@ -1411,33 +1418,33 @@ WebInspector.StylePropertyTreeElement.prototype = {
// - shorthex (if has short hex)
// - hex
switch (curFormat) {
case "original":
return color.simple ? "rgb" : "rgba";
case cf.Original:
return color.simple ? cf.RGB : cf.RGBA;
case "rgb":
case "rgba":
return color.simple ? "hsl" : "hsla";
case cf.RGB:
case cf.RGBA:
return color.simple ? cf.HSL : cf.HSLA;
case "hsl":
case "hsla":
case cf.HSL:
case cf.HSLA:
if (color.nickname)
return "nickname";
return cf.Nickname;
if (color.simple)
return color.hasShortHex() ? "shorthex" : "hex";
return color.hasShortHex() ? cf.ShortHEX : cf.HEX;
else
return "original";
return cf.Original;
case "shorthex":
return "hex";
case cf.ShortHEX:
return cf.HEX;
case "hex":
return "original";
case cf.HEX:
return cf.Original;
case "nickname":
case cf.Nickname:
if (color.simple)
return color.hasShortHex() ? "shorthex" : "hex";
return color.hasShortHex() ? cf.ShortHEX : cf.HEX;
else
return "original";
return cf.Original;
default:
return null;
......@@ -1449,7 +1456,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
do {
format = nextFormat(format);
var currentValue = color.toString(format || "");
} while (format && currentValue === color.value && format !== "original");
} while (format && currentValue === color.value && format !== cf.Original);
if (format)
colorValueElement.textContent = currentValue;
......
......@@ -582,7 +582,7 @@ body.port-qt #dock-status-bar-item {
#counters {
position: absolute;
right: 16px;
right: 32px;
top: 0;
cursor: pointer;
padding: 6px 2px 6px 0px;
......
......@@ -192,8 +192,7 @@ var WebInspector = {
if (this.panels.elements)
anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
// FIXME: uncomment once ready.
// anchoredStatusBar.appendChild(this._settingsButton.element);
anchoredStatusBar.appendChild(this._settingsButton.element);
},
_dockButtonTitle: function()
......@@ -211,17 +210,44 @@ var WebInspector = {
_toggleSettings: function()
{
this._settingsButton.toggled = !this._settingsButton.toggled;
if (this._settingsButton.toggled)
this._showSettingsScreen();
else
this._hideSettingsScreen();
},
_showShortcutsScreen: function()
{
this._hideSettingsScreen();
WebInspector.shortcutsScreen.show();
},
_hideShortcutsScreen: function()
{
WebInspector.shortcutsScreen.hide();
},
_showSettingsScreen: function()
{
this._hideShortcutsScreen();
function onhide()
{
this._settingsButton.toggled = false;
delete this._settingsScreen;
}
this._settingsButton.toggled = !this._settingsButton.toggled;
if (this._settingsButton.toggled) {
if (!this._settingsScreen) {
this._settingsScreen = new WebInspector.SettingsScreen();
this._settingsScreen.show(onhide.bind(this));
} else if (this._settingsScreen) {
}
},
_hideSettingsScreen: function()
{
if (this._settingsScreen) {
this._settingsScreen.hide();
this._settingsButton.toggled = false;
delete this._settingsScreen;
}
},
......@@ -736,7 +762,7 @@ WebInspector.documentKeyDown = function(event)
if (event.keyIdentifier === "F1" ||
(event.keyIdentifier === helpKey && event.shiftKey && (!isInEditMode && !isInputElement || event.metaKey))) {
WebInspector.shortcutsScreen.show();
this._showShortcutsScreen();
event.stopPropagation();
event.preventDefault();
return;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment