sync classnames with server-based output

Author: bkdotcom

src/js/DumpObject.js

@@ -5,9 +5,9 @@ var logDumper = (function($, module){
         // console.info('dumpObject', abs);
         var html = '';
         var title = (abs.phpDoc.summary + "\n\n" + abs.phpDoc.description).trim();
-        var strClassName = '<b class="t_object-class" '+
-            (title.length ? 'title="'+title+'" ' : "") +
-            '>' + abs.className + ' object</b>';
+        var strClassName = module.markupClassname(abs.className, "span", {
+            title : title.length ? title : null
+        })
         // var misc = '';
         var objToString = '';
         var toStringVal = '';
@@ -79,6 +79,28 @@ var logDumper = (function($, module){
         return html;
     }
 
+    module.markupClassname = function(str, tag, attribs) {
+        var classname = str;
+        var opMethod = '';
+        var split = [];
+        tag = tag || 'span';
+        attribs = attribs || {};
+        if (matches = str.match(/^(.+)(::|->)(.+)$/)) {
+            classname = matches[1];
+            opMethod = '<span class="t_operator">' + matches[2] + '</span>'
+                    + '<span class="method-name">' + matches[3] + '</span>';
+        }
+        split = classname.split('\\');
+        if (split.length > 1) {
+            classname = split.pop();
+            classname = '<span class="namespace">' + split.join('\\') + '\\</span>'
+                + classname;
+        }
+        attribs.class = 't_classname';
+        return  $('<'+tag+'/>', attribs).html(classname)[0].outerHTML
+            + opMethod;
+    }
+
     module.base64DecodeObj = function(abs) {
         var props = ["className","debug","extends","implements","type"],
             prop,

src/js/LogDumper.js

@@ -95,8 +95,8 @@ var logDumper = (function($, module) {
 		} else if (type === "resource") {
 			val = atob(val.value);
 		} else if (type === "callable") {
-			val = '<span class="t_type">callable</span>' +
-					' ' + atob(val.values[0]) + '::' + atob(val.values[1]);
+			val = '<span class="t_type">callable</span> ' +
+					module.markupClassname(atob(val.values[0]) + '::' + atob(val.values[1]));
 		}
 		/*
 		} else if (typeof val == "object") {
@@ -435,11 +435,9 @@ var logDumper = (function($, module) {
 			collapsedClass = method == 'groupCollapsed'
 				? 'collapsed'
 				: 'expanded';
-		if (!args.length) {
-			// args[] = 'group';
-			label = 'group';
-		} else {
-			label = atob(args.shift());
+		label = atob(args.shift());
+		if (meta.isMethodName) {
+			label = module.markupClassname(label);
 		}
 		for (i = 0; i < args.length; i++) {
 			args[i] = module.dump(args[i]);
@@ -609,7 +607,8 @@ var logDumper = (function($, module) {
             val = '<span class="t_keyword">Array</span>' +
                 '<span class="t_punct">(</span>' + Object.keys(val).length + '<span class="t_punct">)</span>';
         } else if (type == 'object') {
-            val = '<span class="t_object-class">' + atob(val['className']) + '</span>';
+            // val = '<span class="t_classname">' + atob(val['className']) + '</span>';
+            val = module.markupClassname(atob(val['className']));
         } else {
             val = module.dump(val);
         }

src/js/MethodTable.js

@@ -12,8 +12,7 @@ var logDumper = (function($, module){
 			colLength,
 			row,
 			$table,
-			$tr,
-			$td;
+			$tr;
 		if (classname === undefined) {
 			classname = "table-bordered";
 		}
@@ -41,11 +40,9 @@ var logDumper = (function($, module){
 			$tr = $('<tr><th scope="row" class="t_key '+classname+'">'+classAndInner.innerhtml+'</th></tr>');
 			if (row.debug == module.ABSTRACTION && row.type == "object") {
 				haveObj = true;
-				$td = $('<td class="t_object-class"></td>').text(row.className);
-				if (row.phpDoc.summary) {
-					$td.prop("title", row.phpDoc.summary);
-				}
-				$tr.append($td);
+				$tr.append(module.markupClassname(row.className, 'td', {
+					title: row.phpDoc.summary ? row.phpDoc.summary : null
+				}));
 			}
 			values = getValues(row, colKeys);
 			for (vali = 0, colLength = values.length; vali < colLength; vali++) {

src/js/main.js

@@ -138,7 +138,8 @@ var events = (function(){
 
 $(function() {
     var classCollapsed = 'glyphicon-chevron-down',
-        classExpanded = 'glyphicon-chevron-up';
+        classExpanded = 'glyphicon-chevron-up',
+        timeoutHandler;
         // connection = getConnection(),
         // myWorker = new Worker('socketWorker.js');
     /*
@@ -192,6 +193,22 @@ $(function() {
         $("#body > .panel").not(".working").remove();
     });
 
+    $("body").on("mouseup", function(e){
+        if (timeoutHandler) {
+            e.preventDefault();
+            clearInterval(timeoutHandler);
+            timeoutHandler = null;
+        }
+    });
+
+    $(".clear").on("mousedown", function(e){
+        timeoutHandler = setTimeout(() => {
+            // has been long pressed (3 seconds)
+            // clear all (incl working)
+            $("#body > .panel").remove();
+        }, 3000);
+    });
+
     $("body").on("shown.bs.collapse hidden.bs.collapse", ".panel-body", function(e) {
         var $icon = $(this).closest('.panel').find('.panel-heading .'+classCollapsed+', .panel-heading .'+classExpanded);
         $icon.toggleClass(classExpanded+' '+classCollapsed);