feature/chrome extension initial

atk4 · Dec 14, 2018 · d76299f · d76299f
1 parent 2b13e97
commit d76299f
Show file tree

Hide file tree

Showing 44 changed files with 8,073 additions and 0 deletions.
diff --git a/atk-extension.css b/atk-extension.css
@@ -0,0 +1,66 @@
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+    background-color: #eaeaea;
+}
+
+.ui.container.atk-extension {
+    margin-left: 8px !important;
+    width: 98%;
+}
+
+.ui.table.atk-extension {
+    font-size: small;
+}
+
+.ui.table.atk-extension thead th, .ui.table.atk-extension tbody td {
+    padding: 4px 2px;
+}
+
+.ui.table.atk-extension caption {
+    text-align: left;
+    padding: 2px 4px;
+    border-bottom: 1px solid rgba(34,36,38,.1);
+}
+
+.ui.segment.atk-extension {
+    padding: 0px;
+    margin: 0px;
+}
+
+.ui.header.atk-extension:first-child {
+    margin-top: 0.93em;
+}
+
+.ui.header.atk-extension {
+    background-color: rgba(34,36,38,.1);
+    padding: 4px 8px;
+}
+
+.atk-extension.indent {
+    margin-left: 8px;
+}
+
+.ui.label.atk-extension.info {
+    padding: 2px;
+}
+
+.ui.column.atk-extension {
+    margin-top: 12px;
+}
+
+.atk-extension.label, .atk-extension > caption {
+    color: #536373;
+}
+
+.atk-extension.info {
+    color: #c80000;
+}
+
+.atk-extension.indent.spaced {
+    margin-bottom: 18px;
+}
+
+code {
+    outline: none;
+}
+
+
diff --git a/atk-panel.html b/atk-panel.html
@@ -0,0 +1,82 @@
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="vendor/fomantic-2.6.4/semantic.min.css">
+    <link rel="stylesheet" type="text/css" href="vendor/highlight.js/default.min.css">
+    <link rel="stylesheet" type="text/css" href="atk-extension.css">
+</head>
+<body>
+<div class="ui container atk-extension">
+    <h4 class="ui header atk-extension">Atk Developper Extension</h4>
+    <div class="ui basic segment atk-extension">
+        <div class="atk-extension indent">
+            <span class="atk-extension label">Atkjs-ui version:</span>
+            <span class="atk-extension info ui primary label" id="atk-version"></span>
+        </div>
+    </div>
+    <h4 class="ui header atk-extension">Callback Request</h4>
+    <div class="ui basic segment atk-extension">
+        <div class="atk-extension indent">
+            <span class="atk-extension label">Base Url:</span>
+            <span class="atk-extension info response" id="atk-request-url"></span>
+        </div>
+        <div class="ui two column stackable grid container atk-extension">
+            <div class="column">
+                <table id="atk-header-query" class="ui very basic table unstackable atk-extension">
+                    <caption>Query string</caption>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+            <div class="column">
+                <table id="atk-header-data" class="ui very basic table unstackable atk-extension">
+                    <caption>Post data</caption>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <h4 class="ui header atk-extension">Callback Response</h4>
+    <div class="atk-extension indent">
+        <span class="atk-extension label">Status:</span>
+        <span class="atk-extension info" id="atk-response-status"></span>
+    </div>
+    <div class="atk-extension indent spaced">
+        <span class="atk-extension label">Element Id:</span>
+        <span class="atk-extension info response" id="atk-response-id"></span>
+    </div>
+    <div class="ui basic segment atk-extension">
+        <div class="ui top attached tabular menu atk-extension">
+            <a class="item active" data-tab="atkjs">Javascript</a>
+            <a class="item" data-tab="rawhtml">Raw HTML</a>
+            <a class="item" data-tab="html">Rendered HTML</a>
+        </div>
+        <div class="ui attached tab active" data-tab="atkjs">
+            <div class="atk-extension code-container">
+                <figure>
+                <pre>
+                    <code spellcheck="false" id="atk-atkjs" class="javascript"></code>
+                 </pre>
+                </figure>
+            </div>
+        </div>
+        <div class="ui attached tab" data-tab="rawhtml">
+            <div class="atk-extension code-container">
+                <figure>
+                    <pre>
+                        <code spellcheck="false" id="atk-rawhtml" class="html"></code>
+                  </pre>
+                </figure>
+            </div>
+        </div>
+        <div class="ui attached tab" data-tab="html">
+            <div id="atk-html"></div>
+        </div>
+    </div>
+</div>
+<script src="vendor/jquery-3.3.1.min.js"></script>
+<script src="vendor/fomantic-2.6.4/semantic.min.js"></script>
+<script src="vendor/highlight.js/highlight.min.js"></script>
+<script src="atk-panel.js"></script>
+</body>
+</html>
diff --git a/atk-panel.js b/atk-panel.js
@@ -0,0 +1,187 @@
+/*
+ * Manage the ATK developper panel inside chrome developper window.
+ *
+ * This panel will listen for ajax request and display
+ * request and response infotmation from the request.
+ *
+ */
+
+/**
+ * Main entry when dom is ready.
+ */
+jQuery(function(jQuery){
+  setupPanel(jQuery);
+});
+
+// check and display atkui-js version when opening.
+chrome.devtools.inspectedWindow.eval("atk.version()", function(result, error){
+  document.getElementById('atk-version').innerHTML = ' ' + result + ' ';
+});
+
+
+chrome.devtools.network.onRequestFinished.addListener(function(request){
+  if (isXhrRequest(request)) {
+    setPanelRequest(request.request);
+    request.getContent(function(content){
+      //setResponseFromContent(content);
+      setPanelResponse(getResponseFromContent(content));
+    });
+  } else {
+    setPanelResponse({});
+    setPanelRequest({});
+  }
+
+});
+
+/**
+ * Update panel section with callback request information.
+ *
+ * @param request
+ */
+function setPanelRequest(request) {
+  var qString = '', pData = '';
+
+  if (request.queryString && request.queryString.length > 0) {
+    request.queryString.forEach(function(item){
+      qString = qString + getTrForItemValue(item);
+    });
+  }
+
+  if (request.postData && request.postData.params && request.postData.params.length > 0 ) {
+    request.postData.params.forEach(function(item){
+      pData = pData + getTrForItemValue(item);
+    });
+  }
+
+  jQuery('#atk-request-url').html(request.url ? request.url.replace(/\?.*$/,"") : '');
+  jQuery('#atk-header-query > tbody').html(qString);
+  jQuery('#atk-header-data > tbody').html(pData);
+}
+
+
+/**
+ * Return an html string table row.
+ *
+ * @param item
+ * @returns {string}
+ */
+function getTrForItemValue(item) {
+  return '<tr><td>'+ item.name +'</td><td>'+item.value+'</td></tr>';
+}
+
+/**
+ * Update panel with callback response information.
+ */
+function setPanelResponse(response) {
+
+  if (typeof response.success != 'undefined') {
+    jQuery('#atk-response-status').html(jQuery('<span>').addClass('ui empty circular label').addClass(response.success ? 'green' : 'red'));
+  }
+ else {
+    jQuery('#atk-response-status').html('');
+  }
+
+  jQuery('#atk-html').html(response.html ? response.html : '');
+  jQuery('#atk-rawhtml').text(response.html ? formatFactory(response.html.trim()) : '');
+  jQuery('#atk-atkjs').text(response.atkjs ? response.atkjs : '');
+  jQuery('#atk-response-id').text(response.id ? response.id : '');
+
+  jQuery('#atk-atkjs').parents('figure').toggle(response.atkjs ? true : false);
+  jQuery('#atk-rawhtml').parents('figure').toggle(response.html ? true : false);
+
+  jQuery('pre code').each(function(i, block) {
+    hljs.highlightBlock(block);
+  });
+
+  //Prism.highlightAll();
+}
+
+/**
+ * Get response from callback received content.
+ * Parse received json content and return proper object.
+ *
+ * @param content
+ */
+function getResponseFromContent(content) {
+  try {
+    var response;
+    response = JSON.parse(content);
+    response.atkjs = response.atkjs ? response.atkjs.replace(/<\/?script>/g, '') : '';
+    return response;
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+/**
+ * Check if request is from ajax.
+ *
+ * @param req
+ * @returns {boolean}
+ */
+function isXhrRequest(req) {
+  return req.request.headers.filter(function(item){
+    return (item.name === 'X-Requested-With') && (item.value === 'XMLHttpRequest');
+  }).length > 0;
+}
+
+
+/**
+ * Panel init.
+ *
+ * @param jQuery
+ */
+function setupPanel(jQuery) {
+  jQuery('.menu .item').tab();
+  setPanelResponse({});
+}
+
+/**
+ * Function provide by David Kacha.
+ * https://codepen.io/davidkacha/pen/zzNBxq
+ * @param html
+ * @returns {String}
+ */
+function formatFactory(html) {
+  function parse(html, tab = 0) {
+    var tab;
+    var html = jQuery.parseHTML(html);
+    var formatHtml = new String();
+
+    function setTabs () {
+      var tabs = new String();
+
+      for (i=0; i < tab; i++){
+        tabs += '\t';
+      }
+      return tabs;
+    };
+
+
+    jQuery.each( html, function( i, el ) {
+      if (el.nodeName == '#text') {
+        if ((jQuery(el).text().trim()).length) {
+          formatHtml += setTabs() + jQuery(el).text().trim() + '\n';
+        }
+      } else {
+        var innerHTML = jQuery(el).html().trim();
+        jQuery(el).html(innerHTML.replace('\n', '').replace(/ +(?= )/g, ''));
+
+
+        if (jQuery(el).children().length) {
+          jQuery(el).html('\n' + parse(innerHTML, (tab + 1)) + setTabs());
+          var outerHTML = jQuery(el).prop('outerHTML').trim();
+          formatHtml += setTabs() + outerHTML + '\n';
+
+        } else {
+          var outerHTML = jQuery(el).prop('outerHTML').trim();
+          formatHtml += setTabs() + outerHTML + '\n';
+        }
+      }
+    });
+
+    return formatHtml;
+  };
+
+  return parse(html.replace(/(\r\n|\n|\r)/gm," ").replace(/ +(?= )/g,''));
+};
diff --git a/atk-popup.html b/atk-popup.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Agile Toolkit Developper extension</title>
+</head>
+<body style="width: 180px">
+<h4>Agile Toolkit Extension</h4>
+<p >This extension will help you debug atk callback. Open Dev tools and look for the ATK panel.</p>
+</body>
+</html>
diff --git a/atk-tools.js b/atk-tools.js
@@ -0,0 +1,45 @@
+/**
+ * Get jQuery object properties of an element.
+ *
+ * @returns {{__proto__: null}}
+ */
+var page_getProperties = function() {
+  var data = window.jQuery && $0 ? jQuery.data($0) : {};
+  // Make a shallow copy with a null prototype, so that sidebar does not
+  // expose prototype.
+  var props = Object.getOwnPropertyNames(data);
+  var copy = { __proto__: null };
+  for (var i = 0; i < props.length; ++i)
+    copy[props[i]] = data[props[i]];
+  return copy;
+};
+
+/**
+ * Create Side panel
+ */
+chrome.devtools.panels.elements.createSidebarPane(
+  "Atk plugin Properties",
+  function(sidebar) {
+    function updateElementProperties() {
+      sidebar.setExpression("(" + page_getProperties.toString() + ")()");
+    }
+    updateElementProperties();
+
+    //add an select event listener to the element dev panel.
+    //when selection changed, will get new jQuery object properties and display it in side panel.
+    chrome.devtools.panels.elements.onSelectionChanged.addListener(
+      updateElementProperties);
+  });
+
+/**
+ * Create a new panel in developper tool window.
+ */
+chrome.devtools.panels.create("ATK",
+  null,
+  "atk-panel.html",
+  function(panel){
+  }
+);
+
+
+