Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(42)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/labs.html

Issue 3152055: Implement about:labs (Closed)
Patch Set: chromeos fix Created 10 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/prefs/browser_prefs.cc ('k') | chrome/chrome_browser.gypi » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/labs.html
diff --git a/chrome/browser/resources/labs.html b/chrome/browser/resources/labs.html
new file mode 100644
index 0000000000000000000000000000000000000000..ccb472829e39a9e11491dcc14580c9214dc815f7
--- /dev/null
+++ b/chrome/browser/resources/labs.html
@@ -0,0 +1,311 @@
+<!DOCTYPE HTML>
+<html i18n-values="dir:textdirection;">
+<head>
+<meta charset="utf-8">
+<title i18n-content="labsTitle"></title>
+<style>
+
+body {
+ margin: 10px;
+ min-width: 47em;
+}
+
+a {
+ color: blue;
+ font-size: 103%;
+}
+
+div#header {
+ margin-bottom: 1.05em;
+ overflow: hidden;
+ padding-bottom: 1.5em;
+ padding-left: 0;
+ padding-top: 1.5em;
+ position: relative;
+}
+
+html[dir=rtl] #header {
+ padding-right: 0;
+}
+
+#header h1 {
+ background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat;
+ display: inline;
+ margin: 0;
+ padding-bottom: 43px;
+ padding-left: 75px;
+ padding-top: 40px;
+}
+
+html[dir=rtl] #header h1 {
+ background: url('../../app/theme/extensions_section.png') right no-repeat;
+ padding-right: 95px;
+ padding-left: 0;
+}
+
+h1 {
+ font-size: 156%;
+ font-weight: bold;
+ padding: 0;
+ margin: 0;
+}
+
+div.blurb {
+ padding-bottom: 1.5em;
+}
+
+div.content {
+ font-size: 88%;
+ margin-top: 5px;
+}
+
+.section-header {
+ background: #ebeff9;
+ border-top: 1px solid #b5c7de;
+ font-size: 99%;
+ padding-bottom: 2px;
+ padding-left: 5px;
+ padding-top: 3px;
+ width: 100%;
+}
+
+html[dir=rtl] .section-header {
+ padding-right: 5px;
+ padding-left: 0;
+}
+
+.section-header > table tr td:first-child {
+ width: 100%;
+}
+
+.section-header > table {
+ width: 100%;
+}
+
+.section-header-title {
+ font-weight: bold;
+}
+
+.vbox-container {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+}
+
+.wbox {
+ display: -webkit-box;
+ -webkit-box-align: stretch;
+ -webkit-box-flex: 1;
+}
+
+#top {
+ padding-right: 5px;
+}
+
+html[dir=rtl] #top {
+ padding-left: 5px;
+ padding-right: 0;
+}
+
+.experiment-enabled > td {
+ padding-bottom: 4px;
+ padding-top: 5px;
+}
+
+.experiment {
+ border-bottom: 1px solid #cdcdcd;
+}
+
+/* Indent the text related to each experiment. */
+.experiment-text {
+ padding-left: 5px;
+}
+
+html[dir=rtl] .experiment-text {
+ padding-right: 5px;
+ padding-left: 0;
+}
+
+.experiment-name {
+ font-weight: bold;
+}
+
+.no-experiments {
+ margin: 6em 0 0;
+ text-align: center;
+ font-size: 1.2em;
+}
+
+/* Match the indentation of .experiment-text. */
+.experiment-actions {
+ padding-left: 5px;
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+}
+
+html[dir=rtl] .experiment-actions {
+ padding-right: 5px;
+ padding-left: 0;
+}
+
+div.needs-restart {
+ padding-top: 10px;
+ padding-left: 5px;
+}
+
+button {
+ font-size: 104%;
+}
+
+</style>
+<script>
+
+/**
+ * This variable structure is here to document the structure that the template
+ * expects to correctly populate the page.
+ */
+var labsExperimentsDataFormat = {
+ 'labsExperiments': [
+ {
+ 'internal_name': 'Experiment ID string',
+ 'name': 'Experiment Name',
+ 'description': 'description',
+ 'enabled': true
+ }
+ ],
+ 'needsRestart': false
+};
+
+/**
+ * Takes the |labsExperimentsData| input argument which represents data about
+ * the currently available experiments and populates the html jstemplate
+ * with that data. It expects an object structure like the above.
+ * @param {Object} labsExperimentsData Detailed info about available experiments
+ */
+function renderTemplate(labsExperimentsData) {
+ // This is the javascript code that processes the template:
+ var input = new JsEvalContext(labsExperimentsData);
+ var output = document.getElementById('labsExperimentTemplate');
+ jstProcess(input, output);
+}
+
+/**
+ * Asks the C++ LabsDOMHandler to get details about the available experiments
+ * and return detailed data about the configuration. The LabsDOMHandler
+ * should reply to returnLabsExperiments() (below).
+ */
+function requestLabsExperimentsData() {
+ chrome.send('requestLabsExperiments', []);
+}
+
+/**
+ * Asks the C++ LabsDOMHandler to restart the browser (restoring tabs).
+ */
+function restartBrowser() {
+ chrome.send('restartBrowser', []);
+}
+
+/**
+ * Called by the dom_ui to re-populate the page with data representing the
+ * current state of installed experiments.
+ */
+function returnLabsExperiments(labsExperimentsData){
+ var bodyContainer = document.getElementById('body-container');
+ renderTemplate(labsExperimentsData);
+ bodyContainer.style.visibility = 'visible';
+}
+
+/**
+ * Handles a 'enable' or 'disable' button getting clicked.
+ */
+function handleEnableExperiment(node, enable) {
+ // Tell the C++ LabsDOMHandler to enable/disable the experiment.
+ chrome.send('enableLabsExperiment', [String(node.internal_name),
+ String(enable)]);
+ requestLabsExperimentsData();
+}
+
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', requestLabsExperimentsData);
+
+</script>
+</head>
+<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<div id="body-container" style="visibility:hidden">
+
+ <div id="header"><h1 i18n-content="labsLongTitle">TITLE</h1></div>
+
+ <div class="blurb" i18n-content="labsBlurb">BLURB</div>
+
+ <div id="labsExperimentTemplate">
+
+ <div id="container" class="vbox-container">
+ <div id="top" class="wbox">
+
+ <div class="section-header">
+ <table cellpadding="0" cellspacing="0"><tr valign="center">
+ <td>
+ <span class="section-header-title" i18n-content="labsTableTitle"
+ >TITLE</span>
+ </td>
+ </tr></table>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="content">
+ <div class="experiment-name no-experiments"
+ jsdisplay="labsExperiments.length === 0">
+ <div i18n-content="labsNoExperimentsAvailable"
+ >NO_EXPERIMENTS_ARE_AVAILABLE</div>
+ </div>
+
+ <div jsdisplay="labsExperiments.length > 0">
+ <div class="experiment" jsselect="labsExperiments">
+ <table width="100%" cellpadding="2" cellspacing="0">
+ <tr class="experiment-enabled">
+ <td valign="top">
+ <div class="experiment-text">
+ <div>
+ <span class="experiment-name" dir="ltr"
+ jscontent="name">NAME</span>
+ <div>
+ <span dir="ltr" jsvalues=".innerHTML:description">
+ </div>
+ </div>
+ </div>
+ <div class="experiment-actions">
+ <span>
+ <a
+ jsvalues=".internal_name:internal_name"
+ jsdisplay="enabled"
+ onclick="handleEnableExperiment(this, false)"
+ href="javascript:void(0);"
+ i18n-content="disable"
+ >DISABLE</a>
+ <a
+ jsvalues=".internal_name:internal_name"
+ jsdisplay="!enabled"
+ onclick="handleEnableExperiment(this, true)"
+ href="javascript:void(0);"
+ i18n-content="enable"
+ >ENABLE</a>
+ </span>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <div class="needs-restart" jsdisplay="needsRestart">
+ <div i18n-content="labsRestartNotice">NEEDS_RESTART</div>
+ <button type="button"
+ onclick="restartBrowser();"
+ i18n-content="labsRestartButton">RESTART</button>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
« no previous file with comments | « chrome/browser/prefs/browser_prefs.cc ('k') | chrome/chrome_browser.gypi » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698