2005-11-11 cervantes

* Initial pass of the routerconsole revamp, starting with I2PTunnel and
	  being progressively rolled out to other sections at later dates.
	  Featuring abstracted W3C strict XHTML1.0 markup, with CSS providing
	  layout and styling.
	* Implemented console themes. Users can create their own themes by
	  creating css files in: {i2pdir}/docs/themes/console/{themename}/
	  and activating it using the routerconsole.theme={themename} advanced
	  config property. Look at the example incomplete "defCon1" theme.
	  Note: This is very much a work in progress. Folks might want to hold-off
	  creating their own skins until the markup has solidified.
	* Added "routerconsole.javascript.disabled=true" to disable console
	  client-side scripting and "routerconsole.css.disabled=true" to remove
	  css styling (only rolled out in the i2ptunnel interface currently)
	* Fixed long standing bug with i2ptunnel client and server edit screens
	  where tunnel count and depth properties would fail to save. Added
	  backup quantity and variance configuration options.
	* Added basic accessibility support (key shortcuts, linear markup, alt and
	  title information and form labels).
	* So far only tested on IE6, Firefox 1.0.6, Opera 8 and lynx.

installer/resources/themes/console/defCon1/default.css

@@ -0,0 +1,213 @@
+body {
+	margin :  0px;
+	padding : 0px;
+	text-align : center;
+	font-family : Arial, Helvetica, sans-serif;
+	background-color : #FFFFFF;
+	color :  #000000;
+    font-size : 100%;
+    
+    /* we've avoided Tantek Hacks so far,
+    ** but we can't avoid using the non-w3c method of 
+    ** box rendering. (and therefore one of mozilla's
+    ** proprietry -moz properties (which hopefully they'll
+    ** drop soon).#F0F3FA;
+    */
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+}
+
+div {
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+}
+
+h4, label {
+    margin :   0px;
+    padding :  2px;
+    float :   left;
+    width :  150px;
+    height :  24px;
+    font-weight :  bold;
+    text-align :  right;
+    font-size :   1.0em;
+    -moz-box-sizing: border-box;
+    box-sizing :     border-box;
+}
+
+h4 {
+    font-size : 1.2em;
+    text-align : center;
+    width : 750px;
+}
+
+a {
+    text-decoration : none;
+}
+
+form {
+	margin : 0px;
+}
+
+textarea, input, select, button, a {
+    font-family : Arial, Helvetica, sans-serif;
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+    font-size : 1.0em;
+    float : left;
+}
+
+input {
+    border: 1px solid #CCCCCC;
+    background-color: #F0F3FA;
+}
+
+button, .toolbox input {
+    border : 0;
+    float : none;
+}
+
+textarea {
+    border : 1px solid #ddddc0;
+}
+
+br {
+    clear : left;
+}
+
+div.statusNotRunning {
+    float : left;
+    width : 78px;
+    height : 24px;
+    overflow : hidden;
+	color : #dd0000;
+    padding-top: 24px;
+    background: url('images/console_status_stopped.png') 0 0 no-repeat;
+}
+div.statusRunning {
+    float : left;
+    width : 78px;
+    height : 24px;
+    overflow : hidden;
+	color : #00dd00;
+    padding-top: 24px;
+    background: url('images/console_status_running.png') 0 0 no-repeat;
+}
+div.statusStarting {
+    float : left;
+    width : 78px;
+    height : 24px;
+    overflow : hidden;
+	color : #339933;
+    padding-top: 24px;
+    background: url('images/console_status_starting.png') 0 0 no-repeat;
+}
+
+hr,.separator {
+    display : none;
+}
+
+.subdivider {
+    display : block;
+    clear : both;
+    height : 10px;
+    background : url('images/aqua_panel_hrule.png') no-repeat;
+}
+
+.freetext {
+    width : 150px;
+    height : 22px;
+    border : 1px solid #aaaac0;
+}
+
+.control {
+    margin :  0 4px 0 0;
+    padding : 0 0 4px 0;
+    overflow : hidden;
+    height : 24px;
+    width :  68px;
+    font-weight : normal;
+    color : black;
+    text-align :  center;
+    white-space : nowrap;
+    background: url('images/console_button_sm.png') 0 0;
+}
+
+.control:hover {
+    background: url('images/console_button_sm.png') 139px 0;
+    color : white;
+}
+
+.control:active {
+    background: url('images/console_button_sm.png') 69px 0;
+    color : white;
+}
+
+.panel {
+    width : 760px;
+    margin : 16px auto 16px auto;
+    overflow : hidden;
+	text-align : left;
+    font-size : 0.8em;
+    background: url('images/aqua_panel_background.png');
+}
+
+.panel .header {
+    height: 36px;
+    padding-top: 4px;
+    background: url('images/aqua_panel_header.png') no-repeat;
+}
+
+.panel .footer {
+    float : right;
+    height: 30px;
+    width: 760px;
+    background: url('images/aqua_panel_footer.png') no-repeat;    
+}
+
+.toolbox {
+    float : right;
+}
+
+.rowItem {
+    width : 760px;
+    float :  left;
+    margin :  0 0 0 0px;
+}
+
+.comment {
+    font-style : italic;
+    padding : 2px 0 0 2px;
+        float : left;
+}
+
+.text {
+    height : 24px;
+    width : 150px;
+    padding : 4px 0 0 2px;
+    float : left;
+    margin : 0;
+}
+
+.accessKey {
+    text-decoration : underline;
+}
+
+
+#globalOperationsPanel .header{
+    display: none;
+}
+
+#globalOperationsPanel .control {
+    height : 24px;
+    width :  98px;
+    background: url('images/console_button_lg.png') 0 0;
+}
+
+#globalOperationsPanel .control:hover {
+    background: url('images/console_button_lg.png') 204px 0;
+}
+
+#globalOperationsPanel .control:active {
+    background: url('images/console_button_lg.png') 102px 0;
+}

