Merge lp:~methanal-developers/methanal/459864-improve-default-appearance into lp:methanal

[Jonathan Jacobs]

[lp:~methanal-developers/methanal/459864-improve-default-appearance]

232. By Jonathan Jacobs on 2012-07-23

Don't zebra stripe simple forms.

233. By Jonathan Jacobs on 2012-07-23

Tweak table zebra striping.

234. By Jonathan Jacobs on 2012-07-23

Expander colour tweaks.

235. By Jonathan Jacobs on 2012-07-27

Button style tweaks.

[Tristan Seligmann (mithrandi)]

The code changes here look good, and I'm just going to rubber-stamp the style changes.

review: Approve

=== modified file 'methanal/js/Methanal/Tests/TestView.js'
--- methanal/js/Methanal/Tests/TestView.js	2011-08-20 12:02:37 +0000
+++ methanal/js/Methanal/Tests/TestView.js	2012-07-27 14:39:22 +0000
@@ -986,7 +986,7 @@
      * value for valid date values.
      */
     function test_displayValue(self) {
-        self.testControl({value: null},
+        self.testControl({value: '2012-07-18'},
             function (control) {
                 // TextInput._updateDisplayValue should have been called by the
                 // time the node has been inserted, if it has then the first

=== modified file 'methanal/js/Methanal/Tests/Util.js'
--- methanal/js/Methanal/Tests/Util.js	2011-08-19 13:27:53 +0000
+++ methanal/js/Methanal/Tests/Util.js	2012-07-27 14:39:22 +0000
@@ -53,7 +53,6 @@
  */
 Methanal.Tests.Util.setUpForm = function setUpForm(form) {
     var makeWidgetChildNode = Methanal.Tests.Util.makeWidgetChildNode;
-    makeWidgetChildNode(form, 'span', 'form-error');
 
     Methanal.Util.addElementClass(
         makeWidgetChildNode(form, 'span', 'modifiedIndicator'),

=== modified file 'methanal/js/Methanal/View.js'
--- methanal/js/Methanal/View.js	2012-07-16 11:58:01 +0000
+++ methanal/js/Methanal/View.js	2012-07-27 14:39:22 +0000
@@ -745,6 +745,7 @@
         Methanal.View.FormAction.upcall(self, '__init__', node);
         self.actionID = args.actionID;
         self.allowViewOnly = args.allowViewOnly;
+        self.identifier = args.identifier;
     },
 
 
@@ -799,6 +800,10 @@
         self._buttonNode = self.node.getElementsByTagName('button')[0];
         Methanal.View.ActionButton.upcall(self, 'nodeInserted');
         self.widgetParent.loadedUp(self);
+        if (self.identifier) {
+            Methanal.Util.addElementClass(
+                self._buttonNode, 'methanal-action-button-' + self.identifier);
+        }
     },
 
 
@@ -1023,7 +1028,8 @@
 
 
     function nodeInserted(self) {
-        self._formErrorNode = self.nodeById('form-error');
+        self._submissionErrorTooltip = Methanal.Util.Tooltip(
+            self.node, null, 'top', 'error-tooltip submission-error-tooltip');
         self._validationErrorTooltip = Methanal.Util.Tooltip(
             self.node, null, 'top', 'error-tooltip submission-error-tooltip ' +
                                     'form-validation-error-tooltip');
@@ -1138,8 +1144,7 @@
      * Clear submission errors.
      */
     function clearError(self) {
-        Methanal.Util.removeNodeContent(self._formErrorNode);
-        Methanal.Util.addElementClass(self._formErrorNode, 'hidden');
+        self._submissionErrorTooltip.hide();
     },
 
 
@@ -1149,32 +1154,21 @@
      * @type failure: C{Divmod.Defer.Failure}
      */
     function setError(self, failure) {
-        var T = Methanal.Util.DOMBuilder(self.node.ownerDocument);
-
-        var a = T('a', {'class': 'methanal-submit-error-action'}, [
-            T('img', {
-                'src':   '/static/Methanal/images/icons/page_white_error.png',
-                'title': 'Toggle traceback'})]);
+        var D = Methanal.Util.DOMBuilder(self.node.ownerDocument);
 
         function showTraceback() {
-            var traceback = T('pre', {}, [failure.toPrettyText()]);
-            this.parentNode.parentNode.appendChild(traceback);
-            this.onclick = hideTraceback;
-        }
-
-        function hideTraceback() {
-            var node = this.parentNode.parentNode;
-            node.removeChild(node.lastChild);
-            this.onclick = showTraceback;
-        }
-
-        a.onclick = showTraceback;
-
-        Methanal.Util.replaceNodeContent(self._formErrorNode, [
-            T('h1', {}, ['Error submitting form', a]),
-            T('div', {'class': 'methanal-submit-error-message'}, [
-                self.formatFailure(failure)])]);
-        Methanal.Util.removeElementClass(self._formErrorNode, 'hidden');
+            var traceback = D('pre', {}, [failure.toPrettyText()]);
+            this.parentNode.appendChild(traceback);
+            this.onclick = null;
+        }
+
+        var header = D('h2', {}, ['Submission error']);
+        header.onclick = showTraceback;
+        var errorText = D('span', {}, [header,
+            D('p', {}, [self.formatFailure(failure)])]);
+        self._submissionErrorTooltip.setText(errorText);
+        self._submissionErrorTooltip.show();
+        self._submissionErrorTooltip.scrollIntoView(true);
     },
 
 
@@ -1241,9 +1235,11 @@
     },
 
 
-    function valueChanged(self, control) {
+    function valueChanged(self, control, updateModified/*=true*/) {
         Methanal.View.LiveForm.upcall(self, 'valueChanged', control);
-        self.formModified(true);
+        if (updateModified === undefined || !!updateModified) {
+            self.formModified(true);
+        }
     },
 
 
@@ -1826,20 +1822,36 @@
 
 
     /**
+     * Show the display value element.
+     */
+    function _showDisplayValue(self) {
+        Methanal.Util.removeElementClass(self._displayValueNode, 'hidden');
+    },
+
+
+    /**
      * Enable the human-readable "display value" representation.
      */
-    function enableDisplayValue(self) {
-        Methanal.Util.removeElementClass(self._displayValueNode, 'hidden');
+    function enableDisplayValue(self, update) {
+        self._showDisplayValue();
         self._useDisplayValue = true;
         self._updateDisplayValue();
     },
 
 
     /**
+     * Hide the display value element.
+     */
+    function _hideDisplayValue(self) {
+        Methanal.Util.addElementClass(self._displayValueNode, 'hidden');
+    },
+
+
+    /**
      * Disable the human-readable "display value" representation.
      */
     function disableDisplayValue(self) {
-        Methanal.Util.addElementClass(self._displayValueNode, 'hidden');
+        self._hideDisplayValue();
         self._useDisplayValue = false;
     },
 
@@ -1875,7 +1887,13 @@
         if (value && self.baseValidator(value) === undefined) {
             displayValue = self.makeDisplayValue(value);
         }
-        Methanal.Util.replaceNodeText(self._displayValueNode, displayValue);
+        if (displayValue) {
+            Methanal.Util.replaceNodeText(
+                self._displayValueNode, displayValue);
+            self._showDisplayValue(false);
+        } else {
+            self._hideDisplayValue();
+        }
     },
 
 

=== modified file 'methanal/js/Methanal/Widgets.js'
--- methanal/js/Methanal/Widgets.js	2011-08-19 13:27:53 +0000
+++ methanal/js/Methanal/Widgets.js	2012-07-27 14:39:22 +0000
@@ -1118,6 +1118,17 @@
 
 
     /**
+     * Handler for the "onchange" DOM event.
+     *
+     * Inform the containing form that our value has changed.
+     */
+    function onChange(self, node, updateModified) {
+        self.getForm().valueChanged(self, updateModified);
+        return true;
+    },
+
+
+    /**
      * Set the values of the result input.
      *
      * @type  values: C{Array} of L{LookupResult}
@@ -1138,6 +1149,7 @@
     function setValue(self, data) {
         self._waitForForm.addCallback(function () {
             self._lookupForm.populateForm(data, true);
+            self._lookupForm._initialisedOnce = true;
         });
     },
 
@@ -1204,6 +1216,7 @@
 
         self.results = {};
         self.storeResults = false;
+        self._initialisedOnce = false;
     },
 
 
@@ -1360,7 +1373,7 @@
         }
 
         // Trigger Lookup.onChange so the parent form refreshes validators.
-        self.widgetParent.onChange(control.node);
+        self.widgetParent.onChange(control.node, self._initialisedOnce);
 
         // Don't trigger when the result input is changed or when there are
         // validation errors.
@@ -1614,9 +1627,14 @@
         self._groups = {};
         self.fullyLoaded = false;
         if (_makeThrobber === undefined) {
-            _makeThrobber = function() { return self._makeThrobber(); };
+            _makeThrobber = function() { return self._defaultMakeThrobber(); };
         }
-        self.throbber = _makeThrobber();
+        self._makeThrobber = _makeThrobber;
+    },
+
+
+    function nodeInserted(self) {
+        self.throbber = self._makeThrobber();
         self.throbber.start();
     },
 
@@ -1624,7 +1642,7 @@
     /**
      * Create a throbber object.
      */
-    function _makeThrobber(self) {
+    function _defaultMakeThrobber(self) {
         return Methanal.Util.Throbber(self);
     },
 

=== removed file 'methanal/static/images/group-bg.png'
Binary files methanal/static/images/group-bg.png	2010-12-17 09:26:57 +0000 and methanal/static/images/group-bg.png	1970-01-01 00:00:00 +0000 differ
=== removed file 'methanal/static/images/icons/dependency_parent.gif'
Binary files methanal/static/images/icons/dependency_parent.gif	2010-07-06 14:14:44 +0000 and methanal/static/images/icons/dependency_parent.gif	1970-01-01 00:00:00 +0000 differ
=== modified file 'methanal/static/styles/methanal-ie.css'
--- methanal/static/styles/methanal-ie.css	2011-07-13 15:51:04 +0000
+++ methanal/static/styles/methanal-ie.css	2012-07-27 14:39:22 +0000
@@ -1,13 +1,12 @@
 form {
     margin: 0;
-}
-
-.methanal-multi-input {
-    border: 1px outset #ddd;
-}
-
-.methanal-form-group {
-    border-color: white;
+    padding: 0;
+}
+
+button {
+    border-color: #444;
+    width: auto;
+    overflow: visible;
 }
 
 .modal-dialog-overlay {
@@ -27,28 +26,19 @@
     border: 2px solid #999;
 }
 
-.methanal-tab-view .methanal-tab-labels {
-    padding-top: 0;
-}
-
 .methanal-tab-view .methanal-tab-label {
-    /* Simulate inline-block. */
-    zoom: 1;
     display: inline;
-}
-
-.methanal-tab-view .methanal-tab-label a {
     zoom: 1;
-    margin-bottom: -0.5em;
-}
-
-.methanal-tab-view .selected-tab-label a {
-    padding-top: 0.5em;
-}
-
-.methanal-tab-view .methanal-tab-group-label {
-    margin-bottom: -0.5em;
-    padding: 0.25em;
+}
+
+.methanal-tab-view .selected-tab-label {
+    border-bottom: 1px solid #fff;
+    position: relative;
+}
+
+.methanal-tab-view .methanal-tab-group {
+    position: relative;
+    top: 1px;
 }
 
 .dependancy-parent {

=== modified file 'methanal/static/styles/methanal-ie6.css'
--- methanal/static/styles/methanal-ie6.css	2010-12-17 09:18:55 +0000
+++ methanal/static/styles/methanal-ie6.css	2012-07-27 14:39:22 +0000
@@ -12,15 +12,6 @@
     width: 20em;
 }
 
-.methanal-error {
-    background: none;
-    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/Methanal/images/error-icon.png', sizingMethod='image');
-}
-
-.methanal-error-text {
-    font-size: 75%;
-}
-
 .dependancy-child {
     border-bottom: 1px solid #ccc;
 }

=== modified file 'methanal/static/styles/methanal.css'
--- methanal/static/styles/methanal.css	2011-07-13 16:05:19 +0000
+++ methanal/static/styles/methanal.css	2012-07-27 14:39:22 +0000
@@ -1,99 +1,238 @@
+/**
+ * Button styles.
+ */
+
+button {
+    color: #fff;
+    font-weight: bold;
+    text-transform: uppercase;
+    border: 1px solid transparent;
+    border-color: rgba(0, 0, 0, 0.15);
+    border-radius: 0.2em;
+    -o-box-shadow: 0px 1px rgba(0, 0, 0, 0.333);
+    -moz-box-shadow: 0px 1px rgba(0, 0, 0, 0.333);
+    -webkit-box-shadow: 0px 1px rgba(0, 0, 0, 0.333);
+    box-shadow: 0px 1px rgba(0, 0, 0, 0.333);
+    background-color: #555;
+    padding: 0.5em 1em;
+    padding: 0.6em 1em;
+    cursor: pointer;
+}
+
+button:active:focus,
+button:active {
+    -o-box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: #193c59;
+    border-color: transparent;
+    position: relative;
+    top: 1px;
+}
+
+button:focus {
+    border-color: #193c59;
+}
+
+button:hover {
+    text-decoration: underline;
+}
+
+button.methanal-waiting,
+button.methanal-waiting:hover,
+button.methanal-waiting:active {
+    text-decoration: none;
+    cursor: wait;
+}
+
+button.methanal-submit-disabled,
+button.methanal-submit-disabled:hover,
+button.methanal-submit-disabled:active {
+    text-decoration: none;
+    border-color: #ccc;
+    background-color: transparent;
+    color: #444;
+    cursor: default;
+    cursor: not-allowed;
+    top: 0;
+    opacity: 0.5;
+    -o-box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/**
+ * Option groups.
+ */
+
+optgroup {
+    font-style: normal;
+}
+
+optgroup option {
+    padding-left: 1em;
+}
+
+/**
+ * LiveForm and controls.
+ */
+
+.methanal-liveform h1 {
+    color: #000;
+    font-weight: bold;
+    margin: 0 0 0.5em 0;
+    text-transform: uppercase;
+    font-size: 130%;
+    padding: 0.5em 0;
+    border-bottom: 2px solid #ccc;
+}
+
+.methanal-liveform .modified-indicator {
+    font-weight: bold;
+}
+
 .methanal-form-group {
-    margin: 10px 0;
-    border: 1px outset #25a;
-    background: #e5e5ef url(/static/Methanal/images/group-bg.png) repeat-x top left;
-    padding: 10px;
+    margin: 1em 0;
+    border: none;
+    border-top: 1px solid #ccc;
+    padding: 1em;
+    padding-top: 0;
+}
+
+.methanal-form-group legend {
+    color: #c9000c;
+    font-weight: bold;
+    font-size: 120%;
 }
 
 .methanal-control {
-    padding: 3px 0;
+    padding: 0.333em 0;
     clear: left;
 }
 
 .methanal-control-inputs,
-.methanal-control-inputs > * {
+.methanal-control-inputs > div {
     float: left;
 }
 
-.methanal-liveform h1,
-.methanal-form-group h2 {
-    color: #555;
-    font-weight: normal;
-    text-shadow: 0 1px 0 #fff;
-    margin: 0 0 0.5em 0;
-}
-
-.methanal-form-group .methanal-control-even {
-    background-color: #d3d3ea;
-}
-
 .methanal-control-even {
-    background-color: #f0f0fc;
+    background-color: #f0f0f0;
+    background-color: rgba(127, 127, 127, 0.08);
 }
 
 .methanal-caption {
     float: left;
-    min-width: 20em;
+    width: 20em;
     line-height: 1.75em;
-    margin: 0 0.75em;
+    margin-right: 2em;
+    margin-top: 0.2em;
     vertical-align: middle;
-}
-
-.methanal-inline-children .methanal-inline-control .methanal-input {
-    clear: none;
-    float: left;
-    margin-right: 3px;
-    min-width: 5em;
+    text-align: right;
+    font-weight: bold;
+    color: #353535;
 }
 
 .methanal-multi-input,
 .methanal-lookup-form {
-    background: white;
-    border: 1px solid #ccc;
-    border-bottom: 2px solid #aaa;
-    padding: 0.5em;
     float: left;
-}
-
-.methanal-lookup-form .lookup-result .methanal-caption {
-    font-style: italic;
-    font-weight: bold;
+    padding-left: 1em;
+    border-left: 1px solid #b7b7b7;
+}
+
+.methanal-lookup-form .lookup-result {
+    border-top: 2px solid #3580bf;
+}
+
+.methanal-simple-form .methanal-control-even {
+    background-color: transparent;
 }
 
 .methanal-lookup-form .methanal-caption,
 .methanal-multi-input .methanal-caption {
-    min-width: 8em;
-    margin: 0 0.25em;
-}
-
-.methanal-sub-caption {
-    padding: 3px 0;
-    float: left;
-    clear: left;
+    width: 8em;
+    margin-right: 0.533em;
+}
+
+.methanal-choice-group {
+    border: solid #ddd;
+    border-width: 0 0 0 1px;
+    margin: 0.5em;
+    padding: 0.3em 0 0.3em 0.5em;
+}
+
+.methanal-choice-group h4 {
+    margin: 0 0 0.25em 0;
+}
+
+.dependancy-parent {
+    border-left: 3px solid #777;
+    margin-left: -3px;
+}
+
+.dependancy-child {
+    border-left: 3px solid #bbb;
+    margin-left: -3px;
 }
 
 input.methanal-input,
 select.methanal-input,
 textarea.methanal-input {
+    float: left;
+    background-color: #fff;
     background-image: url(/static/Methanal/images/icons/valid.png);
     background-repeat: no-repeat;
     background-position: 4px center;
-    border: 1px solid #ccc;
-    padding: 4px;
+    border: 1px solid #b7b7b7;
+    padding: 0.333em 5px;
     padding-left: 22px;
-    margin-right: 4px;
-    float: left;
+    margin-right: 0.333em;
+    -o-box-shadow: 0 1px #fff;
+    -moz-box-shadow: 0 1px #fff;
+    -webkit-box-shadow: 0 1px #fff;
+    box-shadow: 0 1px #fff;
+}
+
+.methanal-check-input {
+    border: none;
+    margin-left: 0;
+    float: left;
+    cursor: pointer;
+}
+
+.methanal-check-input-label {
+    float: left;
+    margin-right: 0.5em;
+    cursor: pointer;
+    line-height: 1.75em;
 }
 
 select.methanal-input {
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-top: 0.233em;
+    padding-bottom: 0.233em;
 }
 
-textarea.methanal-input {
+textarea.methanal-input,
+select.methanal-multiselect {
     background-position: 4px 4px;
+}
+
+textarea.methanal-input {
     width: 20em;
-    height: 14ex;
+    height: 10em;
+}
+
+.methanal-multiselect {
+    max-height: 20em;
+}
+
+.methanal-multiselect-selection {
+    font-size: 80%;
+    clear: left;
+    float: left;
+    margin: 2px;
+    font-weight: bold;
 }
 
 .methanal-control-error input.methanal-input,
@@ -103,13 +242,6 @@
     border-color: #da2603;
 }
 
-.methanal-check-input-label {
-    float: left;
-    margin-right: 0.5em;
-    cursor: pointer;
-    line-height: 1.75em;
-}
-
 .methanal-multi-input input {
     margin-left: 0;
 }
@@ -119,120 +251,73 @@
     cursor: pointer;
 }
 
-input.methanal-check-input {
-    border: none;
-    margin-left: 0;
-    float: left;
-    cursor: pointer;
-}
-
-button.methanal-waiting,
-button.methanal-waiting:hover,
-button.methanal-waiting:active {
-    cursor: wait;
-}
-
-button.methanal-submit-disabled,
-button.methanal-submit-disabled:hover,
-button.methanal-submit-disabled:active {
-    background-color: #bbb;
-    cursor: default;
-    cursor: not-allowed;
-}
-
-button.methanal-submit-disabled:active {
-    border-style: double;
-}
-
-input.telephone-area {
-    min-width: 0;
-    width: 3em;
-}
-
-input.telephone-number {
-    min-width: 0;
-    width: 7em;
-}
-
-input.suburb-postal-code {
-    min-width: 0;
-    width: 4em;
-}
-
-input.suburb-postal {
-    min-width: 0;
-    margin-left: 0;
-}
-
-optgroup {
-    font-style: normal;
-}
-
-optgroup option {
-    padding-left: 1em;
-}
-
-.methanal-multiselect {
-    max-height: 30ex;
-}
-
-.methanal-multiselect-selection {
-    font-size: 80%;
-    clear: left;
-    float: left;
-    margin: 2px;
-    font-weight: bold;
-}
-
-.terminator {
-    clear: both;
-}
+.friendly-representation {
+    float: left;
+    font-style: italic;
+    vertical-align: middle;
+    padding: 0.333em 5px;
+    margin-left: -0.333em;
+    margin-right: 0.333em;
+    border: 1px solid #b7b7b7;
+    border-left: none;
+    background: #ddd;
+    color: #333;
+    -o-box-shadow: 0 1px #fff;
+    -moz-box-shadow: 0 1px #fff;
+    -webkit-box-shadow: 0 1px #fff;
+    box-shadow: 0 1px #fff;
+}
+
+.embedded-label {
+    color: #bbb !important;
+}
+
+/**
+ * Table.
+ */
 
 .methanal-table table {
     border-collapse: collapse;
     table-layout: fixed;
     width: 100%;
-    background: white;
+    background: transparent;
 }
 
 .methanal-table thead td {
+    border-bottom: 2px solid #3580bf;
+    color: #000;
+    font-size: 90%;
     font-weight: bold;
-    color: #555;
-    background: #ddd url(/Mantissa/images/scrolltable-header-bg.png) repeat-x;
-    padding: 4px 5px;
+    text-transform: uppercase;
+    padding: 1em 0.35em;
 }
 
 .methanal-table a {
-    color: black;
     display: block;
     margin: -0.3em;
     padding: 0.3em;
 }
 
-.methanal-table td:first-child a,
-.methanal-table td.first-child a {
-    background: url(/static/Methanal/images/link.gif) no-repeat 5px center;
-    padding-left: 19px;
+.methanal-table tbody tr:hover {
+    background-color: #e8e8e8;
 }
 
-.methanal-table tr:hover {
-    background-color: #eee !important;
+.methanal-table tr,
+.methanal-table a {
+    color: #333;
 }
 
 .methanal-table td {
+    border-bottom: 1px solid #ddd;
     text-align: left;
-    border: 1px solid #ccc;
-    padding: 0.3em;
-}
-
-.methanal-table .even {
-    background-color: #f5f5f5;
+    padding: 0.5em 0.3em;
 }
 
 .methanal-table .methanal-table-empty-row td {
-   font-size: 90%;
-   font-weight: bold;
-   text-align: center;
+    font-size: 90%;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
 }
 
 .methanal-table .table-action-icon {
@@ -240,84 +325,45 @@
     vertical-align: middle;
 }
 
+.methanal-table .even {
+    background-color: #f5f5f5;
+    background-color: rgba(0, 0, 0, 0.035);
+}
+
+/**
+ * Filter list widget.
+ */
+
 .methanal-filter-list {
-    margin: 5px;
-    border: 1px outset #777;
-    background-color: #f4f4f4;
-    padding: 5px;
+    margin: 0.5em;
+    padding: 0.5em;
 }
 
 .methanal-filter-list .filter-results {
-    background: url(/static/Methanal/images/liveform-bg-bottom-top.png) repeat-x top left;
-    padding: 1em;
-}
-
-.methanal-lookup-form {
-    float: left;
-    border: 1px outset #777;
-    background: white;
-    padding: 2px;
-}
-
-.friendly-representation {
-    font-weight: bold;
-    font-style: italic;
-    font-size: 85%;
-    padding: 0 0.25em;
-    line-height: 2em;
-    vertical-align: middle;
-}
-
-.embedded-label {
-    color: #bbb !important;
-}
-
-.methanal-submit-error {
-    color: white;
-    background: #74010c;
-    border-top: 1px solid #f30219;
-    padding: 5px;
-    margin: -5px;
-    margin-top: 5px;
-}
-
-.methanal-submit-error h1 {
-    font-size: 130%;
-    /*font-family: "Georgia", "Times New Roman", serif;*/
-    font-weight: normal;
-    margin: 0 0 0.3em 0;
-}
-
-.methanal-submit-error > div {
-    background: url(/static/Methanal/images/error-icon.png) no-repeat center left;
-    padding: 2px;
-    padding-left: 24px;
-}
-
-.methanal-submit-error-action {
-    padding: 0 4px;
-    cursor: pointer;
-}
-
-.methanal-submit-error-action img {
-    vertical-align: middle;
-}
+    margin-top: 1em;
+}
+
+/**
+ * LiveForm actions.
+ */
 
 .methanal-action-container {
-    border-top: 1px solid #aaa;
-    background: white;
-    margin: -5px;
-    margin-top: 5px;
-    padding: 5px 0;
+    margin-top: 0.5em;
 }
 
 .methanal-action-container .methanal-action-button {
-    margin: 0 5px;
-}
-
-.throbber {
-    vertical-align: middle;
-}
+    margin: 0;
+    margin-right: 1em;
+}
+
+.methanal-action-button-submit {
+    color: #fff;
+    background-color: #3580bf;
+}
+
+/**
+ * Modal dialog.
+ */
 
 .modal-dialog-overlay {
     position: fixed;
@@ -325,14 +371,13 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background: white;
+    background: #000;
     opacity: 0.75;
     z-index: 1000;
 }
 
 .modal-dialog-outer {
     z-index: 1001;
-
     display: table;
     position: absolute;
     top: 0;
@@ -342,7 +387,6 @@
 }
 
 .modal-dialog-middle {
-    margin: 0 auto;
     display: table-cell;
     vertical-align: middle;
 }
@@ -350,14 +394,12 @@
 .modal-dialog-inner {
     display: table;
     margin: 5% auto;
-    background: white;
+    background: #fff;
     padding: 1em;
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    box-shadow: 0 0 30px #333;
-    -moz-box-shadow: 0 0 30px #333;
-    -webkit-box-shadow: 0 0 30px #333;
+    -o-box-shadow: 0.5em 0.5em #aaa;
+    -moz-box-shadow: 0.5em 0.5em #aaa;
+    -webkit-box-shadow: 0.5em 0.5em #aaa;
+    box-shadow: 0.5em 0.5em #aaa;
 }
 
 .modal-dialog-inner h1 {
@@ -374,69 +416,70 @@
     height: 16px;
 }
 
-.placeholder {
-    height: 32px;
-    background: url(/static/Methanal/images/long-throbber.gif) no-repeat center center;
-    padding: 1em 0;
-}
-
 /**
- * Tab view widget.
+ * Tab view.
  */
 
 .methanal-tab-view {
     margin: 3em 0;
 }
 
+.methanal-tab-view .methanal-tab-view {
+    margin: 1em 0;
+}
+
 .methanal-tab-view .methanal-tab-labels {
-    background: #e0f1ff;
-    color: #185280;
-    list-style: none;
     margin: 0;
-    padding: 0.5em 0;
-    border-bottom: 1px solid #247dc2;
+    padding: 0;
+    padding-left: 1px;
+    overflow: hidden;
 }
 
 .methanal-tab-view .methanal-tab-label {
     cursor: pointer;
+    list-style: none;
     display: inline-block;
-    list-style: none;
+    padding: 0.75em 1.413em;
+    border: 1px solid #ccc;
+    margin-left: -1px;
+    background: #e8e8e8;
+}
+
+.methanal-tab-view .methanal-tab-label-throbber {
+    border: none;
+    background: none
 }
 
 .methanal-tab-view .methanal-tab-label a {
-    padding: 0.5em 1em;
-    border: 1px solid transparent;
-    border-bottom: none;
-}
-
-.methanal-tab-view .methanal-dynamic-tab a {
-    background: #f2e0ff;
+    font-weight: bold;
+    color: #404040;
 }
 
 .methanal-tab-view .methanal-tab-label a:hover {
-    background: #247dc2;
-    color: white;
+    color: #247dc2;
+    text-decoration: underline;
 }
 
-.methanal-tab-view .selected-tab-label a,
-.methanal-tab-view .selected-tab-label a:hover {
-    background: white;
-    color: black;
+.methanal-tab-view .selected-tab-label {
+    background: #fff;
+    border-bottom: 1px solid transparent;
+    border-top-color: #000;
 }
 
 .methanal-tab-view .selected-tab-label a {
-    position: relative;
-    top: 1px;
-    padding-top: 0.8em;
-    border-color: #247dc2;
+    color: #000;
 }
 
 .methanal-tab-view .methanal-tab-content {
-    border: 1px solid #247dc2;
-    border-top: none;
+    background: #fff;
+    border: 1px solid #ccc;
     display: none;
-    clear: left;
     padding: 1em;
+    margin-top: -1px;
+    -o-box-shadow: 2px 2px #eee;
+    -moz-box-shadow: 2px 2px #eee;
+    -webkit-box-shadow: 2px 2px #eee;
+    box-shadow: 2px 2px #eee;
 }
 
 .methanal-tab-view .selected-tab {
@@ -445,70 +488,24 @@
 
 .methanal-tab-view .methanal-tab-group {
     cursor: default;
-    background: #9bc4e5;
-    margin: -2.5em 0.25em -0.5em;
+    background: #f9f9f9;
     padding: 0 0.5em;
-    -moz-border-radius: 0.5em 0.5em 0 0;
-    -webkit-border-radius: 0.5em 0.5em 0 0;
+}
+
+.methanal-tab-view .methanal-tab-group .methanal-tab-label {
+    margin-bottom: -1px;
 }
 
 .methanal-tab-view .methanal-tab-group-label {
     font-size: 80%;
     text-align: center;
     padding: 0.5em;
-    color: #e0f1ff;
+    color: #000;
 }
 
 .methanal-tab-view .methanal-tab-group-tabs {
-    list-style: none;
     margin: 0;
-    padding: 0.5em 0;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.methanal-choice-group {
-    border: solid #ddd;
-    border-width: 0 0 0 1px;
-    margin: 0.5em;
-    padding: 0.3em 0 0.3em 0.5em;
-}
-
-.methanal-choice-group h4 {
-    margin: 0 0 0.25em 0;
-}
-
-.methanal-lookup-form .methanal-control-even {
-    background-color: #f5f5f5;
-}
-
-.methanal-lookup-form .lookup-result {
-    background: #e0f1ff;
-}
-
-.dependancy-parent {
-    border-left: 3px solid #6094a4;
-    margin-left: -3px;
-    background-image: url("/static/Methanal/images/icons/dependency_parent.gif");
-    background-repeat: no-repeat;
-    background-position: left center;
-}
-
-.dependancy-child {
-    border-left: 3px solid #9fc4cf;
-    margin-left: -3px;
-}
-
-.form-modified {
-    background: #fbede1;
-}
-
-.modified-indicator {
-    background: url(/static/Methanal/images/icons/warning.png) no-repeat 2px center;
-    padding: 5px 2px 5px 20px;
-    display: inline-block;
+    padding: 0;
 }
 
 /**
@@ -516,7 +513,7 @@
  */
 
 .expander {
-    background: #e0e0e0;
+    background: #f3f3f3;
     border: 1px solid #ddd;
     border-color: #f5f5f5 #ddd #bbb;
     border-radius: 3px;
@@ -527,16 +524,12 @@
 }
 
 .expander-header {
-    background: #f0f0f0 url(/static/Methanal/images/expander-header-bg.png) repeat-x left bottom;
+    background: #e7e7e7;
     vertical-align: middle;
-    height: 18px;
+    height: auto;
     padding: 0.5em;
 }
 
-.expander-header:hover {
-    color: #247dc2;
-}
-
 .expanded .expander-header-label {
     background-image: url(/static/Methanal/images/collapse.png);
 }
@@ -549,10 +542,14 @@
 }
 
 .expander-content {
-    margin: 0.5em;
-    margin-top: 1em;
+    padding: 1em;
+    border-top: 1px solid #b7b7b7;
 }
 
+/**
+ * Print media.
+ */
+
 @media print {
     body.printing > * {
         display: none;
@@ -560,7 +557,7 @@
 
     body.printing .print-target {
         display: block;
-        position: absolute:
+        position: absolute;
         left: 0;
         top: 0;
         font-size: 50%;
@@ -574,12 +571,10 @@
         display: block;
         max-width: 100%;
         margin: auto;
-        border-radius: 0;
-        -moz-border-radius: 0;
-        -webkit-border-radius: 0;
-        box-shadow: none;
+        -o-box-shadow: none;
         -moz-box-shadow: none;
         -webkit-box-shadow: none;
+        box-shadow: none;
     }
 
     .print-target .no-print {
@@ -595,14 +590,12 @@
     display: inline-block;
     position: relative;
     border: 1px solid;
-    border-radius: 2px;
-    box-shadow: 0 0 2px black;
-    -o-box-shadow: 0 0 2px black;
-    -moz-box-shadow: 0 0 2px black;
-    -webkit-box-shadow: 0 0 2px black;
+    -o-box-shadow: 1px 1px black;
+    -moz-box-shadow: 1px 1px black;
+    -webkit-box-shadow: 1px 1px black;
+    box-shadow: 1px 1px black;
     color: #fff;
     font-size: 90%;
-    font-style: italic;
     padding: 0.25em;
     margin-right: 0.5em;
 }
@@ -614,10 +607,6 @@
     background: #6094a4;
 }
 
-.hover-tooltip h2 {
-    text-shadow: 0 -1px 0 #333;
-}
-
 .hover-tooltip-arrow {
     position: absolute;
     width: 0;
@@ -687,11 +676,10 @@
 .submission-error-tooltip .hover-tooltip {
     background-repeat: no-repeat;
     background-position: 0.25em center;
-    padding-left: 25px;
+    padding-left: 0.5em;
 }
 
 .error-tooltip .hover-tooltip {
-    background-image: url(/static/Methanal/images/icons/warning.png);
     background-color: #8d0e1b;
     border-color: #8d0e1b;
     color: #fff;
@@ -702,13 +690,13 @@
 .label-tooltip .hover-tooltip {
     position: absolute;
     left: inherit;
+    margin-left: -3em;
     margin-top: -2em;
 }
 
 /** LiveForm submission error tooltip. */
 
 .submission-error-tooltip .hover-tooltip {
-    background-image: url(/static/Methanal/images/icons/error.png);
     margin-top: 0.5em;
 }
 
@@ -727,7 +715,6 @@
 /** LiveForm validation error tooltip. */
 
 .form-validation-error-tooltip .hover-tooltip {
-    background-image: url(/static/Methanal/images/icons/warning.png);
     max-width: 25%;
 }
 
@@ -745,3 +732,25 @@
 .form-validation-error-tooltip h2 {
     cursor: default;
 }
+
+/**
+ * Utility.
+ */
+
+.hidden {
+    display: none !important;
+}
+
+.throbber {
+    vertical-align: middle;
+}
+
+.placeholder {
+    height: 32px;
+    background: url(/static/Methanal/images/long-throbber.gif) no-repeat center center;
+    padding: 1em 0;
+}
+
+.terminator {
+    clear: both;
+}

=== modified file 'methanal/test/test_view.py'
--- methanal/test/test_view.py	2011-04-29 08:50:50 +0000
+++ methanal/test/test_view.py	2012-07-27 14:39:22 +0000
@@ -88,7 +88,7 @@
             # Oh where, oh where can it be?
             # With real XPath support and functionality.
             # Oh where, oh where can it be?
-            candidates = tree.findall('//form/div')
+            candidates = tree.findall('.//form/div')
             actionsNode = None
             id = 'athenaid:%d-actions' % (self.form._athenaID,)
             for node in candidates:
@@ -717,7 +717,7 @@
             dict(values=values), checkExpectedValues=False)
 
         def verifyRendering(tree):
-            groupNodes = tree.findall('//select/optgroup')
+            groupNodes = tree.findall('.//select/optgroup')
             groups = set(item.group for item in values)
             self.assertEquals(len(groupNodes), len(groups))
             for groupNode, item in zip(groupNodes, values):
@@ -748,7 +748,7 @@
             dict(values=values), checkExpectedValues=False)
 
         def verifyRendering(tree):
-            optionNodes = tree.findall('//option')
+            optionNodes = tree.findall('.//option')
             self.assertEquals(len(optionNodes), len(list(values)))
             for optionNode, item in zip(optionNodes, values):
                 self.assertEquals(optionNode.get('value'), item.id)
@@ -1025,7 +1025,7 @@
             dict(values=values), checkExpectedValues=False)
 
         def verifyRendering(tree):
-            groupNodes = tree.findall('//select/optgroup')
+            groupNodes = tree.findall('.//select/optgroup')
             self.assertEquals(len(groupNodes), len(values))
             for groupNode, (group, subvalues) in zip(groupNodes, values):
                 self.assertEquals(groupNode.get('label'), group)
@@ -1094,7 +1094,7 @@
         control = self.createControl(dict(values=values))
 
         def verifyRendering(tree):
-            inputs = tree.findall('//input')
+            inputs = tree.findall('.//input')
             self.assertEquals(len(values), len(inputs))
             for input, (value, desc) in zip(inputs, values):
                 self.assertEquals(input.get('name'), self.name)
@@ -1128,7 +1128,7 @@
         control.parent.param.value = False
 
         def verifyRendering(tree):
-            input = tree.find('//input')
+            input = tree.find('.//input')
             self.assertIdentical(input.get('checked'), None)
 
         return renderWidget(control).addCallback(verifyRendering)
@@ -1142,7 +1142,7 @@
         control.parent.param.value = True
 
         def verifyRendering(tree):
-            input = tree.find('//input')
+            input = tree.find('.//input')
             self.assertEquals(input.get('checked'), 'checked')
 
         return renderWidget(control).addCallback(verifyRendering)
@@ -1157,7 +1157,7 @@
         control.parent.param.value = True
 
         def verifyRendering(tree):
-            input = tree.find('//input')
+            input = tree.find('.//input')
             self.assertEquals(input.tail.strip(), 'HELLO WORLD')
 
         return renderWidget(control).addCallback(verifyRendering)

=== modified file 'methanal/themes/methanal-base/methanal-action-container.html'
--- methanal/themes/methanal-base/methanal-action-container.html	2011-03-16 12:58:08 +0000
+++ methanal/themes/methanal-base/methanal-action-container.html	2012-07-27 14:39:22 +0000
@@ -2,5 +2,5 @@
     <nevow:invisible nevow:render="formActions" />
     <img id="throbber" class="throbber" src="/static/Methanal/images/main-throbber.gif" />
     <span id="viewOnlyIndicator" class="modified-indicator hidden">Changes <em>cannot</em> be saved</span>
-    <span id="modifiedIndicator" class="modified-indicator hidden">Unsaved changes</span>
+    <span id="modifiedIndicator" class="modified-indicator hidden">Form has unsaved changes</span>
 </div>

=== modified file 'methanal/themes/methanal-base/methanal-liveform.html'
--- methanal/themes/methanal-base/methanal-liveform.html	2011-07-11 11:33:39 +0000
+++ methanal/themes/methanal-base/methanal-liveform.html	2012-07-27 14:39:22 +0000
@@ -4,6 +4,5 @@
         <athena:handler event="onsubmit" handler="handleSubmit" />
         <nevow:invisible nevow:render="children" />
         <div id="actions" nevow:render="formActions" />
-        <div id="form-error" class="methanal-submit-error hidden" />
     </form>
 </div>

=== modified file 'methanal/themes/methanal-base/methanal-tab-view.html'
--- methanal/themes/methanal-base/methanal-tab-view.html	2010-04-25 13:48:14 +0000
+++ methanal/themes/methanal-base/methanal-tab-view.html	2012-07-27 14:39:22 +0000
@@ -1,7 +1,6 @@
 <div class="methanal-tab-view" xmlns:nevow="http://nevow.com/ns/nevow/0.1" xmlns:athena="http://divmod.org/ns/athena/0.7" nevow:render="liveElement">
     <ul class="methanal-tab-labels" id="labels">
-        <li id="throbber" class="methanal-tab-label" style="padding: 0 2px;"><img src="/static/Methanal/images/main-throbber.gif" style="height: 10px; width: 10px;" /></li>
-    </ul>
+        <li id="throbber" class="methanal-tab-label methanal-tab-label-throbber"><img src="/static/Methanal/images/main-throbber.gif" style="height: 10px; width: 10px;" /></li></ul>
     <div id="contents" style="clear: both;" nevow:render="tabContents" />
     <div class="terminator"></div>
 </div>

=== modified file 'methanal/view.py'
--- methanal/view.py	2011-07-11 18:06:33 +0000
+++ methanal/view.py	2012-07-27 14:39:22 +0000
@@ -66,7 +66,8 @@
 
     def getArgs(self):
         return {u'actionID': self.id,
-                u'allowViewOnly': self.allowViewOnly}
+                u'allowViewOnly': self.allowViewOnly,
+                u'identifier': self.identifier}