☰

GreasyFork User Dashboard

It redesigns your own user page.

目前为 2019-01-26 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GreasyFork User Dashboard
  3. // @name:ja     GreasyFork User Dashboard
  4. // @namespace   knoa.jp
  5. // @description It redesigns your own user page.
  6. // @description:ja 自分用の新しいユーザーページを提供します。
  7. // @include     https://greasyfork.org/*/users/*
  8. // @version     1.0.1
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.   const SCRIPTNAME = 'GreasyForkUserDashboard';
  14.   const DEBUG = false;/*
  15.     1.0.1
  16.     bug fix.
  17.   */
  18.   if(window === top && console.time) console.time(SCRIPTNAME);
  19.   const INTERVAL = 1000;/* for fetch */
  20.   const DEFAULTMAX = 10;/* for chart scale */
  21.   const DAYS = 180;/* for chart length */
  22.   const STATSUPDATE = 1000*60*60;/* stats update interval of greasyfork.org */
  23.   const TRANSLATIONEXPIRE = 1000*60*60*24*30;/* cache time for translations */
  24.   let site = {
  25.     targets: {
  26.       userSection: () => $('body > header + div > section:nth-of-type(1)'),
  27.       controlPanel: () => $('#control-panel'),
  28.       newScriptSetLink: () => $('a[href$="/sets/new"]'),
  29.       scriptSets: () => $('body > header + div > section:nth-of-type(2)'),
  30.       scripts: () => $('body > header + div > section:nth-of-type(2) + div'),
  31.       userScriptSets: () => $('#user-script-sets'),
  32.       userScriptList: () => $('#user-script-list'),
  33.     },
  34.     get: {
  35.       language: (d) => d.documentElement.lang,
  36.       firstScript: (list) => list.querySelector('li h2 > a'),
  37.       translation: (d) => {return {
  38.         info:        d.querySelector('#script-links > li.current').textContent,
  39.         code:        d.querySelector('#script-links > li > a[href$="/code"]').textContent,
  40.         history:     d.querySelector('#script-links > li > a[href$="/versions"]').textContent,
  41.         feedback:    d.querySelector('#script-links > li > a[href$="/feedback"]').textContent.replace(/\s\(\d+\)/, ''),
  42.         stats:       d.querySelector('#script-links > li > a[href$="/stats"]').textContent,
  43.         derivatives: d.querySelector('#script-links > li > a[href$="/derivatives"]').textContent,
  44.         update:      d.querySelector('#script-links > li > a[href$="/versions/new"]').textContent,
  45.         delete:      d.querySelector('#script-links > li > a[href$="/delete"]').textContent,
  46.         admin:       d.querySelector('#script-links > li > a[href$="/admin"]').textContent,
  47.         version:     d.querySelector('#script-stats > dt.script-show-version').textContent,
  48.       }},
  49.       props: (li) => {return {
  50.         name: li.querySelector('h2 > a'),
  51.         description: li.querySelector('.description'),
  52.         stats: li.querySelector('dl.inline-script-stats'),
  53.         dailyInstalls: li.querySelector('dd.script-list-daily-installs'),
  54.         totalInstalls: li.querySelector('dd.script-list-total-installs'),
  55.         ratings: li.querySelector('dd.script-list-ratings'),
  56.         createdDate: li.querySelector('dd.script-list-created-date'),
  57.         updatedDate: li.querySelector('dd.script-list-updated-date'),
  58.         scriptVersion: li.dataset.scriptVersion,
  59.       }},
  60.     }
  61.   };
  62.   let translations = {
  63.     'en': {
  64.       info:        'Info',
  65.       code:        'Code',
  66.       history:     'History',
  67.       feedback:    'Feedback',
  68.       stats:       'Stats',
  69.       derivatives: 'Derivatives',
  70.       update:      'Update',
  71.       delete:      'Delete',
  72.       admin:       'Admin',
  73.       version:     'Version',
  74.     }
  75.   }, translation = translations['en'];
  76.   let elements = {}, shown = {};
  77.   let core = {
  78.     initialize: function(){
  79.       core.getElements();
  80.       if(elements.length < site.targets.length) return log('Not user own page.');
  81.       core.addStyle();
  82.       core.getTranslations();
  83.       core.hideUserSection();
  84.       core.hideControlPanel();
  85.       core.addTabNavigation();
  86.       core.addNewScriptSetLink();
  87.       core.rebuildScriptList();
  88.     },
  89.     getElements: function(){
  90.       if(!site.targets.controlPanel()) return;/* not my own page */
  91.       for(let i = 0, keys = Object.keys(site.targets); keys[i]; i++){
  92.         let element = site.targets[keys[i]]();
  93.         if(!element) return log(`Not found: ${keys[i]}`);
  94.         element.dataset.selector = keys[i];
  95.         elements[keys[i]] = element;
  96.       }
  97.       shown = Storage.read('shown') || shown;
  98.     },
  99.     getTranslations: function(){
  100.       let language = site.get.language(document);
  101.       translations = Storage.read('translations') || translations;
  102.       translation = translations[language] || translation;
  103.       if(site.get.language(document) === 'en' || Object.keys(translations).find((lang) => lang === language)) return;
  104.       let firstScript = site.get.firstScript(elements.userScriptList);
  105.       fetch(firstScript.href, {credentials: 'include'})
  106.         .then(response => response.text())
  107.         .then(text => new DOMParser().parseFromString(text, 'text/html'))
  108.         .then(d => {
  109.           translation = translations[site.get.language(d)] = site.get.translation(d);
  110.           Storage.save('translations', translations, Date.now() + TRANSLATIONEXPIRE);
  111.         });
  112.     },
  113.     hideUserSection: function(){
  114.       let userSection = elements.userSection, more = createElement(core.html.more());
  115.       if(!shown.userSection) userSection.classList.add('hidden');
  116.       more.addEventListener('click', function(e){
  117.         userSection.classList.toggle('hidden');
  118.         shown.userSection = !userSection.classList.contains('hidden');
  119.         Storage.save('shown', shown);
  120.       });
  121.       userSection.appendChild(more);
  122.     },
  123.     hideControlPanel: function(){
  124.       let controlPanel = elements.controlPanel, header = controlPanel.firstElementChild;
  125.       if(!shown.controlPanel) controlPanel.classList.add('hidden');
  126.       elements.userSection.style.minHeight = controlPanel.offsetHeight + controlPanel.offsetTop + 'px';
  127.       header.addEventListener('click', function(e){
  128.         controlPanel.classList.toggle('hidden');
  129.         shown.controlPanel = !controlPanel.classList.contains('hidden');
  130.         Storage.save('shown', shown);
  131.         elements.userSection.style.minHeight = controlPanel.offsetHeight + controlPanel.offsetTop + 'px';
  132.       });
  133.     },
  134.     addTabNavigation: function(){
  135.       const tabs = [
  136.         {label: elements.scriptSets.querySelector('header').textContent, selector: 'scriptSets', list: elements.userScriptSets},
  137.         {label: elements.scripts.querySelector('header').textContent, selector: 'scripts', list: elements.userScriptList, selected: true},
  138.       ];
  139.       let nav = createElement(core.html.tabNavigation()), scriptSets = elements.scriptSets;
  140.       let template = nav.querySelector('li.template');
  141.       scriptSets.parentNode.insertBefore(nav, scriptSets);
  142.       for(let i = 0; tabs[i]; i++){
  143.         let tab = template.cloneNode(true);
  144.         tab.classList.remove('template');
  145.         tab.textContent = tabs[i].label + ` (${tabs[i].list.children.length})`;
  146.         tab.dataset.target = tabs[i].selector;
  147.         tab.addEventListener('click', function(e){
  148.           tab.parentNode.querySelector('[data-selected="true"]').dataset.selected = 'false';
  149.           $('[data-tabified][data-selected="true"]').dataset.selected = 'false';
  150.           tab.dataset.selected = 'true';
  151.           $(`[data-selector="${tab.dataset.target}"]`).dataset.selected = 'true';
  152.         });
  153.         template.parentNode.insertBefore(tab, template);
  154.         /**/
  155.         let target = elements[tabs[i].selector];
  156.         target.dataset.tabified = 'true';
  157.         if(tabs[i].selected) tab.dataset.selected = target.dataset.selected = 'true';
  158.         else tab.dataset.selected = target.dataset.selected = 'false';
  159.       }
  160.     },
  161.     addNewScriptSetLink: function(){
  162.       let link = elements.newScriptSetLink.cloneNode(true), list = elements.userScriptSets, li = document.createElement('li');
  163.       li.appendChild(link);
  164.       list.appendChild(li);
  165.     },
  166.     rebuildScriptList: function(){
  167.       let stats = Storage.read('stats') || {}, promises = [];
  168.       for(let i = 0, list = elements.userScriptList, li; li = list.children[i]; i++){
  169.         let more = createElement(core.html.more()), props = site.get.props(li);
  170.         if(!shown[li.dataset.scriptName]) li.classList.add('hidden');
  171.         more.addEventListener('click', function(e){
  172.           li.classList.toggle('hidden');
  173.           shown[li.dataset.scriptName] = !li.classList.contains('hidden');
  174.           Storage.save('shown', shown);
  175.         });
  176.         li.appendChild(more);
  177.         /* attatch titles */
  178.         props.name.title = props.description.textContent.trim();
  179.         props.dailyInstalls.previousElementSibling.title = props.dailyInstalls.previousElementSibling.textContent;
  180.         props.totalInstalls.previousElementSibling.title = props.totalInstalls.previousElementSibling.textContent;
  181.         props.ratings.previousElementSibling.title       = props.ratings.previousElementSibling.textContent;
  182.         props.createdDate.previousElementSibling.title   = props.createdDate.previousElementSibling.textContent;
  183.         props.updatedDate.previousElementSibling.title   = props.updatedDate.previousElementSibling.textContent;
  184.         /* wrap the description to make it an inline element */
  185.         let span = document.createElement('span');
  186.         span.textContent = props.name.title;
  187.         props.description.replaceChild(span, props.description.firstChild);
  188.         /* Link to Code from Version */
  189.         let versionLabel = createElement(core.html.dt('script-list-version', translation.version));
  190.         let versionLink = createElement(core.html.ddLink('script-list-version', props.scriptVersion, props.name.href + '/code', translation.code));
  191.         versionLabel.title = versionLabel.textContent;
  192.         props.stats.insertBefore(versionLabel, props.createdDate.previousElementSibling);
  193.         props.stats.insertBefore(versionLink, props.createdDate.previousElementSibling);
  194.         /* Link to Stats from Total installs */
  195.         let statsLink = createElement(core.html.ddLink('script-list-total-installs', props.totalInstalls.textContent, props.name.href + '/stats', translation.stats));
  196.         props.stats.replaceChild(statsLink, props.totalInstalls);
  197.         /* Link to History from Updated date */
  198.         let historyLink = createElement(core.html.ddLink('script-list-updated-date', props.updatedDate.textContent, props.name.href + '/versions', translation.history));
  199.         props.stats.replaceChild(historyLink, props.updatedDate);
  200.         /* Draw chart of daily update checks */
  201.         let chart = createElement(core.html.chart());
  202.         if(stats[li.dataset.scriptName]){
  203.           core.buildChart(chart, stats[li.dataset.scriptName].slice(-DAYS));
  204.           li.appendChild(chart);
  205.           continue;
  206.         }else promises.push(new Promise(function(resolve, reject){
  207.           setTimeout(function(){
  208.             fetch(props.name.href + '/stats.csv')/* less file size than json */
  209.               .then(response => response.text())
  210.               .then(csv => {
  211.                 let lines = csv.split('\n');
  212.                 lines = lines.slice(1, -1);/* cut the labels + blank line */
  213.                 stats[props.name.textContent] = [];
  214.                 for(let i = 0; lines[i]; i++){
  215.                   let p = lines[i].split(',');
  216.                   stats[props.name.textContent][i] = {
  217.                     date: p[0],
  218.                     installs: parseInt(p[1]),
  219.                     updateChecks: parseInt(p[2]),
  220.                   };
  221.                 }
  222.                 core.buildChart(chart, stats[li.dataset.scriptName].slice(-DAYS));
  223.                 li.appendChild(chart);
  224.                 resolve();
  225.               });
  226.           }, i * INTERVAL);/* server friendly */
  227.         }));
  228.       }
  229.       Promise.all(promises)
  230.         .then(() => {
  231.           let now = Date.now(), past = now % STATSUPDATE, expire = now - past + STATSUPDATE;
  232.           Storage.save('stats', stats, expire);
  233.         });
  234.     },
  235.     buildChart: function(chart, stats){
  236.       let max = DEFAULTMAX;
  237.       for(let i = 0; stats[i]; i++){
  238.         if(stats[i].updateChecks > max) max = stats[i].updateChecks;
  239.       }
  240.       let dl = chart.querySelector('dl'), dt = dl.querySelector('dt'), dd = dl.querySelector('dd');
  241.       for(let i = 0, last = stats.length - 1; stats[i]; i++){
  242.         let date = stats[i].date, installs = stats[i].installs, updateChecks = stats[i].updateChecks;
  243.         let dateDt = dt.cloneNode(), countDd = dd.cloneNode();
  244.         dateDt.classList.remove('template');
  245.         countDd.classList.remove('template');
  246.         dateDt.textContent = date;
  247.         countDd.title = date + ': ' + updateChecks + (updateChecks === 1 ? ' check' : ' checks');
  248.         countDd.style.height = ((updateChecks / max) * 100) + '%';
  249.         if(i === last - 1){
  250.           countDd.classList.add('last');
  251.           let label = document.createElement('span');
  252.           label.textContent = toMetric(updateChecks);
  253.           countDd.appendChild(label);
  254.         }
  255.         dl.insertBefore(dateDt, dt);
  256.         dl.insertBefore(countDd, dt);
  257.       }
  258.     },
  259.     addStyle: function(name = 'style'){
  260.       let style = createElement(core.html[name]());
  261.       document.head.appendChild(style);
  262.       if(elements[name] && elements[name].isConnected) document.head.removeChild(elements[name]);
  263.       elements[name] = style;
  264.     },
  265.     html: {
  266.       more: () => `
  267.         <button class="more"></button>
  268.       `,
  269.       tabNavigation: () => `
  270.         <nav id="tabNavigation">
  271.           <ul>
  272.             <li class="template"></li>
  273.           </ul>
  274.         </nav>
  275.       `,
  276.       dt: (className, textContent) => `
  277.         <dt class="${className}"><span>${textContent}</span></dt>
  278.       `,
  279.       ddLink: (className, textContent, href, title) => `
  280.         <dd class="${className}"><a href="${href}" title="${title}">${textContent}</a></dd>
  281.       `,
  282.       chart: () => `
  283.         <div class="chart">
  284.           <dl>
  285.             <dt class="template date"></dt>
  286.             <dd class="template count"></dd>
  287.           </dl>
  288.         </div>
  289.       `,
  290.       style: () => `
  291.         <style type="text/css">
  292.           /* gray scale: 119-153-187-221 */
  293.           /* coommon */
  294.           h2, h3{
  295.             margin: 0;
  296.           }
  297.           ul, ol{
  298.             margin: 0;
  299.             padding: 0 0 0 2em;
  300.           }
  301.           .template{
  302.             display: none;
  303.           }
  304.           section.text-content{
  305.             position: relative;
  306.             padding: 0;
  307.           }
  308.           section.text-content > *{
  309.             margin: 14px;
  310.           }
  311.           section.text-content h2{
  312.             text-align: left !important;
  313.             margin-bottom: 0;
  314.           }
  315.           section > header + *{
  316.             margin: 0 0 14px !important;
  317.           }
  318.           button.more{
  319.             color: rgb(153,153,153);
  320.             background: white;
  321.             padding: 0;
  322.             cursor: pointer;
  323.           }
  324.           button.more::-moz-focus-inner{
  325.             border: none;
  326.           }
  327.           button.more::after{
  328.             font-size: medium;
  329.             content: "▴";
  330.           }
  331.           .hidden > button.more{
  332.             background: rgb(221, 221, 221);
  333.             position: absolute;
  334.           }
  335.           .hidden > button.more::after{
  336.             content: "▾";
  337.           }
  338.           /* User panel */
  339.           section[data-selector="userSection"].hidden{
  340.             max-height: 10em;
  341.             overflow: hidden;
  342.           }
  343.           section[data-selector="userSection"] > button.more{
  344.             position: relative;
  345.             bottom: 0;
  346.             width: 100%;
  347.             margin: 0;
  348.             border: none;
  349.             border-top: 1px solid rgba(187, 187, 187);
  350.           }
  351.           section[data-selector="userSection"].hidden > button.more{
  352.             position: absolute;
  353.           }
  354.           /* Control panel */
  355.           section#control-panel{
  356.             font-size: smaller;
  357.             width: 200px;
  358.             position: absolute;
  359.             top: 0;
  360.             right: 0;
  361.             z-index: 1;
  362.           }
  363.           section#control-panel h3{
  364.             font-size: 1em;
  365.             padding: .25em 1em;
  366.             border-radius: 5px 5px 0 0;
  367.             background: rgb(103, 0, 0);
  368.             color: white;
  369.             cursor: pointer;
  370.           }
  371.           section#control-panel.hidden h3{
  372.             border-radius: 5px 5px 5px 5px;
  373.           }
  374.           section#control-panel h3::after{
  375.             content: " ▴";
  376.             margin-left: .25em;
  377.           }
  378.           section#control-panel.hidden h3::after{
  379.             content: " ▾";
  380.           }
  381.           ul#user-control-panel{
  382.             list-style-type: square;
  383.             color: rgb(187, 187, 187);
  384.             width: 100%;
  385.             margin: .5em 0;
  386.             padding: .5em .5em .5em 1.5em;
  387.             background: white;
  388.             border-radius: 0 0 5px 5px;
  389.             border: 1px solid rgb(187, 187, 187);
  390.             border-top: none;
  391.             box-sizing: border-box;
  392.           }
  393.           section#control-panel.hidden > ul#user-control-panel{
  394.             display: none;
  395.           }
  396.           /* Discussions on your scripts */
  397.           #user-discussions-on-scripts-written{
  398.             margin-top: 0;
  399.           }
  400.           /* tabs */
  401.           #tabNavigation > ul{
  402.             list-style-type: none;
  403.             padding: 0;
  404.             display: flex;
  405.           }
  406.           #tabNavigation > ul > li{
  407.             font-weight: bold;
  408.             background: white;
  409.             padding: .25em 1em;
  410.             border: 1px solid rgb(187, 187, 187);
  411.             border-bottom: none;
  412.             border-radius: 5px 5px 0 0;
  413.             box-shadow: 0 0 5px rgb(221, 221, 221);
  414.             cursor: pointer;
  415.           }
  416.           #tabNavigation > ul > li:first-child{
  417.           }
  418.           #tabNavigation > ul > li[data-selected="false"]{
  419.             color: rgb(153,153,153);
  420.             background: rgb(221, 221, 221);
  421.           }
  422.           [data-selector="scriptSets"] > section,
  423.           [data-tabified] #user-script-list{
  424.             border-radius: 0 5px 5px 5px;
  425.           }
  426.           [data-tabified] header{
  427.             display: none;
  428.           }
  429.           [data-tabified][data-selected="false"]{
  430.             display: none;
  431.           }
  432.           /* Scripts */
  433.           #user-script-list li{
  434.             padding: .25em 1em;
  435.             position: relative;
  436.           }
  437.           #user-script-list li:last-child{
  438.             border-bottom: none;/* missing in greasyfork.org */
  439.           }
  440.           #user-script-list li article{
  441.             position: relative;
  442.             z-index: 1;/* over the .chart */
  443.             pointer-events: none;
  444.           }
  445.           #user-script-list li article h2{
  446.             margin-bottom: .25em;
  447.           }
  448.           #user-script-list li article h2 > a,
  449.           #user-script-list li article h2 > .description/* it's block! */ > span,
  450.           #user-script-list li article dl > dt > *,
  451.           #user-script-list li article dl > dd > *{
  452.             pointer-events: auto;/* apply on inline elements */
  453.           }
  454.           #user-script-list li button.more{
  455.             border: 1px solid rgb(221,221,221);
  456.             border-radius: 5px;
  457.             position: absolute;
  458.             top: 0;
  459.             right: 0;
  460.             margin: 5px;
  461.             width: 2em;
  462.             z-index: 1;/* over the .chart */
  463.           }
  464.           #user-script-list li .description{
  465.             font-size: small;
  466.             margin: 0 0 0 .1em;/* ajust first letter position */
  467.           }
  468.           #user-script-list li dl.inline-script-stats{
  469.             column-count: 3;
  470.             max-height: 3em;
  471.           }
  472.           #user-script-list li dl.inline-script-stats dt{
  473.             overflow: hidden;
  474.             white-space: nowrap;
  475.             text-overflow: ellipsis;
  476.             max-width: 200px;/* mysterious */
  477.           }
  478.           #user-script-list li dl.inline-script-stats .script-list-author{
  479.             display: none;
  480.           }
  481.           #user-script-list li dl.inline-script-stats dt.script-list-daily-installs,
  482.           #user-script-list li dl.inline-script-stats dt.script-list-total-installs{
  483.             width: 65%;
  484.           }
  485.           #user-script-list li dl.inline-script-stats dd.script-list-daily-installs,
  486.           #user-script-list li dl.inline-script-stats dd.script-list-total-installs{
  487.             width: 35%;
  488.           }
  489.           #user-script-list li.hidden .description,
  490.           #user-script-list li.hidden .inline-script-stats{
  491.             display: none;
  492.           }
  493.           /* chart */
  494.           .chart{
  495.             position: absolute;
  496.             top: 0;
  497.             right: 0;
  498.             width: 100%;
  499.             height: 100%;
  500.             overflow: hidden;
  501.             mask-image: linear-gradient(to right, rgba(0,0,0,.5), black);
  502.             -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.5), black);
  503.           }
  504.           .chart > dl{
  505.             position: absolute;
  506.             bottom: 0;
  507.             right: 2em;
  508.             height: calc(100% - 5px);
  509.             display: flex;
  510.             align-items: flex-end;
  511.           }
  512.           .chart > dl > dt.date{
  513.             display: none;
  514.           }
  515.           .chart > dl > dd.count{
  516.             background: rgb(221,221,221);
  517.             width: 3px;
  518.             border-left: 1px solid white;
  519.             margin: 0;
  520.           }
  521.           .chart > dl > dd.count.last,
  522.           .chart > dl > dd.count:hover{
  523.             background: rgb(187,187,187);
  524.           }
  525.           .chart > dl > dd.count.last:hover{
  526.             background: rgb(153,153,153);
  527.           }
  528.           .chart > dl > dd.count.last > span{
  529.             font-weight: bold;
  530.             color: rgb(153,153,153);
  531.             position: absolute;
  532.             top: 5px;
  533.             right: 10px;
  534.             pointer-events: none;
  535.           }
  536.           .chart > dl > dd.count.last:hover > span{
  537.             color: rgb(119,119,119);
  538.           }
  539.           /* sidebar */
  540.           .sidebar{
  541.             padding-top: 0;
  542.           }
  543.           .ad/* excuse me, it disappears only in my own user page :-) */,
  544.           #script-list-filter{
  545.             display: none !important;
  546.           }
  547.         </style>
  548.       `,
  549.     },
  550.   };
  551.   class Storage{
  552.     static key(key){
  553.       return (SCRIPTNAME) ? (SCRIPTNAME + '-' + key) : key;
  554.     }
  555.     static save(key, value, expire = null){
  556.       key = Storage.key(key);
  557.       localStorage[key] = JSON.stringify({
  558.         value: value,
  559.         saved: Date.now(),
  560.         expire: expire,
  561.       });
  562.     }
  563.     static read(key){
  564.       key = Storage.key(key);
  565.       if(localStorage[key] === undefined) return undefined;
  566.       let data = JSON.parse(localStorage[key]);
  567.       if(data.value === undefined) return data;
  568.       if(data.expire === undefined) return data;
  569.       if(data.expire === null) return data.value;
  570.       if(data.expire < Date.now()) return localStorage.removeItem(key);
  571.       return data.value;
  572.     }
  573.     static delete(key){
  574.       key = Storage.key(key);
  575.       delete localStorage.removeItem(key);
  576.     }
  577.     static saved(key){
  578.       key = Storage.key(key);
  579.       if(localStorage[key] === undefined) return undefined;
  580.       let data = JSON.parse(localStorage[key]);
  581.       if(data.saved) return data.saved;
  582.       else return undefined;
  583.     }
  584.   }
  585.   const $ = function(s){return document.querySelector(s)};
  586.   const $$ = function(s){return document.querySelectorAll(s)};
  587.   const createElement = function(html){
  588.     let outer = document.createElement('div');
  589.     outer.innerHTML = html;
  590.     return outer.firstElementChild;
  591.   };
  592.   const toMetric = function(number, fixed = 1){
  593.     switch(true){
  594.       case(number <  1e3): return (number);
  595.       case(number <  1e6): return (number/ 1e3).toFixed(fixed) + 'K';
  596.       case(number <  1e9): return (number/ 1e6).toFixed(fixed) + 'M';
  597.       case(number < 1e12): return (number/ 1e9).toFixed(fixed) + 'G';
  598.       default:             return (number/1e12).toFixed(fixed) + 'T';
  599.     }
  600.   };
  601.   const log = function(){
  602.     if(!DEBUG) return;
  603.     let l = log.last = log.now || new Date(), n = log.now = new Date();
  604.     let error = new Error(), line = log.format.getLine(error), callers = log.format.getCallers(error);
  605.     //console.log(error.stack);
  606.     console.log(
  607.       SCRIPTNAME + ':',
  608.       /* 00:00:00.000  */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
  609.       /* +0.000s       */ '+' + ((n-l)/1000).toFixed(3) + 's',
  610.       /* :00           */ ':' + line,
  611.       /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
  612.       /* caller        */ (callers[1] || '') + '()',
  613.       ...arguments
  614.     );
  615.   };
  616.   log.formats = [{
  617.       name: 'Firefox Scratchpad',
  618.       detector: /MARKER@Scratchpad/,
  619.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  620.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  621.     }, {
  622.       name: 'Firefox Console',
  623.       detector: /MARKER@debugger/,
  624.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  625.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  626.     }, {
  627.       name: 'Firefox Greasemonkey 3',
  628.       detector: /\/gm_scripts\//,
  629.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  630.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  631.     }, {
  632.       name: 'Firefox Greasemonkey 4+',
  633.       detector: /MARKER@user-script:/,
  634.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 500,
  635.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  636.     }, {
  637.       name: 'Firefox Tampermonkey',
  638.       detector: /MARKER@moz-extension:/,
  639.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 6,
  640.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  641.     }, {
  642.       name: 'Chrome Console',
  643.       detector: /at MARKER \(<anonymous>/,
  644.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  645.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(<anonymous>)/gm),
  646.     }, {
  647.       name: 'Chrome Tampermonkey',
  648.       detector: /at MARKER \((userscript\.html|chrome-extension:)/,
  649.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+)\)$/)[1] - 6,
  650.       getCallers: (e) => e.stack.match(/[^ ]+(?= \((userscript\.html|chrome-extension:))/gm),
  651.     }, {
  652.       name: 'Edge Console',
  653.       detector: /at MARKER \(eval/,
  654.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  655.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(eval)/gm),
  656.     }, {
  657.       name: 'Edge Tampermonkey',
  658.       detector: /at MARKER \(Function/,
  659.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 4,
  660.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(Function)/gm),
  661.     }, {
  662.       name: 'Safari',
  663.       detector: /^MARKER$/m,
  664.       getLine: (e) => 0,/*e.lineが用意されているが最終呼び出し位置のみ*/
  665.       getCallers: (e) => e.stack.split('\n'),
  666.     }, {
  667.       name: 'Default',
  668.       detector: /./,
  669.       getLine: (e) => 0,
  670.       getCallers: (e) => [],
  671.     }];
  672.   log.format = log.formats.find(function MARKER(f){
  673.     if(!f.detector.test(new Error().stack)) return false;
  674.     //console.log('//// ' + f.name + '\n' + new Error().stack);
  675.     return true;
  676.   });
  677.   core.initialize();
  678.   if(window === top && console.timeEnd) console.timeEnd(SCRIPTNAME);
  679. })();