Sever Variables Table UI Improvements

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>

4 files changed, 64 insertions, 69 deletions

diff --git a/js/server_variables.js b/js/server_variables.js
index 52935f149b..22f759f6f8 100644
--- a/js/server_variables.js
+++ b/js/server_variables.js
@@ -4,8 +4,6 @@
  * Unbind all event handlers before tearing down a page
  */
 AJAX.registerTeardown('server_variables.js', function () {
-    $('#serverVariables .var-row').unbind('mouseenter');
-    $('#serverVariables .var-row').unbind('mouseleave');
     $('#filterText').unbind('keyup');
     $(document).off('click', 'a.editLink');
     $('#serverVariables').find('.var-name').find('a img').remove();
@@ -17,19 +15,8 @@ AJAX.registerOnload('server_variables.js', function () {
     var $cancelLink = $('a.cancelLink');
     var $filterField = $('#filterText');
 
-    /* Show edit link on hover */
-    $('#serverVariables').delegate('.var-row', 'mouseenter', function (event) {
-        var $elm = $(this).find('.var-value');
-        // Only add edit element if the element is not being edited
-        if ($elm.hasClass('editable') && ! $elm.hasClass('edit')) {
-            $elm.prepend($editLink.clone().show());
-        }
-    });
 
-    $('#serverVariables').delegate('.var-row', 'mouseleave', function (event) {
-        $(this).find('a.editLink').remove();
-    })
-    .find('.var-name').find('a').append(
+    $('#serverVariables').find('.var-name').find('a').append(
         $('#docImage').clone().show()
     );
 
@@ -81,15 +68,15 @@ AJAX.registerOnload('server_variables.js', function () {
     /* Allows the user to edit a server variable */
     function editVariable(link) {
         var $cell = $(link).parent();
+        var $valueCell = $(link).parents('.var-row').find('.var-value');
         var varName = $cell.parent().find('.var-name').text().replace(/ /g, '_');
         var $mySaveLink = $saveLink.clone().show();
         var $myCancelLink = $cancelLink.clone().show();
         var $msgbox = PMA_ajaxShowMessage();
+        var $myEditLink = $cell.find('a.editLink');
 
-        $cell
-            .addClass('edit') // variable is being edited
-            .find('a.editLink')
-            .remove(); // remove edit link
+        $cell.addClass('edit'); // variable is being edited
+        $myEditLink.remove(); // remove edit link
 
         $mySaveLink.click(function () {
             var $msgbox = PMA_ajaxShowMessage(PMA_messages.strProcessingRequest);
@@ -97,26 +84,25 @@ AJAX.registerOnload('server_variables.js', function () {
                     ajax_request: true,
                     type: 'setval',
                     varName: varName,
-                    varValue: $cell.find('input').val()
+                    varValue: $valueCell.find('input').val()
                 }, function (data) {
                     if (data.success) {
-                        $cell
+                        $valueCell
                             .html(data.variable)
                             .data('content', data.variable);
                         PMA_ajaxRemoveMessage($msgbox);
                     } else {
                         PMA_ajaxShowMessage(data.error, false);
-                        $cell.html($cell.data('content'));
+                        $valueCell.html($valueCell.data('content'));
                     }
-                    $cell.removeClass('edit');
+                    $cell.removeClass('edit').html($myEditLink);
                 });
             return false;
         });
 
         $myCancelLink.click(function () {
-            $cell
-                .html($cell.data('content'))
-                .removeClass('edit');
+            $valueCell.html($valueCell.data('content'));
+            $cell.removeClass('edit').html($myEditLink);
             return false;
         });
 
@@ -126,11 +112,11 @@ AJAX.registerOnload('server_variables.js', function () {
                 varName: varName
             }, function (data) {
                 if (typeof data !== 'undefined' && data.success === true) {
-                    var $editor = $('<div />', {'class': 'serverVariableEditor'})
+                    var $links = $('<div />')
                         .append($myCancelLink)
-                        .append(' ')
-                        .append($mySaveLink)
-                        .append(' ')
+                        .append('&nbsp;&nbsp;&nbsp;')
+                        .append($mySaveLink);
+                    var $editor = $('<div />', {'class': 'serverVariableEditor'})
                         .append(
                             $('<div/>').append(
                                 $('<input />', {type: 'text'}).val(data.message)
@@ -138,7 +124,9 @@ AJAX.registerOnload('server_variables.js', function () {
                         );
                     // Save and replace content
                     $cell
-                    .data('content', $cell.html())
+                    .html($links);
+                    $valueCell
+                    .data('content', $valueCell.html())
                     .html($editor)
                     .find('input')
                     .focus()
@@ -151,7 +139,7 @@ AJAX.registerOnload('server_variables.js', function () {
                     });
                     PMA_ajaxRemoveMessage($msgbox);
                 } else {
-                    $cell.removeClass('edit');
+                    $cell.removeClass('edit').html($myEditLink);
                     PMA_ajaxShowMessage(data.error);
                 }
             });
diff --git a/libraries/server_variables.lib.php b/libraries/server_variables.lib.php
index 4b30281bcb..30a81eb77c 100644
--- a/libraries/server_variables.lib.php
+++ b/libraries/server_variables.lib.php
@@ -150,9 +150,7 @@ function PMA_formatVariable($name, $value, $variable_doc_links)
 function PMA_getHtmlForLinkTemplates()
 {
     $url = 'server_variables.php' . PMA_URL_getCommon();
-    $output  = '<a style="display: none;" href="#" class="editLink">';
-    $output .= PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>';
-    $output .= '<a style="display: none;" href="'
+    $output  = '<a style="display: none;" href="'
         . $url . '" class="ajax saveLink">';
     $output .= PMA_Util::getIcon('b_save.png', __('Save')) . '</a> ';
     $output .= '<a style="display: none;" href="#" class="cancelLink">';
@@ -160,12 +158,8 @@ function PMA_getHtmlForLinkTemplates()
     $output .= PMA_Util::getImage(
         'b_help.png',
         __('Documentation'),
-        array(
-            'style' => 'display:none',
-            'id' => 'docImage'
-        )
+        array('style' => 'display:none', 'id' => 'docImage')
     );
-
     return $output;
 }
 
@@ -190,18 +184,19 @@ function PMA_getHtmlForServerVariables($variable_doc_links)
         . '</div>'
         . '</fieldset>';
 
-    $output .= '<div id="serverVariables" class="data filteredData noclick">'
-        . '<div class="var-header var-row">'
-        . '<div class="var-name">' .  __('Variable') . '</div>'
-        . '<div class="var-value valueHeader">'
+    $output .= '<table id="serverVariables" class="data filteredData noclick">'
+        . '<thead><tr class="var-header var-row">'
+        . '<td class="var-action">' . __('Action') . '</td>'
+        . '<td class="var-name">' .  __('Variable') . '</td>'
+        . '<td class="var-value">'
         . __('Session value') . ' / ' . __('Global value')
-        . '</div>'
-        . '<div style="clear:both"></div>'
-        . '</div>';
+        . '</td>'
+        . '</tr>'
+        . '</thead>';
 
     $output .= PMA_getHtmlForServerVariablesItems($variable_doc_links);
 
-    $output .= '</div>';
+    $output .= '</table>';
 
     return $output;
 }
@@ -223,7 +218,7 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links)
         = $GLOBALS['dbi']->fetchResult('SHOW SESSION VARIABLES;', 0, 1);
     $serverVars = $GLOBALS['dbi']->fetchResult('SHOW GLOBAL VARIABLES;', 0, 1);
 
-    $output = '';
+    $output = '<tbody>';
     $odd_row = true;
     foreach ($serverVars as $name => $value) {
         $has_session_value = isset($serverVarsSession[$name])
@@ -231,9 +226,14 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links)
         $row_class = ($odd_row ? ' odd' : ' even')
             . ($has_session_value ? ' diffSession' : '');
 
-        $output .= '<div class="var-row' . $row_class . '">'
-            . '<div class="var-name">';
+        $output .= '<tr class="var-row' . $row_class . '">';
 
+        $output .= '<td class="var-action">';
+        $output .=  '<a href="#" class="editLink">'
+            . PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>';
+        $output .= '</td>';
+
+        $output .= '<td class="var-name">';
         // To display variable documentation link
         if (isset($variable_doc_links[$name])) {
             $output .= '<span title="'
@@ -250,29 +250,30 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links)
         } else {
             $output .= htmlspecialchars(str_replace('_', ' ', $name));
         }
-        $output .= '</div>'
-            . '<div class="var-value value'
+        $output .= '</td>';
+
+        $output .= '<td class="var-value value'
             . ($GLOBALS['dbi']->isSuperuser() ? ' editable' : '') . '">&nbsp;'
             . PMA_formatVariable($name, $value, $variable_doc_links)
-            . '</div>'
-            . '<div style="clear:both"></div>'
-            . '</div>';
+            . '</td>'
+            . '</tr>';
 
         if ($has_session_value) {
-            $output .= '<div class="var-row' . ($odd_row ? ' odd' : ' even') . '">'
-                . '<div class="var-name session">(' . __('Session value') . ')</div>'
-                . '<div class="var-value value">&nbsp;'
+            $output .= '<tr class="var-row' . ($odd_row ? ' odd' : ' even') . '">'
+                . '<td class="var-action"></td>'
+                . '<td class="var-name session">(' . __('Session value') . ')</td>'
+                . '<td class="var-value value">&nbsp;'
                 . PMA_formatVariable(
                     $name,
                     $serverVarsSession[$name],
                     $variable_doc_links
-                ) . '</div>'
-                . '<div style="clear:both"></div>'
-                . '</div>';
+                ) . '</td>'
+                . '</tr>';
         }
 
         $odd_row = ! $odd_row;
     }
+    $output .= '</tbody>';
 
     return $output;
 }
diff --git a/themes/original/css/common.css.php b/themes/original/css/common.css.php
index d8c92ae428..ffd4851008 100644
--- a/themes/original/css/common.css.php
+++ b/themes/original/css/common.css.php
@@ -1106,9 +1106,10 @@ div#logTable table {
 
 /* server variables */
 #serverVariables {
-    min-width: 30em;
+    table-layout: fixed;
+    width: 100%;
 }
-#serverVariables .var-row > div {
+#serverVariables .var-row > tr {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1120,15 +1121,17 @@ div#logTable table {
     color:              <?php echo $GLOBALS['cfg']['ThColor']; ?>;
     background:         <?php echo $GLOBALS['cfg']['ThBackground']; ?>;
 }
-#serverVariables .var-header .var-value {
+#serverVariables .var-header {
     text-align: <?php echo $left; ?>;
 }
 #serverVariables .var-row {
     padding: 0.5em;
     min-height: 18px;
 }
+#serverVariables .var-action {
+    width: 120px;
+}
 #serverVariables .var-name {
-    width: 45%;
     float: <?php echo $left; ?>;
     font-weight: bold;
 }
diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php
index 257d73ab14..ff47d11454 100644
--- a/themes/pmahomme/css/common.css.php
+++ b/themes/pmahomme/css/common.css.php
@@ -1459,9 +1459,10 @@ div#queryAnalyzerDialog table.queryNums {
 
 /* server variables */
 #serverVariables {
-    min-width: 30em;
+    table-layout: fixed;
+    width: 100%;
 }
-#serverVariables .var-row > div {
+#serverVariables .var-row > td {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1473,15 +1474,17 @@ div#queryAnalyzerDialog table.queryNums {
     <?php echo $_SESSION['PMA_Theme']->getCssGradient('ffffff', 'cccccc'); ?>
     font-weight: bold;
 }
-#serverVariables .var-header .var-value {
+#serverVariables .var-header {
     text-align: <?php echo $left; ?>;
 }
 #serverVariables .var-row {
     padding: 0.5em;
     min-height: 18px;
 }
+#serverVariables .var-action {
+    width: 120px;
+}
 #serverVariables .var-name {
-    width: 45%;
     float: <?php echo $left; ?>;
     font-weight: bold;
 }