installer/resources/themes/console/defCon1/i2ptunnel.css

@@ -0,0 +1,206 @@
+/* I2P Tunnel Edit Page
+*/
+
+#tunnelEditPage input {
+    width : 458px;
+}
+
+#tunnelEditPage select {
+    width : 308px;
+}
+
+#tunnelEditPage option[selected] {
+    color: green;
+}
+
+#tunnelEditPage #targetField,
+#tunnelEditPage #accessField,
+#tunnelEditPage #optionsField {
+    height : 48px;
+    width : 150px;
+}
+#tunnelEditPage #tunnelOptionsField {
+    height : 96px;
+    width : 150px;
+}
+
+#tunnelEditPage #targetField label,
+#tunnelEditPage #accessField label,
+#tunnelEditPage #tunnelOptionsField label,
+#tunnelEditPage #optionsField label{
+    height : 48px;
+    width : 150px;
+}
+
+
+
+#tunnelEditPage #reachField,
+#tunnelEditPage #hostField,
+#tunnelEditPage #depthField,
+#tunnelEditPage #countField,
+#tunnelEditPage #optionsHostField {
+    width : 304px;
+    margin-right: 4px;
+}
+
+#tunnelEditPage #portField, 
+#tunnelEditPage #optionsPortField, 
+#tunnelEditPage #backupField,
+#tunnelEditPage #varianceField {
+    width : 150px;
+}
+
+#tunnelEditPage #reachField label,
+#tunnelEditPage #hostField label, 
+#tunnelEditPage #portField label,
+#tunnelEditPage #optionsHostField label, 
+#tunnelEditPage #optionsPortField label, 
+#tunnelEditPage #depthField label,
+#tunnelEditPage #countField label,
+#tunnelEditPage #backupField label,
+#tunnelEditPage #varianceField label {
+    text-align : left;
+    padding : 2px 0 0 4px;
+    background: url('images/aqua_column_title_vert.png') 0 0 no-repeat;
+}
+
+#tunnelEditPage #otherField label {
+    width : 300px;
+}
+
+#tunnelEditPage #reachableByOther,
+#tunnelEditPage #tunnelDepth, 
+#tunnelEditPage #tunnelQuantity,
+#tunnelEditPage #targetHost, 
+#tunnelEditPage #clientHost {
+    width : 306px;
+}
+
+#tunnelEditPage #port {
+    width : 80px;
+}
+
+#tunnelEditPage #targetPort,
+#tunnelEditPage #clientPort,
+#tunnelEditPage #tunnelBackupQuantity,
+#tunnelEditPage #tunnelVariance {
+    width : 150px;
+}  
+
+#tunnelEditPage #shared,
+#tunnelEditPage #connectDelay,
+#tunnelEditPage #startOnLoad {
+    width : 16px;
+    margin : 4px 0 0 4px;
+}
+
+#tunnelEditPage label {
+    width : 150px;
+    font-weight : bold;
+    text-align : right;
+    float : left;
+    background: url('images/aqua_column_title_horz.png') 0 0 no-repeat;
+    padding : 2px 4px 0 0;
+}
+
+#tunnelEditPage #otherField label {
+    background: url('images/aqua_column_title_horz.png') 150px 0 no-repeat;
+}
+
+/* I2P Tunnel List Page
+*/
+
+#tunnelListPage #statusMessagePanel .header, 
+#tunnelEditPage #tunnelEditPanel .header {
+    height: 40px;
+    background: url('images/aqua_titlebar.png') no-repeat;
+    
+}
+
+#tunnelListPage .rowItem {
+    width : 150px;
+}
+
+#tunnelListPage select {
+    width : 150px;
+}
+
+#tunnelListPage textarea {
+    width : 760px;
+    height : 100px;
+    padding : 0 0 0 4px;
+}
+
+#tunnelListPage .footer .control {
+    margin-left: 2px;
+}
+
+#tunnelListPage .footer label {
+    text-align : right;
+    height : 24px;
+    width : 160px;
+    float : left;
+
+}
+
+/* Use Leary and Langridge content replacement methods (LIR)
+** to embed accessibility information into the document.
+** Should allow the lists to be rendered nicely by
+** screen readers. (and lynx!)
+*/
+
+#tunnelListPage label {
+    height : 0;
+    width : 0;
+    overflow : hidden;
+}
+
+#tunnelListPage .nameHeaderField label,
+#tunnelListPage .portHeaderField label,
+#tunnelListPage .typeHeaderField label,
+#tunnelListPage .interfaceHeaderField label,
+#tunnelListPage .targetHeaderField label,
+#tunnelListPage .previewHeaderField label,
+#tunnelListPage .statusHeaderField label {
+    text-align : left;
+    width : 150px;
+    height : 24px;
+    float : left;
+    padding : 2px 0 0 4px;
+    background: url('images/aqua_column_title_vert.png') 0 0 no-repeat;
+}
+
+#tunnelListPage .nameField .text {
+    padding: 2px 0 0 8px;
+}
+
+#tunnelListPage .targetField,
+#tunnelListPage .targetField .text,
+#tunnelListPage .targetHeaderField,
+#tunnelListPage .targetHeaderField label {
+    width : 300px;
+}
+
+#tunnelListPage .descriptionField,
+#tunnelListPage .destinationField {
+    width : 750px;
+}
+
+#tunnelListPage .descriptionField .text,
+#tunnelListPage .destinationField input {
+    width : 450px;
+}
+
+#tunnelListPage .descriptionField label,
+#tunnelListPage .destinationField label {
+    text-align : right;
+    width : 150px;
+    height : 24px;
+    float : left;
+    background: url('images/aqua_column_title_horz.png') 0 0 no-repeat;
+    padding : 2px 4px 0 0;
+}
+
+#tunnelListPage .statusField .control {
+    margin : 0;
+}

