From 3045ac9c4216b765e3b5dc3b40d94dad3c9f6bed Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Mon, 15 Feb 2016 15:38:01 +0900 Subject: [PATCH] Improve debug panel styles, and change color to red if there are errors --- common/css/xe.css | 32 ++++++++++++++++++--------- common/js/debug.js | 55 +++++++++++++++++++++++++++------------------- 2 files changed, 55 insertions(+), 32 deletions(-) diff --git a/common/css/xe.css b/common/css/xe.css index 9c1d76115..680013067 100644 --- a/common/css/xe.css +++ b/common/css/xe.css @@ -296,6 +296,7 @@ button.btn { position: fixed; left: 0; bottom: 40px; background: #eeeeee; + background: linear-gradient(to bottom, #f4f4f4 0%, #eaeaea 100%); border: 1px solid #ccc; border-left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; @@ -303,7 +304,8 @@ button.btn { z-index: 1073741824; } #rhymix_debug_button:hover { - background: #444444; + background: #dddddd; + background: linear-gradient(to bottom, #e8e8e8 0%, #d9d9d9 100%); } #rhymix_debug_button a { display: block; @@ -312,8 +314,8 @@ button.btn { text-decoration: none; padding: 4px 8px; } -#rhymix_debug_button a:hover { - color: #eeeeee; +#rhymix_debug_button a.has_errors { + color: #f44336; } #rhymix_debug_panel { display: none; @@ -369,6 +371,7 @@ button.btn { padding-bottom: 8px; border-bottom: 1px solid #ddd; position: relative; + cursor: pointer; } #rhymix_debug_panel .debug_page .debug_page_header h3 { color: #444; @@ -401,16 +404,25 @@ button.btn { } #rhymix_debug_panel .debug_page .debug_entry { font-family: Consolas, "Courier New", monospace; - color: #666; + color: #444; margin-left: 38px; margin-bottom: 8px; text-indent: -28px; - white-space: pre-wrap; + word-wrap: break-word; + word-break: break-all; } -#rhymix_debug_panel .debug_page .debug_entry.no_indentation { - margin-left: 10px; - text-indent: 0; +#rhymix_debug_panel .debug_page .debug_entry ul.debug_metadata { + margin: 0 0 0 -16px; padding: 0; } -#rhymix_debug_panel .debug_page .debug_entry.collapse_spaces { - white-space: pre-line; +#rhymix_debug_panel .debug_page .debug_entry ul.debug_metadata li { + list-style: disc; + margin: 0; padding: 0; text-indent: 0; +} +#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace { + margin: 4px 0 0 16px; padding: 0; +} +#rhymix_debug_panel .debug_page .debug_entry ul.debug_backtrace li { + list-style: disc; + margin: 0; padding: 0; text-indent: 0; + color: #888; } diff --git a/common/js/debug.js b/common/js/debug.js index dcbd84e5a..44612f1e7 100644 --- a/common/js/debug.js +++ b/common/js/debug.js @@ -13,7 +13,7 @@ $(function() { var button = $("#rhymix_debug_button"); // Initialize the debug button. - $('').text("DEBUG").appendTo(button).click(function(event) { + var button_link = $('').text("DEBUG").appendTo(button).click(function(event) { event.preventDefault(); var max_width = Math.min(540, $(window).width()); panel.css({ width: max_width, left: max_width * -1 }).show().animate({ left: 0 }, 200); @@ -55,10 +55,13 @@ $(function() { } // Create the page header. - var page_header = $('
').prependTo(page); + var page_header = $('
').prependTo(page).click(function() { + $(this).find("a.debug_page_collapse").triggerHandler("click"); + }); page_header.append($('

').text(data.page_title).attr("title", data.url)); page_header.append($('').text(open ? "▲" : "▼").click(function(event) { event.preventDefault(); + event.stopPropagation(); if (page_body.is(":visible")) { page_body.slideUp(200); $(this).text("▼"); @@ -70,10 +73,12 @@ $(function() { // Add general information. page_body.append($('

').text('General Information')); - page_body.append($('
').text( - 'Request: ' + data.request.method + ' (' + data.request.size + ' bytes)' + "\n" + - 'Response: ' + data.response.method + ' (' + data.response.size + ' bytes)' + "\n" + - 'Time: ' + data.timing.total)); + entry = $('
').appendTo(page_body); + var metadata = $('').appendTo(entry); + metadata.append($('
  • ').text('Request: ' + data.request.method + (data.request.method !== "GET" ? (' - ' + data.request.size + ' bytes') : ""))); + metadata.append($('
  • ').text('Response: ' + data.response.method + ' - ' + data.response.size + ' bytes')); + metadata.append($('
  • ').text('Total Time: ' + data.timing.total)); + metadata.append($('
  • ').text('Query Time: ' + data.timing.db_query)); // Add debug entries. if (data.entries && data.entries.length) { @@ -81,13 +86,13 @@ $(function() { for (i in data.entries) { entry = $('
    ').appendTo(page_body); num = parseInt(i) + 1; if (num < 10) num = "0" + num; - backtrace = ""; + entry.text(num + ". " + data.entries[i].message); + backtrace = $('').appendTo(entry); for (j in data.entries[i].backtrace) { if (data.entries[i].backtrace[j].file) { - backtrace += "\n• " + data.entries[i].backtrace[j].file + ":" + data.entries[i].backtrace[j].line; + backtrace.append($('
  • ').text(data.entries[i].backtrace[j].file + ":" + data.entries[i].backtrace[j].line)); } } - entry.text(num + ". " + data.entries[i].message + backtrace); } } @@ -97,13 +102,13 @@ $(function() { for (i in data.errors) { entry = $('
    ').appendTo(page_body); num = parseInt(i) + 1; if (num < 10) num = "0" + num; - backtrace = ""; + entry.text(num + ". " + data.errors[i].type + ": " + data.errors[i].message); + backtrace = $('').appendTo(entry); for (j in data.errors[i].backtrace) { if (data.errors[i].backtrace[j].file) { - backtrace += "\n• " + data.errors[i].backtrace[j].file + ":" + data.errors[i].backtrace[j].line; + backtrace.append($('
  • ').text(data.errors[i].backtrace[j].file + ":" + data.errors[i].backtrace[j].line)); } } - entry.text(num + ". " + data.errors[i].type + ": " + data.errors[i].message + backtrace); } } @@ -111,24 +116,30 @@ $(function() { if (data.queries && data.queries.length) { page_body.append($('

    ').text('Queries (' + data.queries.length + ')')); for (i in data.queries) { - entry = $('
    ').appendTo(page_body); + entry = $('
    ').appendTo(page_body); num = parseInt(i) + 1; if (num < 10) num = "0" + num; - description = ""; - if (data.queries[i].query_connection) { - description += "\n• Caller: " + data.queries[i].file + ":" + data.queries[i].line + " (" + data.queries[i].method + ")"; - description += "\n• Connection: " + data.queries[i].query_connection; - description += "\n• Query ID: " + data.queries[i].query_id; - description += "\n• Query Time: " + (data.queries[i].query_time ? (data.queries[i].query_time.toFixed(4) + " sec") : ""); + entry.text(num + ". " + data.queries[i].query_string); + description = $('').appendTo(entry); + if (data.queries[i].file && data.queries[i].line) { + description.append($('
  • ').text("Caller: " + data.queries[i].file + ":" + data.queries[i].line).append("
    (" + data.queries[i].method + ")")); + description.append($('
  • ').text("Connection: " + data.queries[i].query_connection)); + description.append($('
  • ').text("Query ID: " + data.queries[i].query_id)); + description.append($('
  • ').text("Query Time: " + (data.queries[i].query_time ? (data.queries[i].query_time.toFixed(4) + " sec") : ""))); } - description += "\n• Result: " + ((data.queries[i].message === "success" || !data.queries[i].message) ? "success" : ("error " + data.queries[i].error_code + " " + data.queries[i].message)); - entry.text(num + ". " + data.queries[i].query_string + description); + description.append($('
  • ').text("Result: " + ((data.queries[i].message === "success" || !data.queries[i].message) ? "success" : ("error " + data.queries[i].error_code + " " + data.queries[i].message)))); } } + + // If there are errors, turn the button text red. + + if (data.errors && data.errors.length) { + button_link.addClass("has_errors"); + } }; // Add debug data from the previous request. if (window.rhymix_debug_previous) { - window.rhymix_debug_previous.page_title = 'PREVIOUS POST: ' + window.rhymix_debug_previous.ajax_module + "." + window.rhymix_debug_previous.ajax_act; + window.rhymix_debug_previous.page_title = 'PREVIOUS POST : ' + window.rhymix_debug_previous.ajax_module + "." + window.rhymix_debug_previous.ajax_act; rhymix_debug_add_data(window.rhymix_debug_previous, false); }