chromium-status: add status field help text
The way the status field gets parsed for keywords is a bit of esoteric
knowledge -- you slowly figure it out over time based on seeing what
other people are doing.
Let's fix that by adding tooltip text that is shown whenever you mouse
over the status input field. Here we explain in clear detail how the
parsing happens.
BUG=chromium:314501
TEST=ran an appengine instance and checked the status behavior
TEST=`./tests/main_test.py` passes
Review URL: https://codereview.chromium.org/58593002
git-svn-id: svn://svn.chromium.org/chrome/trunk/tools/chromium-status@239247 0039d316-1c4b-4281-b951-d872f2087c98
diff --git a/static/js/main/main.js b/static/js/main/main.js
new file mode 100644
index 0000000..6e84d7d
--- /dev/null
+++ b/static/js/main/main.js
@@ -0,0 +1,41 @@
+// Copyright 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/*
+ * Code for the main user-visible status page.
+ */
+
+window.onload = function() {
+ document.add_new_message.message.focus();
+ help_init();
+}
+
+/*
+ * Functions for managing the help text.
+ */
+
+function help_init() {
+ // Set up the help text logic.
+ var message = document.add_new_message.message;
+ message.onmouseover = help_show;
+ message.onmousemove = help_show;
+ message.onmouseout = help_hide;
+
+ var help = document.getElementById('help');
+ help.onmouseover = help_show;
+ help.onmouseout = help_hide;
+}
+
+function help_show() {
+ var message = document.add_new_message.message;
+ var help = document.getElementById('help');
+ help.style.left = message.offsetLeft + 'px';
+ help.style.top = message.offsetTop + message.offsetHeight + 'px';
+ help.hidden = false;
+}
+
+function help_hide() {
+ var help = document.getElementById('help');
+ help.hidden = true;
+}
diff --git a/status.py b/status.py
index 05335cb..5962e78 100644
--- a/status.py
+++ b/status.py
@@ -149,6 +149,8 @@
def general_state(self):
"""Returns a string representing the state that the status message
describes.
+
+ Note: Keep in sync with main.html help text.
"""
message = self.message
closed = re.search('close', message, re.IGNORECASE)
diff --git a/stylesheets/style.css b/stylesheets/style.css
index be57f49..74b6d12 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -76,3 +76,10 @@
.throttled {
background-color: #FFFC6C;
}
+
+.help {
+ border: 1px black solid;
+ background-color: #FFFFCA;
+ position: fixed;
+ padding: 0.1em;
+}
diff --git a/templates/main.html b/templates/main.html
index 6eea667..93246cf 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,11 +1,26 @@
{% extends "base.html" %}
+{% block extra_head %}
+ <script src="js/main/main.js"></script>
+{% endblock %}
+
{% block content %}
- <script type="text/javascript">
- window.onload=function() {
- document.add_new_message.message.focus();
- }
- </script>
+ <!-- Keep in sync with status.py:Status.general_state() logic -->
+ <div id="help" class="help" hidden>
+ The message is scanned for partial matches (in the order listed)<br>
+ and will set the tree state accordingly. The scan order does <b>not</b><br>
+ correspond to the severity of the tree state.<br>
+ <br>
+ (1) "<span class="maintenance">maint</span>": The tree is closed for
+ maintenance<br>
+ (also needs to have the text
+ "close")<br>
+ (2) "<span class="throttled">throt</span>": The tree is throttled;
+ tread carefully<br>
+ (3) "<span class="closed">close</span>": The tree is closed<br>
+ (4) Otherwise, the tree is <span class="open">open</span> for business
+ </div>
+
<center>
{% if write_access %}
{% if error_message %}
