mobile-debug - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change log
 
+## 0.2.2 - 2017-04-25
+### Added
+- Demo structure
+
+## 0.2.1 - 2017-04-24
+### Added
+- Add MIT license
+
 ## 0.2.0 - 2017-04-23
@@ -8,0 +16,0 @@ ### Changed

dist/index.js

@@ -21,3 +21,3 @@ (function() {
   __$styleInject(
-    "#mobile-debug { display: none; }\n#mobile-debug:target {\n  display: block;\n  position: fixed;\n  z-index: 999999999;\n  top: 5px;\n  left: 5px;\n  bottom: 5px;\n  right: 5px;\n  margin: 0px;\n  padding: 10px;\n  color: #333;\n  background-color: rgba(255, 255, 255, 0.95);\n  overflow: scroll;\n  font-family: 'monospace','Lucida Console','Lucida Sans Unicode','Verdana';\n  border-radius: 0px 0px 10px 10px;\n  box-shadow: 0px 0px 10px #000000;\n  -webkit-transition: .2s;\n  transition: .2s\n}\n\n#mobile-debug .title { font-size: 18px; }\n#mobile-debug span, #mobile-debug p { font-size: 12px; margin: 0; }\n#mobile-debug .input { color: #D64141; }\n#mobile-debug .value { color: #404040; }\n#mobile-debug .value.warn { color: #D0A889; }\n",
+    "@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');\n\n/**\n * Counter\n */\n\n#mobile-debug-counter {\n  position: fixed;\n  z-index: 888888888;\n  bottom: 0;\n  right: 0;\n  background-color: #31363F;\n  color: #D9DCE1;\n  display: inline-block;\n  font-family: sans-serif;\n}\n\n#mobile-debug-counter span {\n  display: inline-block;\n  padding: 10px;\n}\n\n#mobile-debug-counter span.warn { background-color: #AC7B1F; }\n#mobile-debug-counter span.error { background-color: #CF3C34; }\n\n\n/**\n * Console\n */\n\n#mobile-debug { display: none; }\n#mobile-debug:target {\n  display: block;\n  position: fixed;\n  z-index: 999999999;\n  top: 5px;\n  left: 5px;\n  bottom: 5px;\n  right: 5px;\n  margin: 0px;\n  padding: 10px;\n  color: #333;\n  background-color: rgba(255, 255, 255, 0.95);\n  overflow: scroll;\n  font-family: 'PT Sans Narrow', sans-serif;\n  box-shadow: 0px 0px 10px #000000;\n}\n\n#mobile-debug a {\n  text-decoration: none;\n  border: 1px solid black;\n  padding: 2px;\n  color: black;\n  margin-bottom: 5px;\n  display: inline-block;\n}\n\n#mobile-debug .title { font-size: 20px; }\n\n#mobile-debug span,\n#mobile-debug p {\n  font-size: 16px;\n  margin: 0;\n}\n\n#mobile-debug p.input {\n  color: #417ad6;\n  font-weight: bold;\n  font-size: 14px;\n}\n\n#mobile-debug .value {\n  color: #404040;\n  margin-bottom: 10px;\n}\n\n#mobile-debug .warn.warn { color: #D0A889; }\n\n#mobile-debug .error.error {\n  color: #CF3C34;\n  font-weight: bold;\n}\n",
     undefined
@@ -32,5 +32,13 @@ );
   node.id = "mobile-debug";
-  node.innerHTML = '<p class="title">Debug console</p>';
+  node.innerHTML =
+    '<p><a href="#">&times; Close</a></p><p class="title">Debug console</p>';
   document.body.appendChild(node);
 
+  var button = document.createElement("a");
+  button.href = "#mobile-debug";
+  button.id = "mobile-debug-counter";
+  button.innerHTML =
+    '<span class="error">X</span><span class="warn">X</span><span>X</span>';
+  document.body.appendChild(button);
+
   /**
@@ -50,3 +58,4 @@ ********** Console handler **********
       var debugDate = document.createElement("p");
-      debugDate.innerHTML = now;
+      debugDate.innerHTML =
+        now.getHours() + "h" + ("0" + now.getMinutes()).slice(-2);
       debugDate.classList.add("input");
@@ -58,3 +67,3 @@ document.getElementById("mobile-debug").appendChild(debugDate);
       debugValue.classList.add("value");
-      Array.foreach(classes, function(cssClass) {
+      classes.forEach(function(cssClass) {
         debugValue.classList.add(cssClass);
@@ -98,5 +107,10 @@ });
     var debugMessage =
-      "JavaScript error: " + message + " on line " + linenumber + " for " + url;
+      '<span class="error">&times;</span> JavaScript error: ' +
+      message +
+      " on line " +
+      linenumber +
+      " for " +
+      url;
     console.log(debugMessage);
   };
 })();

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function e(e,n){for(var o=Array.prototype.slice.call(e),t=0;t<o.length;t+=1)!function(){var e=new Date,l=document.createElement("p");l.innerHTML=e,l.classList.add("input"),document.getElementById("mobile-debug").appendChild(l);var a=document.createElement("p");a.innerHTML=o[t],a.classList.add("value"),Array.foreach(n,function(e){a.classList.add(e)}),document.getElementById("mobile-debug").appendChild(a)}()}!function(e,n){if("undefined"==typeof document)return n;e=e||"";var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),o.appendChild(t)}("#mobile-debug { display: none; }\n#mobile-debug:target {\n  display: block;\n  position: fixed;\n  z-index: 999999999;\n  top: 5px;\n  left: 5px;\n  bottom: 5px;\n  right: 5px;\n  margin: 0px;\n  padding: 10px;\n  color: #333;\n  background-color: rgba(255, 255, 255, 0.95);\n  overflow: scroll;\n  font-family: 'monospace','Lucida Console','Lucida Sans Unicode','Verdana';\n  border-radius: 0px 0px 10px 10px;\n  box-shadow: 0px 0px 10px #000000;\n  -webkit-transition: .2s;\n  transition: .2s\n}\n\n#mobile-debug .title { font-size: 18px; }\n#mobile-debug span, #mobile-debug p { font-size: 12px; margin: 0; }\n#mobile-debug .input { color: #D64141; }\n#mobile-debug .value { color: #404040; }\n#mobile-debug .value.warn { color: #D0A889; }\n",void 0);var n=document.createElement("div");n.id="mobile-debug",n.innerHTML='<p class="title">Debug console</p>',document.body.appendChild(n);var o=console.log,t=console.warn;console.warn=function(){for(var n=arguments.length,o=Array(n),l=0;l<n;l++)o[l]=arguments[l];t.apply(console,o),e(o,["warn"])},console.log=function(){for(var n=arguments.length,t=Array(n),l=0;l<n;l++)t[l]=arguments[l];o.apply(console,t),e(t,[])},window.onerror=function(e,n,o){var t="JavaScript error: "+e+" on line "+o+" for "+n;console.log(t)}}();
+!function(){"use strict";function n(n,e){for(var o=Array.prototype.slice.call(n),t=0;t<o.length;t+=1)!function(){var n=new Date,r=document.createElement("p");r.innerHTML=n.getHours()+"h"+("0"+n.getMinutes()).slice(-2),r.classList.add("input"),document.getElementById("mobile-debug").appendChild(r);var l=document.createElement("p");l.innerHTML=o[t],l.classList.add("value"),e.forEach(function(n){l.classList.add(n)}),document.getElementById("mobile-debug").appendChild(l)}()}!function(n,e){if("undefined"==typeof document)return e;n=n||"";var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=n:t.appendChild(document.createTextNode(n)),o.appendChild(t)}("@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');\n\n/**\n * Counter\n */\n\n#mobile-debug-counter {\n  position: fixed;\n  z-index: 888888888;\n  bottom: 0;\n  right: 0;\n  background-color: #31363F;\n  color: #D9DCE1;\n  display: inline-block;\n  font-family: sans-serif;\n}\n\n#mobile-debug-counter span {\n  display: inline-block;\n  padding: 10px;\n}\n\n#mobile-debug-counter span.warn { background-color: #AC7B1F; }\n#mobile-debug-counter span.error { background-color: #CF3C34; }\n\n\n/**\n * Console\n */\n\n#mobile-debug { display: none; }\n#mobile-debug:target {\n  display: block;\n  position: fixed;\n  z-index: 999999999;\n  top: 5px;\n  left: 5px;\n  bottom: 5px;\n  right: 5px;\n  margin: 0px;\n  padding: 10px;\n  color: #333;\n  background-color: rgba(255, 255, 255, 0.95);\n  overflow: scroll;\n  font-family: 'PT Sans Narrow', sans-serif;\n  box-shadow: 0px 0px 10px #000000;\n}\n\n#mobile-debug a {\n  text-decoration: none;\n  border: 1px solid black;\n  padding: 2px;\n  color: black;\n  margin-bottom: 5px;\n  display: inline-block;\n}\n\n#mobile-debug .title { font-size: 20px; }\n\n#mobile-debug span,\n#mobile-debug p {\n  font-size: 16px;\n  margin: 0;\n}\n\n#mobile-debug p.input {\n  color: #417ad6;\n  font-weight: bold;\n  font-size: 14px;\n}\n\n#mobile-debug .value {\n  color: #404040;\n  margin-bottom: 10px;\n}\n\n#mobile-debug .warn.warn { color: #D0A889; }\n\n#mobile-debug .error.error {\n  color: #CF3C34;\n  font-weight: bold;\n}\n",void 0);var e=document.createElement("div");e.id="mobile-debug",e.innerHTML='<p><a href="#">&times; Close</a></p><p class="title">Debug console</p>',document.body.appendChild(e);var o=document.createElement("a");o.href="#mobile-debug",o.id="mobile-debug-counter",o.innerHTML='<span class="error">X</span><span class="warn">X</span><span>X</span>',document.body.appendChild(o);var t=console.log,r=console.warn;console.warn=function(){for(var e=arguments.length,o=Array(e),t=0;t<e;t++)o[t]=arguments[t];r.apply(console,o),n(o,["warn"])},console.log=function(){for(var e=arguments.length,o=Array(e),r=0;r<e;r++)o[r]=arguments[r];t.apply(console,o),n(o,[])},window.onerror=function(n,e,o){var t='<span class="error">&times;</span> JavaScript error: '+n+" on line "+o+" for "+e;console.log(t)}}();

package.json

 {
   "name": "mobile-debug",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Mobile debug UI helper",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/main.js

@@ -12,5 +12,11 @@ import './mobile-debug.css';
 node.id = 'mobile-debug';
-node.innerHTML = '<p class="title">Debug console</p>';
+node.innerHTML = '<p><a href="#">&times; Close</a></p><p class="title">Debug console</p>';
 document.body.appendChild(node);
 
+const button = document.createElement('a');
+button.href = '#mobile-debug';
+button.id = 'mobile-debug-counter';
+button.innerHTML = '<span class="error">X</span><span class="warn">X</span><span>X</span>';
+document.body.appendChild(button);
+
 /**
@@ -29,3 +35,3 @@ ********** Console handler **********
     const debugDate = document.createElement('p');
-    debugDate.innerHTML = now;
+    debugDate.innerHTML = `${now.getHours()}h${`0${now.getMinutes()}`.slice(-2)}`;
     debugDate.classList.add('input');
@@ -37,3 +43,3 @@ document.getElementById('mobile-debug').appendChild(debugDate);
     debugValue.classList.add('value');
-    Array.foreach(classes, (cssClass) => {
+    classes.forEach((cssClass) => {
       debugValue.classList.add(cssClass);
@@ -56,4 +62,4 @@ });
 window.onerror = (message, url, linenumber) => {
-  const debugMessage = `JavaScript error: ${message} on line ${linenumber} for ${url}`;
+  const debugMessage = `<span class="error">&times;</span> JavaScript error: ${message} on line ${linenumber} for ${url}`;
   console.log(debugMessage);
 };

No alert changes

Improved metrics

Total package byte prevSize

18404

increased by22.59%

Lines of code

229

increased by43.13%

No dependency changes