2011-07-04 Pavel Feldman <pfeldman@google.com>
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jul 2011 08:44:59 +0000 (08:44 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jul 2011 08:44:59 +0000 (08:44 +0000)
        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: https://svn.webkit.org/repository/webkit/trunk@90387 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/English.lproj/localizedStrings.js
Source/WebCore/inspector/front-end/HelpScreen.js
Source/WebCore/inspector/front-end/Settings.js
Source/WebCore/inspector/front-end/SettingsScreen.js
Source/WebCore/inspector/front-end/ShortcutsScreen.js
Source/WebCore/inspector/front-end/StylesSidebarPane.js
Source/WebCore/inspector/front-end/inspector.css
Source/WebCore/inspector/front-end/inspector.js

index c586a24..1cf38c0 100644 (file)
@@ -1,3 +1,37 @@
+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.
index bf032d0..0d64bc4 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ
index 4c29fd6..e7ec867 100644 (file)
@@ -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;
index c13ecb7..6dae24e 100644 (file)
@@ -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;
index 794ab31..bdf49b6 100644 (file)
@@ -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);
index 027cb0e..224a43f 100644 (file)
@@ -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;
index 5bb03db..cbb7232 100644 (file)
@@ -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;
index b3565a2..15cd5ed 100644 (file)
@@ -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;
index bcdcec5..6e2040b 100644 (file)
@@ -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;