src/tests/cefclient/resources/preferences.html - cef - Git at Google

 <!DOCTYPE HTML>
 <html>
 <head>
   <title>Preferences Test</title>

   <!-- When using the mode "code" it's important to specify charset utf-8 -->
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

   <!-- jsoneditor project from https://github.com/josdejong/jsoneditor/
        script hosting from http://cdnjs.com/libraries/jsoneditor -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.1/jsoneditor.min.css" rel="stylesheet" type="text/css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.1/jsoneditor.min.js"></script>

   <script>
     function setup() {
       if (location.hostname == 'tests' || location.hostname == 'localhost')
         return;

       alert('This page can only be run from tests or localhost.');

       // Disable all elements.
       var elements = document.getElementById("form").elements;
       for (var i = 0, element; element = elements[i++]; ) {
         element.disabled = true;
       }
     }
   </script>
 </head>
 <body bgcolor="white" onload="setup()">
   <!-- Header -->
   <div id="simple_links">
     [ <b>Simple</b> ]
     [ <a href="#" onClick="toggleView(); return false;">Advanced</a> ]
   </div>
   <div id="advanced_links" style="display:none">
     [ <a href="#" onClick="toggleView(); return false;">Simple</a> ]
     [ <b>Advanced</b> ]
   </div>

   <form id="form">

   <!-- Simple view -->
   <div id="simple">
     <p>
       This page supports display and configuration of a few sample preferences.
       <table width="100%" style="border: 1px solid #97B0F8">
         <tr>
           <td>
             <input type="checkbox" id="enable_spellchecking"/> Enable spell checking
           </td>
         </tr>
         <tr>
           <td>
             <br/>
             <input type="checkbox" id="allow_running_insecure_content"/> Allow running insecure content
           </td>
         </tr>
         <tr>
           <td>
             <br/>
             Proxy type:
             <select id="proxy_type" onChange="proxyTypeChange()">
               <option value="direct">Direct</option>
               <option value="auto_detect">Auto-Detect</option>
               <option value="pac_script">PAC Script</option>
               <option value="fixed_servers">Fixed Servers</option>
               <option value="system">System</option>
             </select>
             <input id="proxy_value" type="text" size="80" disabled/>
           </td>
         </tr>
       </table>
       <table border="0" width="100%">
         <tr>
           <td align="left">
             <input type="button" value="Refresh" onClick="refreshSimple()"/>
           </td>
           <td align="right">
             <input type="button" value="Apply Changes" onClick="applySimpleChanges()"/>
           </td>
         </tr>
       </table>
     </p>
   </div>

   <!-- Advanced view -->
   <div id="advanced" style="display:none">
     <p>
       This page displays all preferences organized in a tree structure. Arbitrary changes are
       allowed, however <b>changing preferences in arbitrary ways may result in crashes</b>. If you
       experience a crash while setting preferences then run a Debug build of CEF/Chromium and watch
       for DCHECKs in the Chromium code to figure out what went wrong.
     </p>
     <div id="jsoneditor" style="width: 100%; height: 100%;"></div>
     <table border="0" width="100%">
       <tr>
         <td align="left">
           <input type="button" value="Refresh" onClick="refreshEditor()"/>
           <input type="checkbox" id="hide_defaults"/> Show modified preferences only
         </td>
         <td align="right">
           <input type="button" value="Apply Changes" onClick="applyEditorChanges()"/>
         </td>
       </tr>
     </table>
   </div>

   </form>

   <script>
     // Reference to the JSONEditor.
     var editor = null;

     // Preferences state information.
     var preferences_state = null;

     // Toggle between the simple and advanced views.
     function toggleView() {
       var simple = document.getElementById("simple");
       var advanced = document.getElementById("advanced");
       var simple_links = document.getElementById("simple_links");
       var advanced_links = document.getElementById("advanced_links");

       if (simple.style.display == "none") {
         // Show the simple view.
         simple.style.display = "";
         simple_links.style.display = "";
         advanced.style.display = "none";
         advanced_links.style.display = "none";

         // Refresh the simple view contents.
         refreshSimple();
       } else {
         // Show the advanced view.
         simple.style.display = "none";
         simple_links.style.display = "none";
         advanced.style.display = "";
         advanced_links.style.display = "";

         if (editor == null) {
           // Create the editor.
           editor = new JSONEditor(document.getElementById("jsoneditor"));
         }

         // Refesh the editor contents.
         refreshEditor();
       }
     }

     // Send a request to C++.
     function sendRequest(request, onSuccessCallback) {
       // Results in a call to the OnQuery method in preferences_test.cpp.
       window.cefQuery({
         request: JSON.stringify(request),
         onSuccess: onSuccessCallback,
         onFailure: function(error_code, error_message) {
           alert(error_message + ' (' + error_code + ')');
         }
       });
     }

     // Get the preferences and execute |onSuccessCallback| with the resulting
     // JSON object.
     function getPreferences(include_defaults, onSuccessCallback) {
       // Create the request object.
       var request = {};
       request.name = "preferences_get";
       request.include_defaults = include_defaults;

       // Send the request to C++.
       sendRequest(
         request,
         function(response) {
           onSuccessCallback(JSON.parse(response));
         }
       );
     }

     // Set the preferences.
     function setPreferences(preferences) {
       // Create the request object.
       var request = {};
       request.name = "preferences_set";
       request.preferences = preferences;

       // Send the request to C++.
       sendRequest(
         request,
         function(response) {
           // Show the informative response message.
           alert(response);
         }
       );
     }

     // Get the global preference state.
     function getPreferenceState() {
       // Create the request object.
       var request = {};
       request.name = "preferences_state";

       // Send the request to C++.
       sendRequest(
         request,
         function(response) {
           // Populate the global state object.
           preferences_state = JSON.parse(response);

           // Refresh the simple view contents.
           refreshSimple();
         }
       );
     }

     // Refresh the editor view contents.
     function refreshEditor() {
       include_defaults = !document.getElementById("hide_defaults").checked;
       getPreferences(include_defaults, function(response) {
         // Set the JSON in the editor.
         editor.set(response);
       });
     }

     // Apply changes from the editor view.
     function applyEditorChanges() {
       setPreferences(editor.get());
     }

     // Refresh the simple view contents.
     function refreshSimple() {
       getPreferences(true, function(response) {
         // Spellcheck settings.
         if (preferences_state.spellcheck_disabled) {
           // Cannot enable spell checking when disabled via the command-line.
           document.getElementById("enable_spellchecking").checked = false;
           document.getElementById("enable_spellchecking").disabled = true;
         } else {
           document.getElementById("enable_spellchecking").checked =
               response.browser.enable_spellchecking;
         }

         // Web content settings.
         if (preferences_state.allow_running_insecure_content) {
           // Cannot disable running insecure content when enabled via the
           // command-line.
           document.getElementById("allow_running_insecure_content").checked =
               true;
           document.getElementById("allow_running_insecure_content").disabled =
               true;
         } else {
           document.getElementById("allow_running_insecure_content").checked =
               response.webkit.webprefs.allow_running_insecure_content;
         }

         // Proxy settings.
         document.getElementById("proxy_type").value = response.proxy.mode;

         // Some proxy modes have associated values.
         if (response.proxy.mode == "pac_script")
           proxy_value = response.proxy.pac_url;
         else if (response.proxy.mode == "fixed_servers")
           proxy_value = response.proxy.server;
         else
           proxy_value = null;

         if (proxy_value != null)
           document.getElementById("proxy_value").value = proxy_value;
         document.getElementById("proxy_value").disabled = (proxy_value == null);

         if (preferences_state.proxy_configured) {
           // Cannot modify proxy settings that are configured via the command-
           // line.
           document.getElementById("proxy_type").disabled = true;
           document.getElementById("proxy_value").disabled = true;
         }
       });
     }

     // Apply changes from the simple view.
     function applySimpleChanges() {
       has_preferences = false;
       preferences = {};

       // Spellcheck settings.
       if (!preferences_state.spellcheck_disabled) {
         has_preferences = true;

         preferences.browser = {};
         preferences.browser.enable_spellchecking =
             document.getElementById("enable_spellchecking").checked;
       }

       // Web content settings.
       if (!preferences_state.allow_running_insecure_content) {
         has_preferences = true;

         preferences.webkit = {};
         preferences.webkit.webprefs = {};
         preferences.webkit.webprefs.allow_running_insecure_content =
             document.getElementById("allow_running_insecure_content").checked;
       }

       // Proxy settings.
       if (!preferences_state.proxy_configured) {
         has_preferences = true;

         preferences.proxy = {};
         preferences.proxy.mode = document.getElementById("proxy_type").value;

         // Some proxy modes have associated values.
         if (preferences.proxy.mode == "pac_script") {
           preferences.proxy.pac_script =
               document.getElementById("proxy_value").value;
         } else  if (preferences.proxy.mode == "fixed_servers") {
           preferences.proxy.server =
               document.getElementById("proxy_value").value;
         }
       }

       if (has_preferences)
         setPreferences(preferences);
     }

     // Called when the proxy type is changed.
     function proxyTypeChange() {
       proxy_type = document.getElementById("proxy_type").value;
       document.getElementById("proxy_value").value = "";

       // Only enable the value field for the proxy modes that require it.
       document.getElementById("proxy_value").disabled =
           (proxy_type != "pac_script" && proxy_type != "fixed_servers");
     }

     // Retrieve global preferences state.
     getPreferenceState();
   </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Preferences Test</title>

	<!-- When using the mode "code" it's important to specify charset utf-8 -->
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

	<!-- jsoneditor project from https://github.com/josdejong/jsoneditor/
	script hosting from http://cdnjs.com/libraries/jsoneditor -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.1/jsoneditor.min.css" rel="stylesheet" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.1/jsoneditor.min.js"></script>

	<script>
	function setup() {
	if (location.hostname == 'tests' \|\| location.hostname == 'localhost')
	return;

	alert('This page can only be run from tests or localhost.');

	// Disable all elements.
	var elements = document.getElementById("form").elements;
	for (var i = 0, element; element = elements[i++]; ) {
	element.disabled = true;
	}
	}
	</script>
	</head>
	<body bgcolor="white" onload="setup()">
	<!-- Header -->
	<div id="simple_links">
	[ <b>Simple</b> ]
	[ <a href="#" onClick="toggleView(); return false;">Advanced</a> ]
	</div>
	<div id="advanced_links" style="display:none">
	[ <a href="#" onClick="toggleView(); return false;">Simple</a> ]
	[ <b>Advanced</b> ]
	</div>

	<form id="form">

	<!-- Simple view -->
	<div id="simple">
	<p>
	This page supports display and configuration of a few sample preferences.
	<table width="100%" style="border: 1px solid #97B0F8">
	<tr>
	<td>
	<input type="checkbox" id="enable_spellchecking"/> Enable spell checking
	</td>
	</tr>
	<tr>
	<td>
	<br/>
	<input type="checkbox" id="allow_running_insecure_content"/> Allow running insecure content
	</td>
	</tr>
	<tr>
	<td>
	<br/>
	Proxy type:
	<select id="proxy_type" onChange="proxyTypeChange()">
	<option value="direct">Direct</option>
	<option value="auto_detect">Auto-Detect</option>
	<option value="pac_script">PAC Script</option>
	<option value="fixed_servers">Fixed Servers</option>
	<option value="system">System</option>
	</select>
	<input id="proxy_value" type="text" size="80" disabled/>
	</td>
	</tr>
	</table>
	<table border="0" width="100%">
	<tr>
	<td align="left">
	<input type="button" value="Refresh" onClick="refreshSimple()"/>
	</td>
	<td align="right">
	<input type="button" value="Apply Changes" onClick="applySimpleChanges()"/>
	</td>
	</tr>
	</table>
	</p>
	</div>

	<!-- Advanced view -->
	<div id="advanced" style="display:none">
	<p>
	This page displays all preferences organized in a tree structure. Arbitrary changes are
	allowed, however <b>changing preferences in arbitrary ways may result in crashes</b>. If you
	experience a crash while setting preferences then run a Debug build of CEF/Chromium and watch
	for DCHECKs in the Chromium code to figure out what went wrong.
	</p>
	<div id="jsoneditor" style="width: 100%; height: 100%;"></div>
	<table border="0" width="100%">
	<tr>
	<td align="left">
	<input type="button" value="Refresh" onClick="refreshEditor()"/>
	<input type="checkbox" id="hide_defaults"/> Show modified preferences only
	</td>
	<td align="right">
	<input type="button" value="Apply Changes" onClick="applyEditorChanges()"/>
	</td>
	</tr>
	</table>
	</div>

	</form>

	<script>
	// Reference to the JSONEditor.
	var editor = null;

	// Preferences state information.
	var preferences_state = null;

	// Toggle between the simple and advanced views.
	function toggleView() {
	var simple = document.getElementById("simple");
	var advanced = document.getElementById("advanced");
	var simple_links = document.getElementById("simple_links");
	var advanced_links = document.getElementById("advanced_links");

	if (simple.style.display == "none") {
	// Show the simple view.
	simple.style.display = "";
	simple_links.style.display = "";
	advanced.style.display = "none";
	advanced_links.style.display = "none";

	// Refresh the simple view contents.
	refreshSimple();
	} else {
	// Show the advanced view.
	simple.style.display = "none";
	simple_links.style.display = "none";
	advanced.style.display = "";
	advanced_links.style.display = "";

	if (editor == null) {
	// Create the editor.
	editor = new JSONEditor(document.getElementById("jsoneditor"));
	}

	// Refesh the editor contents.
	refreshEditor();
	}
	}

	// Send a request to C++.
	function sendRequest(request, onSuccessCallback) {
	// Results in a call to the OnQuery method in preferences_test.cpp.
	window.cefQuery({
	request: JSON.stringify(request),
	onSuccess: onSuccessCallback,
	onFailure: function(error_code, error_message) {
	alert(error_message + ' (' + error_code + ')');
	}
	});
	}

	// Get the preferences and execute \|onSuccessCallback\| with the resulting
	// JSON object.
	function getPreferences(include_defaults, onSuccessCallback) {
	// Create the request object.
	var request = {};
	request.name = "preferences_get";
	request.include_defaults = include_defaults;

	// Send the request to C++.
	sendRequest(
	request,
	function(response) {
	onSuccessCallback(JSON.parse(response));
	}
	);
	}

	// Set the preferences.
	function setPreferences(preferences) {
	// Create the request object.
	var request = {};
	request.name = "preferences_set";
	request.preferences = preferences;

	// Send the request to C++.
	sendRequest(
	request,
	function(response) {
	// Show the informative response message.
	alert(response);
	}
	);
	}

	// Get the global preference state.
	function getPreferenceState() {
	// Create the request object.
	var request = {};
	request.name = "preferences_state";

	// Send the request to C++.
	sendRequest(
	request,
	function(response) {
	// Populate the global state object.
	preferences_state = JSON.parse(response);

	// Refresh the simple view contents.
	refreshSimple();
	}
	);
	}

	// Refresh the editor view contents.
	function refreshEditor() {
	include_defaults = !document.getElementById("hide_defaults").checked;
	getPreferences(include_defaults, function(response) {
	// Set the JSON in the editor.
	editor.set(response);
	});
	}

	// Apply changes from the editor view.
	function applyEditorChanges() {
	setPreferences(editor.get());
	}

	// Refresh the simple view contents.
	function refreshSimple() {
	getPreferences(true, function(response) {
	// Spellcheck settings.
	if (preferences_state.spellcheck_disabled) {
	// Cannot enable spell checking when disabled via the command-line.
	document.getElementById("enable_spellchecking").checked = false;
	document.getElementById("enable_spellchecking").disabled = true;
	} else {
	document.getElementById("enable_spellchecking").checked =
	response.browser.enable_spellchecking;
	}

	// Web content settings.
	if (preferences_state.allow_running_insecure_content) {
	// Cannot disable running insecure content when enabled via the
	// command-line.
	document.getElementById("allow_running_insecure_content").checked =
	true;
	document.getElementById("allow_running_insecure_content").disabled =
	true;
	} else {
	document.getElementById("allow_running_insecure_content").checked =
	response.webkit.webprefs.allow_running_insecure_content;
	}

	// Proxy settings.
	document.getElementById("proxy_type").value = response.proxy.mode;

	// Some proxy modes have associated values.
	if (response.proxy.mode == "pac_script")
	proxy_value = response.proxy.pac_url;
	else if (response.proxy.mode == "fixed_servers")
	proxy_value = response.proxy.server;
	else
	proxy_value = null;

	if (proxy_value != null)
	document.getElementById("proxy_value").value = proxy_value;
	document.getElementById("proxy_value").disabled = (proxy_value == null);

	if (preferences_state.proxy_configured) {
	// Cannot modify proxy settings that are configured via the command-
	// line.
	document.getElementById("proxy_type").disabled = true;
	document.getElementById("proxy_value").disabled = true;
	}
	});
	}

	// Apply changes from the simple view.
	function applySimpleChanges() {
	has_preferences = false;
	preferences = {};

	// Spellcheck settings.
	if (!preferences_state.spellcheck_disabled) {
	has_preferences = true;

	preferences.browser = {};
	preferences.browser.enable_spellchecking =
	document.getElementById("enable_spellchecking").checked;
	}

	// Web content settings.
	if (!preferences_state.allow_running_insecure_content) {
	has_preferences = true;

	preferences.webkit = {};
	preferences.webkit.webprefs = {};
	preferences.webkit.webprefs.allow_running_insecure_content =
	document.getElementById("allow_running_insecure_content").checked;
	}

	// Proxy settings.
	if (!preferences_state.proxy_configured) {
	has_preferences = true;

	preferences.proxy = {};
	preferences.proxy.mode = document.getElementById("proxy_type").value;

	// Some proxy modes have associated values.
	if (preferences.proxy.mode == "pac_script") {
	preferences.proxy.pac_script =
	document.getElementById("proxy_value").value;
	} else if (preferences.proxy.mode == "fixed_servers") {
	preferences.proxy.server =
	document.getElementById("proxy_value").value;
	}
	}

	if (has_preferences)
	setPreferences(preferences);
	}

	// Called when the proxy type is changed.
	function proxyTypeChange() {
	proxy_type = document.getElementById("proxy_type").value;
	document.getElementById("proxy_value").value = "";

	// Only enable the value field for the proxy modes that require it.
	document.getElementById("proxy_value").disabled =
	(proxy_type != "pac_script" && proxy_type != "fixed_servers");
	}

	// Retrieve global preferences state.
	getPreferenceState();
	</script>
	</body>
	</html>