installer/resources/themes/console/default.css

@@ -0,0 +1,182 @@
+body {
+	margin :  0px;
+	padding : 0px;
+	text-align : center;
+	font-family : Arial, Helvetica, sans-serif;
+	background-color : #ffffff;
+	color :  #000000;
+    font-size : 100%;
+    
+    /* we've avoided Tantek Hacks so far,
+    ** but we can't avoid using the non-w3c method of 
+    ** box rendering. (and therefore one of mozilla's
+    ** proprietry -moz properties (which hopefully they'll
+    ** drop soon).
+    */
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+}
+
+div {
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+}
+
+h4, label {
+    margin :   0px;
+    padding :  2px;
+    float :   left;
+    width :  150px;
+    height :  24px;
+    font-weight :  bold;
+    text-align :  right;
+    font-size :   1.0em;
+    -moz-box-sizing: border-box;
+    box-sizing :     border-box;
+}
+
+h4 {
+    font-size : 1.2em;
+    text-align : center;
+    width : 750px;
+}
+
+a {
+    text-decoration : none;
+}
+
+form {
+	margin : 0px;
+}
+
+textarea, input, select, button, a {
+    font-family : Arial, Helvetica, sans-serif;
+    -moz-box-sizing : border-box;
+    box-sizing :      border-box;
+    font-size : 1.0em;
+    float : left;
+}
+
+button {
+    float : none;
+}
+
+textarea {
+    border : 1px solid #ddddc0;
+}
+
+br {
+    clear : left;
+}
+
+div.statusNotRunning {
+    float : left;
+    width : 82px;
+    height : 24px;
+	color : #dd0000;
+}
+div.statusRunning {
+    float : left;
+    width : 82px;
+    height : 24px;
+	color : #00dd00;
+}
+div.statusStarting {
+    float : left;
+    width : 82px;
+    height : 24px;
+	color : #339933;
+}
+
+hr {
+    display : none;
+}
+
+.separator, .subdivider {
+    clear : both;
+    height : 1px;
+    margin : 3px 0px 3px 0px;
+    border-bottom : 1px solid #ddddc0;
+}
+
+.subdivider {
+    border-bottom : 1px dashed #ddddc0;
+}
+
+.freetext {
+    width : 150px;
+    height : 22px;
+    border : 1px solid #aaaac0;
+}
+
+.control {
+    margin :  0 4px 0 0;
+    padding : 0 0 4px 0;
+    overflow : hidden;
+    height : 20px;
+    width :  60px;
+    font-weight : normal;
+    background-color :  #dddddd;
+    color : black;
+    border : 1px outset #ddddc0;
+    text-align :  center;
+    white-space : nowrap;
+}
+
+.control:hover {
+    background-color : #ffffed;
+}
+
+.control:active {
+    border : 2px inset;
+}
+
+.panel {
+    width : 760px;
+    margin : 16px auto 16px auto;
+    overflow : hidden;
+	text-align : left;
+    font-size : 0.8em;
+	background-color : #ffffef;
+	border : 4px solid #ffffd0;
+}
+
+.panel .footer {
+    float : right;
+    padding : 4px;
+}
+
+.toolbox {
+    float : right;
+}
+
+.rowItem {
+    width : 750px;
+    float :  left;
+    margin :  0px;
+}
+
+.comment {
+    font-style : italic;
+}
+
+.text {
+    height : 24px;
+    width : 150px;
+    padding : 2px 0 0 2px;
+    float : left;
+    margin : 0;
+}
+
+.accessKey {
+    text-decoration : underline;
+}
+
+#globalOperationsPanel {
+    background-color : #ffefef;
+	border : 4px solid #ffd0d0;
+}
+
+#globalOperationsPanel .control {
+    width : 100px;
+}

