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

   1 /*
   2  * Copyright (C) 2011 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {WebInspector.HelpScreen}
  34  */
  35 WebInspector.SettingsScreen = function()
  36 {
  37     WebInspector.HelpScreen.call(this, WebInspector.UIString("Settings"));
  38
  39     this._leftColumnElement = document.createElement("td");
  40     this._rightColumnElement = document.createElement("td");
  41
  42     var p = this._appendSection(WebInspector.UIString("Elements"));
  43     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Word wrap"), WebInspector.settings.domWordWrap));
  44
  45     p = this._appendSection(WebInspector.UIString("Styles"));
  46     p.appendChild(this._createRadioSetting(WebInspector.UIString("Color format"), [
  47         [ WebInspector.StylesSidebarPane.ColorFormat.Original, WebInspector.UIString("As authored") ],
  48         [ WebInspector.StylesSidebarPane.ColorFormat.HEX, "HEX: #DAC0DE" ],
  49         [ WebInspector.StylesSidebarPane.ColorFormat.RGB, "RGB: rgb(128, 255, 255)" ],
  50         [ WebInspector.StylesSidebarPane.ColorFormat.HSL, "HSL: hsl(300, 80%, 90%)" ] ], WebInspector.settings.colorFormat));
  51     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show user agent styles"), WebInspector.settings.showUserAgentStyles));
  52
  53     p = this._appendSection(WebInspector.UIString("Text editor"));
  54     p.appendChild(this._createSelectSetting(WebInspector.UIString("Indent"), [
  55             [ WebInspector.UIString("2 spaces"), WebInspector.TextEditorModel.Indent.TwoSpaces ],
  56             [ WebInspector.UIString("4 spaces"), WebInspector.TextEditorModel.Indent.FourSpaces ],
  57             [ WebInspector.UIString("8 spaces"), WebInspector.TextEditorModel.Indent.EightSpaces ],
  58             [ WebInspector.UIString("Tab character"), WebInspector.TextEditorModel.Indent.TabCharacter ]
  59         ], WebInspector.settings.textEditorIndent));
  60
  61     p = this._appendSection(WebInspector.UIString("Network"), true);
  62     if (Capabilities.canDisableCache)
  63         p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Disable cache"), WebInspector.settings.cacheDisabled));
  64     p.appendChild(this._createUserActionControl());
  65
  66     p = this._appendSection(WebInspector.UIString("Scripts"), true);
  67     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show script folders"), WebInspector.settings.showScriptFolders));
  68     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Search in content scripts"), WebInspector.settings.searchInContentScripts));
  69
  70     p = this._appendSection(WebInspector.UIString("Console"), true);
  71     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Log XMLHttpRequests"), WebInspector.settings.monitoringXHREnabled));
  72     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Preserve log upon navigation"), WebInspector.settings.preserveConsoleLog));
  73
  74     if (Preferences.hasExtensions) {
  75         var handlerSelector = new WebInspector.HandlerSelector(WebInspector.openAnchorLocationRegistry);
  76         p = this._appendSection(WebInspector.UIString("Extensions"), true);
  77         p.appendChild(this._createCustomSetting(WebInspector.UIString("Open links in"), handlerSelector.element));
  78     }
  79     var table = document.createElement("table");
  80     table.className = "help-table";
  81     var tr = document.createElement("tr");
  82     tr.appendChild(this._leftColumnElement);
  83     tr.appendChild(this._rightColumnElement);
  84     table.appendChild(tr);
  85     this.contentElement.appendChild(table);
  86 }
  87
  88 WebInspector.SettingsScreen.prototype = {
  89     /**
  90      * @param {string} name
  91      * @param {boolean=} right
  92      */
  93     _appendSection: function(name, right)
  94     {
  95         var p = document.createElement("p");
  96         p.className = "help-section";
  97         var title = document.createElement("div");
  98         title.className = "help-section-title";
  99         title.textContent = name;
 100         p.appendChild(title);
 101         this._columnElement(right).appendChild(p);
 102         return p;
 103     },
 104
 105     _columnElement: function(right)
 106     {
 107         return right ? this._rightColumnElement : this._leftColumnElement;
 108     },
 109
 110     _createCheckboxSetting: function(name, setting)
 111     {
 112         var input = document.createElement("input");
 113         input.type = "checkbox";
 114         input.name = name;
 115         input.checked = setting.get();
 116         function listener()
 117         {
 118             setting.set(input.checked);
 119         }
 120         input.addEventListener("click", listener, false);
 121
 122         var p = document.createElement("p");
 123         var label = document.createElement("label");
 124         label.appendChild(input);
 125         label.appendChild(document.createTextNode(name));
 126         p.appendChild(label);
 127         return p;
 128     },
 129
 130     _createSelectSetting: function(name, options, setting)
 131     {
 132         var fieldsetElement = document.createElement("fieldset");
 133         fieldsetElement.createChild("label").textContent = name;
 134
 135         var select = document.createElement("select");
 136         var settingValue = setting.get();
 137
 138         for (var i = 0; i < options.length; ++i) {
 139             var option = options[i];
 140             select.add(new Option(option[0], option[1]));
 141             if (settingValue === option[1])
 142                 select.selectedIndex = i;
 143         }
 144
 145         function changeListener(e)
 146         {
 147             setting.set(e.target.value);
 148         }
 149
 150         select.addEventListener("change", changeListener, false);
 151         fieldsetElement.appendChild(select);
 152
 153         var p = document.createElement("p");
 154         p.appendChild(fieldsetElement);
 155         return p;
 156     },
 157
 158     _createRadioSetting: function(name, options, setting)
 159     {
 160         var pp = document.createElement("p");
 161         var fieldsetElement = document.createElement("fieldset");
 162         var legendElement = document.createElement("legend");
 163         legendElement.textContent = name;
 164         fieldsetElement.appendChild(legendElement);
 165
 166         function clickListener(e)
 167         {
 168             setting.set(e.target.value);
 169         }
 170
 171         var settingValue = setting.get();
 172         for (var i = 0; i < options.length; ++i) {
 173             var p = document.createElement("p");
 174             var label = document.createElement("label");
 175             p.appendChild(label);
 176
 177             var input = document.createElement("input");
 178             input.type = "radio";
 179             input.name = setting.name;
 180             input.value = options[i][0];
 181             input.addEventListener("click", clickListener, false);
 182             if (settingValue == input.value)
 183                 input.checked = true;
 184
 185             label.appendChild(input);
 186             label.appendChild(document.createTextNode(options[i][1]));
 187
 188             fieldsetElement.appendChild(p);
 189         }
 190
 191         pp.appendChild(fieldsetElement);
 192         return pp;
 193     },
 194
 195     _createCustomSetting: function(name, element)
 196     {
 197         var p = document.createElement("p");
 198         var fieldsetElement = document.createElement("fieldset");
 199         fieldsetElement.createChild("label").textContent = name;
 200         fieldsetElement.appendChild(element);
 201         p.appendChild(fieldsetElement);
 202         return p;
 203     },
 204
 205     _createUserActionControl: function()
 206     {
 207         var userAgent = WebInspector.settings.userAgent.get();
 208
 209         var p = document.createElement("p");
 210         var labelElement = p.createChild("label");
 211         var checkboxElement = labelElement.createChild("input");
 212         checkboxElement.type = "checkbox";
 213         checkboxElement.checked = !!userAgent;
 214         checkboxElement.addEventListener("click", checkboxClicked.bind(this), false);
 215         labelElement.appendChild(document.createTextNode("Override User Agent"));
 216
 217         var selectSectionElement;
 218         function checkboxClicked()
 219         {
 220             if (checkboxElement.checked) {
 221                 selectSectionElement = this._createUserAgentSelectRowElement();
 222                 p.appendChild(selectSectionElement);
 223             } else {
 224                 if (selectSectionElement) {
 225                     p.removeChild(selectSectionElement);
 226                     selectSectionElement = null;
 227                 }
 228                 WebInspector.settings.userAgent.set("");
 229             }
 230         }
 231
 232         checkboxClicked.call(this);
 233         return p;
 234     },
 235
 236     _createUserAgentSelectRowElement: function()
 237     {
 238         var userAgent = WebInspector.settings.userAgent.get();
 239         const userAgents = [
 240             ["Internet Explorer 9", "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"],
 241             ["Internet Explorer 8", "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)"],
 242             ["Internet Explorer 7", "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)"],
 243
 244             ["Firefox 7 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; Intel Mac OS X 10.6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1"],
 245             ["Firefox 7 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:7.0.1) Gecko/20100101 Firefox/7.0.1"],
 246             ["Firefox 4 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"],
 247             ["Firefox 4 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"],
 248
 249             ["iPhone \u2014 iOS 5", "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"],
 250             ["iPhone \u2014 iOS 4", "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5"],
 251             ["iPad \u2014 iOS 5", "Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"],
 252             ["iPad \u2014 iOS 4", "Mozilla/5.0 (iPad; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5"],
 253
 254             ["Android 2.3 \u2014 Nexus S", "Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"],
 255             [WebInspector.UIString("Other..."), "Other"]
 256         ];
 257
 258         var fieldsetElement = document.createElement("fieldset");
 259         var selectElement = fieldsetElement.createChild("select");
 260         var otherUserAgentElement = fieldsetElement.createChild("input");
 261         otherUserAgentElement.value = userAgent;
 262         otherUserAgentElement.title = userAgent;
 263
 264         var selectionRestored = false;
 265         for (var i = 0; i < userAgents.length; ++i) {
 266             var agent = userAgents[i];
 267             selectElement.add(new Option(agent[0], agent[1]));
 268             if (userAgent === agent[1]) {
 269                 selectElement.selectedIndex = i;
 270                 selectionRestored = true;
 271             }
 272         }
 273
 274         if (!selectionRestored) {
 275             if (!userAgent)
 276                 selectElement.selectedIndex = 0;
 277             else
 278                 selectElement.selectedIndex = userAgents.length - 1;
 279         }
 280
 281         selectElement.addEventListener("change", selectionChanged.bind(this), false);
 282
 283         function selectionChanged()
 284         {
 285             var value = selectElement.options[selectElement.selectedIndex].value;
 286             if (value !== "Other") {
 287                 WebInspector.settings.userAgent.set(value);
 288                 otherUserAgentElement.value = value;
 289                 otherUserAgentElement.title = value;
 290                 otherUserAgentElement.disabled = true;
 291             } else {
 292                 otherUserAgentElement.disabled = false;
 293                 otherUserAgentElement.focus();
 294             }
 295         }
 296
 297         fieldsetElement.addEventListener("dblclick", textDoubleClicked.bind(this), false);
 298         otherUserAgentElement.addEventListener("blur", textChanged.bind(this), false);
 299
 300         function textDoubleClicked()
 301         {
 302             selectElement.selectedIndex = userAgents.length - 1;
 303             selectionChanged.call(this);
 304         }
 305
 306         function textChanged()
 307         {
 308             WebInspector.settings.userAgent.set(otherUserAgentElement.value);
 309         }
 310
 311         selectionChanged.call(this);
 312         return fieldsetElement;
 313     }
 314 }
 315
 316 WebInspector.SettingsScreen.prototype.__proto__ = WebInspector.HelpScreen.prototype;