components/flags_ui/resources/flags.html - chromium/src - Git at Google

 <!doctype html>
 <html dir="ltr" lang="en">
 <head>
 <meta charset="utf-8">
 <if expr="not is_ios">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
 </if>

 <link rel="stylesheet" href="flags.css">

 <if expr="is_ios">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <!-- TODO(crbug.com/487000): Remove this once injected by web. -->
   <script src="chrome://resources/js/ios/web_ui.js"></script>
 </if>

 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
 <script src="chrome://resources/js/util.js"></script>
 </head>
 <body>
 <div id="header">
   <div class="flex-container">
     <div class="flex">
       <div class="search-container">
         <input type="text" id="search" placeholder="Search flags" tabindex="1"
             autocomplete="off" spellcheck="false">
         <button class="clear-search" title="Clear search" tabindex="2"></button>
       </div>
     </div>
     <div class="flex">
       <button id="experiment-reset-all" type="button" tabindex="3">
         Reset all to default
       </button>
     </div>
   </div>
 </div>
 <div id="body-container" style="visibility:hidden">
   <div id="flagsTemplate">
     <div class="flex-container">
       <div class="flex"><h2 class="section-header-title">Experiments</h2></div>
       <span id="version" class="flex">$i18n{version}</span>
     </div>
     <div class="blurb-container">
       <span class="blurb-warning">
          Warning: Experimental features ahead!
       </span>
       <span>
         By enabling these features, you could lose browser data or
         compromise your security or privacy. Enabled features apply to all
         users of this browser.
       </span>
 <if expr="chromeos">
       <p id="owner-warning">
         <span>Flags that apply system-wide can only be set by the owner: $i18n{ownerEmail}</span>
       </p>
 </if>
     </div>
     <p class="promo">
       <span id="channel-promo-beta" hidden>
         Interested in cool new Chrome features? Try our
         <a href="https://chrome.com/beta">beta channel</a>.
       </span>
       <span id="channel-promo-dev" hidden>
         Interested in cool new Chrome features? Try our
         <a href="https://chrome.com/dev">dev channel</a>
       </span>
     </p>
     <ul class="tabs" role="tablist">
       <li class="selected">
         <a href="#tab-content-available" id="tab-available" class="tab" role="tab"
             aria-selected="true"
             aria-controls="panel1"
             tabindex="4">Available</a>
         <div id="tab-content-available" class="tab-content"
             role="tabpanel" aria-labelledby="tab-available" aria-hidden="false">
         </div>
         <div id="tab-content-available-template" class="template hidden">
           <!-- Non default experiments. -->
           <div jsselect="supportedFeatures"
               jsvalues="id:internal_name; class: is_default ? 'hidden' : 'experiment'"
               jsdisplay="!is_default">
             <div class="experiment-default"
                 jsvalues="class: is_default ? 'experiment-default flex-container'
                     : 'experiment-switched flex-container'">
               <div class="flex">
                 <h3 class="experiment-name" jscontent="name"
                     jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
                 <p>
                   <span jsvalues=".innerHTML:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
                   <textarea class="experiment-origin-list-value"
                       jsvalues=".internal_name:internal_name; .value:origin_list_value"
                       tabindex="7"></textarea>
                 </div>
                 <a class="permalink" jsvalues="href: '#' + internal_name"
                     jscontent="'#' + internal_name" tabindex="6"></a>
               </div>
               <div class="flex experiment-actions">
                 <div jsdisplay="options && options.length > 0">
                   <select class="experiment-select" tabindex="6"
                       jsvalues=".internal_name:internal_name;.disabled:!enabled;">
                     <option jsvalues=".selected:selected;"
                         jsselect="options"
                         jscontent="description">
                     </option>
                   </select>
                 </div>
                 <select class="experiment-enable-disable" tabindex="6"
                     jsdisplay="enabled !== undefined"
                     jsvalues=".internal_name:internal_name;">
                   <option jsvalues=".selected:!enabled; data-default: enabled ? 1 : 0"
                       value="disabled">Disabled</option>
                   <option jsvalues=".selected:enabled; data-default: !enabled ? 1 : 0"
                       value="enabled">Enabled</option>
                   </option>
                 </select>
               </div>
             </div>
           </div>
           <!-- Experiments with default settings. -->
           <div class="experiment" jsselect="supportedFeatures"
               jsvalues="id:internal_name; class: is_default ? 'experiment' : 'hidden'"
               jsdisplay="is_default">
             <div class="experiment-default"
                 jsvalues="class: is_default ? 'experiment-default flex-container'
                     : 'experiment-switched flex-container'">
               <div class="flex">
                 <h3 class="experiment-name" jscontent="name"
                     jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
                 <p>
                   <span jsvalues=".innerHTML:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
                   <textarea class="experiment-origin-list-value"
                       jsvalues=".internal_name:internal_name; .value:origin_list_value"
                       tabindex="7"></textarea>
                 </div>
                 <a class="permalink" jsvalues="href: '#' + internal_name"
                     jscontent="'#' + internal_name" tabindex="6"></a>
               </div>
               <div class="flex experiment-actions">
                 <div jsdisplay="options && options.length > 0">
                   <select class="experiment-select" tabindex="6"
                       jsvalues=".internal_name:internal_name;.disabled:!enabled">
                     <option jsvalues=".selected:selected;"
                         jsselect="options"
                         jscontent="description">
                     </option>
                   </select>
                 </div>
                 <!-- Represent enabled / disabled options in a drop down -->
                 <select class="experiment-enable-disable" tabindex="6"
                     jsdisplay="enabled !== undefined"
                     jsvalues=".internal_name:internal_name;">
                   <option jsvalues=".selected:!enabled; data-default:!enabled ? 1 : 0"
                       value="disabled">Disabled</option>
                   <option jsvalues=".selected:enabled; data-default: enabled ? 1 : 0"
                       value="enabled">Enabled</option>
                 </select>
               </div>
             </div>
           </div>
           <div class="no-match hidden">No matching experiments</div>
         </div>
       </li>
 <!-- Unsupported experiments are not shown on iOS -->
 <if expr="not is_ios">
       <li>
         <a href="#tab-content-unavailable" id="tab-unavailable" class="tab" role="tab"
            aria-selected="false" aria-controls="panel2"
            tabindex="5">Unavailable</a>
         <div id="tab-content-unavailable" class="tab-content"
             role="tabpanel" aria-labelledby="tab-unavailable" aria-hidden="false">
           <div class="experiment"
               jsselect="unsupportedFeatures"
               jsvalues="id:internal_name">
             <div class="experiment-default flex-container"
                 jsvalues="class: is_default ? 'experiment-default flex-container'
                     : 'experiment-switched flex-container'">
               <div class="flex">
                 <h3 class="experiment-name"
                     jscontent="name">Name</h3>
                 <p>
                   <span jsvalues=".innerHTML:description"></span>
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <a class="permalink"
                     jsvalues="href: '#' + internal_name"
                     jscontent="'#' + internal_name" tabindex="8"></a>
               </div>
               <div class="flex experiment-actions">Not available on your platform.</div>
             </div>
           </div>
           <div class="no-match hidden">
             No matching experiments
           </div>
         </div>
       </li>
 </if>
     </ul>
     <div id="needs-restart" jsvalues="class:needsRestart ? 'show' : ''">
       <div class="flex-container">
         <div class="flex restart-notice" jstcache="0">$i18n{flagsRestartNotice}</div>
         <div class="flex">
 <if expr="not is_ios">
           <button id="experiment-restart-button" type="button" tabindex="9">
 <if expr="not chromeos">
           Relaunch Now
 </if>
 <if expr="chromeos">
           Restart Now
 </if>
           </button>
 </if>
         </div>
       </div>
     </div>
   </div>
 </div>
 <script src="chrome://flags/flags.js"></script>
 <script src="chrome://resources/js/jstemplate_compiled.js"></script>
 </body>
 </html>
	<!doctype html>
	<html dir="ltr" lang="en">
	<head>
	<meta charset="utf-8">
	<if expr="not is_ios">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
	</if>

	<link rel="stylesheet" href="flags.css">

	<if expr="is_ios">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
	<!-- TODO(crbug.com/487000): Remove this once injected by web. -->
	<script src="chrome://resources/js/ios/web_ui.js"></script>
	</if>

	<script src="chrome://resources/js/cr.js"></script>
	<script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
	<script src="chrome://resources/js/util.js"></script>
	</head>
	<body>
	<div id="header">
	<div class="flex-container">
	<div class="flex">
	<div class="search-container">
	<input type="text" id="search" placeholder="Search flags" tabindex="1"
	autocomplete="off" spellcheck="false">
	<button class="clear-search" title="Clear search" tabindex="2"></button>
	</div>
	</div>
	<div class="flex">
	<button id="experiment-reset-all" type="button" tabindex="3">
	Reset all to default
	</button>
	</div>
	</div>
	</div>
	<div id="body-container" style="visibility:hidden">
	<div id="flagsTemplate">
	<div class="flex-container">
	<div class="flex"><h2 class="section-header-title">Experiments</h2></div>
	<span id="version" class="flex">$i18n{version}</span>
	</div>
	<div class="blurb-container">
	<span class="blurb-warning">
	Warning: Experimental features ahead!
	</span>
	<span>
	By enabling these features, you could lose browser data or
	compromise your security or privacy. Enabled features apply to all
	users of this browser.
	</span>
	<if expr="chromeos">
	<p id="owner-warning">
	<span>Flags that apply system-wide can only be set by the owner: $i18n{ownerEmail}</span>
	</p>
	</if>
	</div>
	<p class="promo">
	<span id="channel-promo-beta" hidden>
	Interested in cool new Chrome features? Try our
	<a href="https://chrome.com/beta">beta channel</a>.
	</span>
	<span id="channel-promo-dev" hidden>
	Interested in cool new Chrome features? Try our
	<a href="https://chrome.com/dev">dev channel</a>
	</span>
	</p>
	<ul class="tabs" role="tablist">
	<li class="selected">
	<a href="#tab-content-available" id="tab-available" class="tab" role="tab"
	aria-selected="true"
	aria-controls="panel1"
	tabindex="4">Available</a>
	<div id="tab-content-available" class="tab-content"
	role="tabpanel" aria-labelledby="tab-available" aria-hidden="false">
	</div>
	<div id="tab-content-available-template" class="template hidden">
	<!-- Non default experiments. -->
	<div jsselect="supportedFeatures"
	jsvalues="id:internal_name; class: is_default ? 'hidden' : 'experiment'"
	jsdisplay="!is_default">
	<div class="experiment-default"
	jsvalues="class: is_default ? 'experiment-default flex-container'
	: 'experiment-switched flex-container'">
	<div class="flex">
	<h3 class="experiment-name" jscontent="name"
	jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
	<p>
	<span jsvalues=".innerHTML:description"></span> –
	<span class="platforms" jscontent="supported_platforms.join(', ')"></span>
	</p>
	<div jsdisplay="origin_list_value!==null">
	<textarea class="experiment-origin-list-value"
	jsvalues=".internal_name:internal_name; .value:origin_list_value"
	tabindex="7"></textarea>
	</div>
	<a class="permalink" jsvalues="href: '#' + internal_name"
	jscontent="'#' + internal_name" tabindex="6"></a>
	</div>
	<div class="flex experiment-actions">
	<div jsdisplay="options && options.length > 0">
	<select class="experiment-select" tabindex="6"
	jsvalues=".internal_name:internal_name;.disabled:!enabled;">
	<option jsvalues=".selected:selected;"
	jsselect="options"
	jscontent="description">
	</option>
	</select>
	</div>
	<select class="experiment-enable-disable" tabindex="6"
	jsdisplay="enabled !== undefined"
	jsvalues=".internal_name:internal_name;">
	<option jsvalues=".selected:!enabled; data-default: enabled ? 1 : 0"
	value="disabled">Disabled</option>
	<option jsvalues=".selected:enabled; data-default: !enabled ? 1 : 0"
	value="enabled">Enabled</option>
	</option>
	</select>
	</div>
	</div>
	</div>
	<!-- Experiments with default settings. -->
	<div class="experiment" jsselect="supportedFeatures"
	jsvalues="id:internal_name; class: is_default ? 'experiment' : 'hidden'"
	jsdisplay="is_default">
	<div class="experiment-default"
	jsvalues="class: is_default ? 'experiment-default flex-container'
	: 'experiment-switched flex-container'">
	<div class="flex">
	<h3 class="experiment-name" jscontent="name"
	jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
	<p>
	<span jsvalues=".innerHTML:description"></span> –
	<span class="platforms" jscontent="supported_platforms.join(', ')"></span>
	</p>
	<div jsdisplay="origin_list_value!==null">
	<textarea class="experiment-origin-list-value"
	jsvalues=".internal_name:internal_name; .value:origin_list_value"
	tabindex="7"></textarea>
	</div>
	<a class="permalink" jsvalues="href: '#' + internal_name"
	jscontent="'#' + internal_name" tabindex="6"></a>
	</div>
	<div class="flex experiment-actions">
	<div jsdisplay="options && options.length > 0">
	<select class="experiment-select" tabindex="6"
	jsvalues=".internal_name:internal_name;.disabled:!enabled">
	<option jsvalues=".selected:selected;"
	jsselect="options"
	jscontent="description">
	</option>
	</select>
	</div>
	<!-- Represent enabled / disabled options in a drop down -->
	<select class="experiment-enable-disable" tabindex="6"
	jsdisplay="enabled !== undefined"
	jsvalues=".internal_name:internal_name;">
	<option jsvalues=".selected:!enabled; data-default:!enabled ? 1 : 0"
	value="disabled">Disabled</option>
	<option jsvalues=".selected:enabled; data-default: enabled ? 1 : 0"
	value="enabled">Enabled</option>
	</select>
	</div>
	</div>
	</div>
	<div class="no-match hidden">No matching experiments</div>
	</div>
	</li>
	<!-- Unsupported experiments are not shown on iOS -->
	<if expr="not is_ios">
	<li>
	<a href="#tab-content-unavailable" id="tab-unavailable" class="tab" role="tab"
	aria-selected="false" aria-controls="panel2"
	tabindex="5">Unavailable</a>
	<div id="tab-content-unavailable" class="tab-content"
	role="tabpanel" aria-labelledby="tab-unavailable" aria-hidden="false">
	<div class="experiment"
	jsselect="unsupportedFeatures"
	jsvalues="id:internal_name">
	<div class="experiment-default flex-container"
	jsvalues="class: is_default ? 'experiment-default flex-container'
	: 'experiment-switched flex-container'">
	<div class="flex">
	<h3 class="experiment-name"
	jscontent="name">Name</h3>
	<p>
	<span jsvalues=".innerHTML:description"></span>
	<span class="platforms" jscontent="supported_platforms.join(', ')"></span>
	</p>
	<a class="permalink"
	jsvalues="href: '#' + internal_name"
	jscontent="'#' + internal_name" tabindex="8"></a>
	</div>
	<div class="flex experiment-actions">Not available on your platform.</div>
	</div>
	</div>
	<div class="no-match hidden">
	No matching experiments
	</div>
	</div>
	</li>
	</if>
	</ul>
	<div id="needs-restart" jsvalues="class:needsRestart ? 'show' : ''">
	<div class="flex-container">
	<div class="flex restart-notice" jstcache="0">$i18n{flagsRestartNotice}</div>
	<div class="flex">
	<if expr="not is_ios">
	<button id="experiment-restart-button" type="button" tabindex="9">
	<if expr="not chromeos">
	Relaunch Now
	</if>
	<if expr="chromeos">
	Restart Now
	</if>
	</button>
	</if>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script src="chrome://flags/flags.js"></script>
	<script src="chrome://resources/js/jstemplate_compiled.js"></script>
	</body>
	</html>