installer/resources/themes/console/i2ptunnel.css

@@ -0,0 +1,178 @@
+/* I2P Tunnel Edit Page
+*/
+
+#tunnelEditPage input {
+    width : 458px;
+}
+
+#tunnelEditPage select {
+    width : 308px;
+}
+
+#tunnelEditPage option[selected] {
+    color: green;
+}
+
+#tunnelEditPage #targetField,
+#tunnelEditPage #accessField,
+#tunnelEditPage #optionsField {
+    height : 48px;
+    width : 150px;
+}
+#tunnelEditPage #tunnelOptionsField {
+    height : 96px;
+    width : 150px;
+}
+
+#tunnelEditPage #targetField label,
+#tunnelEditPage #accessField label,
+#tunnelEditPage #tunnelOptionsField label,
+#tunnelEditPage #optionsField label{
+    height : 48px;
+    width : 150px;
+}
+
+#tunnelEditPage #reachField,
+#tunnelEditPage #hostField,
+#tunnelEditPage #depthField,
+#tunnelEditPage #countField,
+#tunnelEditPage #optionsHostField {
+    width : 304px;
+    margin-right: 4px;
+}
+
+#tunnelEditPage #portField, 
+#tunnelEditPage #optionsPortField, 
+#tunnelEditPage #backupField,
+#tunnelEditPage #varianceField {
+    width : 150px;
+
+}
+
+#tunnelEditPage #reachField label,
+#tunnelEditPage #hostField label,
+#tunnelEditPage #portField label,
+#tunnelEditPage #optionsHostField label, 
+#tunnelEditPage #optionsPortField label, 
+#tunnelEditPage #depthField label,
+#tunnelEditPage #countField label,
+#tunnelEditPage #backupField label,
+#tunnelEditPage #varianceField label {
+    text-align : left;
+    
+}
+
+#tunnelEditPage #otherField label {
+    width : 300px;
+}
+
+#tunnelEditPage #reachableByOther,
+#tunnelEditPage #tunnelDepth, 
+#tunnelEditPage #tunnelQuantity,
+#tunnelEditPage #targetHost, 
+#tunnelEditPage #clientHost {
+    width : 306px;
+}
+
+#tunnelEditPage #port {
+    width : 80px;
+}
+
+#tunnelEditPage #targetPort,
+#tunnelEditPage #clientPort,
+#tunnelEditPage #tunnelBackupQuantity,
+#tunnelEditPage #tunnelVariance {
+    width : 150px;
+}  
+
+#tunnelEditPage #shared,
+#tunnelEditPage #connectDelay,
+#tunnelEditPage #startOnLoad {
+    width : 16px;
+}
+
+#tunnelEditPage label {
+    width : 150px;
+    font-weight : bold;
+    text-align : right;
+    float : left;
+}
+
+/* I2P Tunnel List Page
+*/
+
+#tunnelListPage .rowItem {
+    width : 150px;
+}
+
+#tunnelListPage select {
+    width : 150px;
+}
+
+#tunnelListPage textarea {
+    width : 750px;
+    height : 100px;
+    padding : 0 0 0 4px;
+}
+
+#tunnelListPage .footer .control {
+    margin-left: 2px;
+}
+
+#tunnelListPage .footer label {
+    text-align : right;
+    height : 24px;
+    width : 160px;
+    float : left;
+
+}
+
+/* Use Leary and Langridge content replacement methods (LIR)
+** to embed accessibility information into the document.
+** Should allow the lists to be rendered nicely by
+** screen readers. (and lynx!)
+*/
+
+#tunnelListPage label {
+    height : 0;
+    width : 0;
+    overflow : hidden;
+}
+
+#tunnelListPage .nameHeaderField label,
+#tunnelListPage .portHeaderField label,
+#tunnelListPage .typeHeaderField label,
+#tunnelListPage .interfaceHeaderField label,
+#tunnelListPage .targetHeaderField label,
+#tunnelListPage .previewHeaderField label,
+#tunnelListPage .statusHeaderField label {
+    text-align : left;
+    width : 150px;
+    height : 24px;
+    float : left;
+}
+
+#tunnelListPage .targetField,
+#tunnelListPage .targetField .text,
+#tunnelListPage .targetHeaderField,
+#tunnelListPage .targetHeaderField label {
+    width : 300px;
+}
+
+#tunnelListPage .descriptionField,
+#tunnelListPage .destinationField {
+    width : 750px;
+}
+
+#tunnelListPage .descriptionField .text,
+#tunnelListPage .destinationField input {
+    width : 450px;
+}
+
+#tunnelListPage .descriptionField label,
+#tunnelListPage .destinationField label {
+    text-align : right;
+    width : 150px;
+    height : 24px;
+    float : left;
+}