blob: 27a1ad067cb6c7a33db3627974f0a459bbb285de [file] [log] [blame]
<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<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/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="$i18n{flagsSearchPlaceholder}" tabindex="1">
<button class="clear-search" title="Clear search" tabindex="2"></button>
</div>
</div>
<div class="flex">
<button id="experiment-reset-all" type="button" tabindex="3">$i18n{resetAllButton}</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">$i18n{flagsTitle}</h2></div>
<span id="version" class="flex">$i18n{version}</span>
</div>
<div class="blurb-container">
<span class="blurb-warning">$i18n{flagsWarningHeader}</span>
<span>$i18n{flagsBlurb}</span>
<if expr="chromeos">
<p id="owner-warning">
<span>$i18n{ownerWarning}</span>
</p>
</if>
</div>
<p class="promo">
<span id="channel-promo-beta" hidden>$i18nRaw{channelPromoBeta}</span>
<span id="channel-promo-dev" hidden>$i18nRaw{channelPromoDev}</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">
<!-- 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>
<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>
<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">$i18n{flagsNoMatches}</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="7"></a>
</div>
<div class="flex experiment-actions">$i18n{flagsNotSupported}</div>
</div>
</div>
<div class="no-match hidden">$i18n{flagsNoMatches}</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">
<button class="experiment-restart-button" type="button" tabindex="8">
$i18n{flagsRestartButton}
</button>
</div>
</div>
</div>
</div>
</div>
<script src="chrome://flags/flags.js"></script>
<script src="chrome://resources/js/jstemplate_compiled.js"></script>
</body>
</html>