try to take over the world!
// ==UserScript==
// @name 指标按页面分组显示
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match *://*.growingio.com/projects/*/events
// @grant none
// ==/UserScript==
(function() {
'use strict';
/*
var originalMethod = XMLHttpRequest.prototype.setRequestHeader;
XMLHttpRequest.prototype.setRequestHeader = function(key, value) {
console.log("setting " + key + " to " + value);
originalMethod(key, value);
};
*/
function fetch(url, callback) {
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
callback(JSON.parse(xhr.responseText));
});
xhr.open('GET', url);
xhr.setRequestHeader('accept', 'application/json');
xhr.send();
}
var PLATFORM_TEMPLATE = "<div id=\"debugio-platform-title\">" +
" Android</div>" +
"<div id=\"debugio-platform-container\">" +
" <ul id=\"debugio-domain-list\">" +
" <!-- generated by domain-list-template.html -->" +
" </ul>" +
"</div>";
var DOMAIN_TEMPLATE = "<div id=\"debugio-domain-title\">joker.li.test</div>" +
"<dir id=\"debugio-domain-container\">" +
" <ul id=\"debugio-page-list\">" +
" <!-- generated by page-list-template.html -->" +
" </ul>" +
"</dir>";
var PAGE_TEMPLATE = "<div id=\"debugio-page-title\">\n" +
" <span id=\"debugio-page-name\">MainActivity</span>\n" +
"</div>\n" +
"<div id=\"debugio-page-container\">\n" +
" <ol id=\"debugio-tags-list\">\n" +
" <!-- generated by tag-template.html -->\n" +
" </ol>\n" +
"</div>";
var TAG_TEMPLATE = "<div class=\"debugio-tag-button\">\n" +
" <button id=\"debugio-tag-modify\">modify</button>\n" +
" <button id=\"debugio-tag-archive\">archive</button>\n" +
"</div>\n" +
"<div id=\"debugio-tag-attr-contaienr\">\n" +
" <table class=\"debugio-tag-table\">\n" +
" <tr>\n" +
" <td>name</td>\n" +
" <td id=\"debugio-attr-name\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>type</td>\n" +
" <td id=\"debugio-attr-type\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>xpath</td>\n" +
" <td id=\"debugio-attr-xpath\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>content</td>\n" +
" <td id=\"debugio-attr-content\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>query</td>\n" +
" <td id=\"debugio-attr-query\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>position</td>\n" +
" <td id=\"debugio-attr-position\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>href</td>\n" +
" <td id=\"debugio-attr-href\"></td>\n" +
" </tr>\n" +
" </table>\n" +
"</div>\n" +
"<div id=\"debugio-tag-filter-container\">\n" +
" <table class=\"debugio-tag-table\">\n" +
" <tr>\n" +
" <td>domain</td>\n" +
" <td id=\"debugio-filter-domain\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>path</td>\n" +
" <td id=\"debugio-filter-page\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>xpath</td>\n" +
" <td id=\"debugio-filter-xpath\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>content</td>\n" +
" <td id=\"debugio-filter-content\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>query</td>\n" +
" <td id=\"debugio-filter-query\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>position</td>\n" +
" <td id=\"debugio-filter-position\"></td>\n" +
" </tr>\n" +
" <tr>\n" +
" <td>href</td>\n" +
" <td id=\"debugio-filter-href\"></td>\n" +
" </tr>\n" +
" </table>\n" +
"</div>";
var DEBUGIO_STYLE = "ol,ul {\n" +
" list-style-type: none;\n" +
"}\n" +
"\n" +
"div#debugio-tag-attr-contaienr {\n" +
" display: inline-block;\n" +
" vertical-align: top;\n" +
" width: 30%;\n" +
"}\n" +
"\n" +
"div#debugio-tag-filter-container {\n" +
" display: inline-block;\n" +
" width: 60%;\n" +
" overflow-wrap: break-word;\n" +
"}\n" +
"\n" +
"table.debugio-tag-table > tbody > tr > td:nth-child(1) {\n" +
" background-color: rgba(185, 197, 197, 0.27);\n" +
" -webkit-user-select: none;\n" +
" cursor: default;\n" +
" color: rgba(0, 0, 0, 0.8);\n" +
"}\n" +
"\n" +
"ol#debugio-tags-list {\n" +
" background-color: rgba(185, 197, 197, 0.27);\n" +
"}\n" +
"\n" +
"div#debugio-platform-container {\n" +
" background-color: rgba(185, 197, 197, 0.27);\n" +
"}\n" +
"\n" +
"table.debugio-tag-table {\n" +
" text-align: start;\n" +
" width: 100%;\n" +
" display: block;\n" +
"}\n" +
"\n" +
"ol#debugio-tags-list > li {\n" +
" border-bottom: solid gray 1.5px;\n" +
" border-top: solid gray 1.5px;\n" +
"}\n" +
"\n" +
"div.debugio-tag-button {\n" +
" color: red;\n" +
" position: absolute;\n" +
" right: 0;\n" +
" margin-right: 10px;\n" +
"}\n" +
"\n" +
"\n" +
"button#debugio-tag-archive {\n" +
"}\n" +
"\n" +
"div#debugio-tag-group-container {\n" +
" font-family: monospace;\n" +
" font-weight: 400;\n" +
" color: rgba(0, 0, 0, 0.9);\n" +
"}\n" +
"\n" +
"table.debugio-tag-table > tbody > tr > td:nth-child(2) {\n" +
" word-break: break-all;\n" +
"}";
function generateTagContentWith(tag) {
var tag_content = document.createElement('li');
tag_content.innerHTML = TAG_TEMPLATE;
if (tag.name) tag_content.querySelector("#debugio-attr-name").textContent = tag.name;
if (tag.eventType) tag_content.querySelector("#debugio-attr-type").textContent = tag.eventType;
if (tag.attrs.xpath) tag_content.querySelector("#debugio-attr-xpath").textContent = tag.attrs.xpath;
if (tag.attrs.content) tag_content.querySelector("#debugio-attr-content").textContent = tag.attrs.content;
if (tag.attrs.query) tag_content.querySelector("#debugio-attr-query").textContent = tag.attrs.query;
if (tag.attrs.position) tag_content.querySelector("#debugio-attr-position").textContent = tag.attrs.position;
if (tag.attrs.href) tag_content.querySelector("#debugio-attr-href").textContent = tag.attrs.href;
if (tag.filter.domain) tag_content.querySelector("#debugio-filter-domain").textContent = tag.filter.domain;
if (tag.filter.path) tag_content.querySelector("#debugio-filter-page").textContent = tag.filter.path;
if (tag.filter.xpath) tag_content.querySelector("#debugio-filter-xpath").textContent = tag.filter.xpath;
if (tag.filter.content) tag_content.querySelector("#debugio-filter-content").textContent = tag.filter.content;
if (tag.filter.query) tag_content.querySelector("#debugio-filter-query").textContent = tag.filter.query;
if (tag.filter.index) tag_content.querySelector("#debugio-filter-position").textContent = tag.filter.index;
if (tag.filter.href) tag_content.querySelector("#debugio-filter-href").textContent = tag.filter.href;
return tag_content;
}
function generatePageContentWith(page_name, page_tags) {
var page_content = document.createElement('li');
page_content.innerHTML = PAGE_TEMPLATE;
page_content.querySelector("#debugio-page-name").textContent = page_name;
var tag_list_container = page_content.querySelector("#debugio-tags-list");
page_tags.forEach((tag) => {
tag_list_container.appendChild(generateTagContentWith(tag));
})
return page_content;
}
function generatDomainContentWith(domain_name, domain_tags) {
var domain_content = document.createElement('li');
domain_content.innerHTML = DOMAIN_TEMPLATE;
domain_content.querySelector("#debugio-domain-title").textContent = domain_name;
var page_list_container = domain_content.querySelector("#debugio-page-list");
for (var page in domain_tags) {
page_list_container.appendChild(generatePageContentWith(page, domain_tags[page]));
}
return domain_content;
}
function generatePlatformContentWith(platform_name, platform_tags) {
var platform_content = document.createElement('li');
platform_content.innerHTML = PLATFORM_TEMPLATE;
platform_content.querySelector("#debugio-platform-title").textContent = platform_name;
var domain_list_containter = platform_content.querySelector("#debugio-domain-list");
for (var domain in platform_tags) {
domain_list_containter.appendChild(generatDomainContentWith(domain, platform_tags[domain]));
}
return platform_content;
}
var debugButton = document.createElement('button');
debugButton.className = 'ant-btn';
debugButton.textContent = '分组显示简单指标';
var platform_list_container = null;
var buttonContainer = document.querySelector('#viewport > div.app-main-container > div.app-main-content > div > div.top-second-menu-bar.clearfix > div.pull-right');
if (buttonContainer) {
buttonContainer.appendChild(debugButton);
var eventsContainer = document.querySelector('#viewport > div.app-main-container > div.app-main-content > div > div.gr-feature-hybrid-event-content');
debugButton.addEventListener('click', (e) => {
if (debugButton.classList.contains('ant-btn-primary')) {
debugButton.classList.remove('ant-btn-primary');
} else {
debugButton.classList.add('ant-btn-primary');
}
eventsContainer.childNodes.forEach((child) => {
eventsContainer.removeChild(child);
});
if (platform_list_container) {
eventsContainer.appendChild(platform_list_container);
return;
}
fetch(location.href, (tags) => {
var platformGroups = {};
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
var platformTags = platformGroups[tag.platform];
if (!platformTags) {
platformTags = {};
platformGroups[tag.platform] = platformTags;
}
var domainTags = platformTags[tag.filter.domain];
if (!domainTags) {
domainTags = {};
platformTags[tag.filter.domain] = domainTags;
}
var pageTags = domainTags[tag.filter.path];
if (!pageTags) {
pageTags = [];
domainTags[tag.filter.path] = pageTags;
}
pageTags.push(tag);
}
if (!document.querySelector("#debgio_style")) {
var debgio_style = document.createElement('style');
debgio_style.id = "debgio_style";
debgio_style.innerHTML = DEBUGIO_STYLE;
document.head.appendChild(debgio_style);
}
platform_list_container = document.createElement('div');
platform_list_container.id = "debugio-tag-group-container";
for (var platform in platformGroups) {
platform_list_container.appendChild(generatePlatformContentWith(platform, platformGroups[platform]));
}
eventsContainer.appendChild(platform_list_container);
});
});
}
})();