Skip to content

Instantly share code, notes, and snippets.

@modulexcite

modulexcite/chrome_snippet_gui_export_import_2016.js

Forked from soundyogi/2018_chrome_snippet_gui_import_export.js
Created December 10, 2016 02:18
Show Gist options
  • Save modulexcite/dc730f3e731f22a7089ed4df2a5c6a68 to your computer and use it in GitHub Desktop.
Save modulexcite/dc730f3e731f22a7089ed4df2a5c6a68 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -71,7 +71,7 @@ const markup = `
    <grid>
    <row>
    <column>
    <item> load snippets:
    <item> load chrome snippets:
    <button id="init">(re)init</button>
    </item>
    </column>
    @@ -108,7 +108,7 @@ const markup = `
    <row>
    <column>
    <dropzone>
    <div>Drop files or click</div>
    <div>Click/Drop .js or .json</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    <label>append files or replace everything?
    @@ -118,7 +118,7 @@ const markup = `
    </select>
    </label>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>===== snippets preview =====<ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:
    <button id="external_bgrins">load some scripts from bgrins/devtools-snippets repo</button>
    <button id="external_bahmutov">load some scripts from bahmutov/code-snippets repo</button>
    @@ -266,6 +266,7 @@ function set_pref(name, data_string){
    function save_snippets(){
    set_pref( "scriptSnippets", serialize(state.scriptSnippets) )
    set_pref( "scriptSnippets_lastIdentifier", state.lastIdentifier)
    prompt('restart chrome now!')
    }


    @@ -449,4 +450,4 @@ function html_log(){
    }


    }("thank you for reading")
    }("goodbye and thanks for all the fish")
  2. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ void function(){
    */


    let_us("execute some init tests", function(){
    let_us("execute some init tests", () => {
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools / please inspect devtools again (ctrl+shift+i)")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })
    @@ -130,10 +130,10 @@ const markup = `

    /* Main logic
    */
    const app_window = create_window("menubar=false, height=700, width=1000", "chrome snippets import/export by: github.com/soundyogi - ALPHA USE AT OWN RISK")
    const app_window = create_window("menubar=false, height=700, width=1000", "chrome snippets import/export - ALPHA USE AT OWN RISK")
    const document = app_window.document

    let_us("bootstrap the whole thing", function(){
    let_us("bootstrap the whole thing", () => {
    init()
    })

    @@ -211,10 +211,10 @@ function render_list(){

    state.scriptSnippets.forEach((snippet)=>{
    const li = document.createElement('li')
    const a = document.createElement('a')
    a.href = snippet.name
    a.innerHTML = snippet.name
    li.appendChild(a)
    //const a = document.createElement('a')
    //a.href = snippet.name
    li.innerHTML = snippet.name
    //li.appendChild(a)
    ul.appendChild(li)
    })
    }
  3. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 9 deletions.
    10 changes: 1 addition & 9 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -248,19 +248,11 @@ function file_loaded(event){
    const ext = /\.[0-9a-z]+$/.exec(fileName)[0]

    if(ext === ".json") return import_json(content_string)
    return import_single(fileNameNoExt, content_string)
    }

    function import_single(name, content){
    add_snippet(name, content)
    return add_snippet(fileNameNoExt, content_string)
    }

    function import_json(content_string){
    var json_data = deserialize(content_string)
    if(!state.gui_switches.append) {
    InspectorFrontendHost.setPreference("scriptSnippets", serialize(json_data.snippets))
    return init()
    }
    json_data.snippets.forEach(snippet => {
    add_snippet(snippet.name, snippet.content)
    })
  4. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 22 additions and 15 deletions.
    37 changes: 22 additions & 15 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ let_us("execute some init tests", function(){
    const state = {
    scriptSnippets: [],
    }
    window.state = state


    const style = `
    @@ -162,7 +163,7 @@ function setupGUI(){
    app_window.document.body.innerHTML = style+markup
    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)
    getID("append").on("change", handle_gui_switches)

    getID("drop_files").on("change", import_files)

    @@ -184,7 +185,6 @@ function handle_gui_switches(ev){
    opt.format = target.value
    return update()
    }

    if(target.id === 'rename') {
    opt.rename = !target.value
    return update()
    @@ -194,14 +194,15 @@ function handle_gui_switches(ev){
    return update()
    }
    if(target.id === 'append') {
    opt.review = !target.value
    opt.append = !target.value
    return update()
    }
    }


    function update(){
    render_list()
    console.log(state.gui_switches)
    }

    function render_list(){
    @@ -224,7 +225,7 @@ function render_list(){


    function import_files(event){
    if(!state.gui_switches.append) clear_chrome_snippets()
    if(!state.gui_switches.append) state.scriptSnippets = []

    const files = event.target.files
    const stack = Object.keys(files)
    @@ -239,13 +240,6 @@ function import_files(event){
    })
    }

    function import_json(content_string){
    var json_data = deserialize(content_string)
    if(!state.gui_switches.append) return InspectorFrontendHost.setPreference("scriptSnippets", serialize(json_data.snippets))
    json_data.snippets.forEach(snippet => {
    add_snippet(snippet.name, snippet.content)
    })
    }

    function file_loaded(event){
    const content_string = event.target.result
    @@ -254,8 +248,22 @@ function file_loaded(event){
    const ext = /\.[0-9a-z]+$/.exec(fileName)[0]

    if(ext === ".json") return import_json(content_string)
    return import_single(fileNameNoExt, content_string)
    }

    add_snippet(fileNameNoExt, content_string)
    function import_single(name, content){
    add_snippet(name, content)
    }

    function import_json(content_string){
    var json_data = deserialize(content_string)
    if(!state.gui_switches.append) {
    InspectorFrontendHost.setPreference("scriptSnippets", serialize(json_data.snippets))
    return init()
    }
    json_data.snippets.forEach(snippet => {
    add_snippet(snippet.name, snippet.content)
    })
    }

    function set_pref(name, data_string){
    @@ -266,19 +274,18 @@ function set_pref(name, data_string){
    function save_snippets(){
    set_pref( "scriptSnippets", serialize(state.scriptSnippets) )
    set_pref( "scriptSnippets_lastIdentifier", state.lastIdentifier)
    init()
    }


    function reset_snippets(){
    var choice = window.confirm("DELETE ALL SNIPPETS IN DEVTOOLS?")
    if(choice) return clear_chrome_snippets()
    if(choice) clear_chrome_snippets()
    init()
    }

    function clear_chrome_snippets(){
    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    init()
    }

    function add_snippet(name, snippet_content_string){
  5. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 27 additions and 16 deletions.
    43 changes: 27 additions & 16 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,12 +16,6 @@ let_us("execute some init tests", function(){

    const state = {
    scriptSnippets: [],
    lastIdentifier: 0,
    gui_switches: {
    rename: true,
    format: "json",
    review: false
    }
    }


    @@ -116,6 +110,12 @@ const markup = `
    <div>Drop files or click</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    <label>append files or replace everything?
    <select id='append'>
    <option value='true'>Append</option>
    <option value="false">Replace</option>
    </select>
    </label>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:
    @@ -144,7 +144,8 @@ function init(){
    state.gui_switches = {
    rename: true,
    format: "json",
    review: false
    review: false,
    append: true
    }

    InspectorFrontendHost.getPreferences( prefs => {
    @@ -192,6 +193,10 @@ function handle_gui_switches(ev){
    opt.review = !opt.review
    return update()
    }
    if(target.id === 'append') {
    opt.review = !target.value
    return update()
    }
    }


    @@ -219,6 +224,8 @@ function render_list(){


    function import_files(event){
    if(!state.gui_switches.append) clear_chrome_snippets()

    const files = event.target.files
    const stack = Object.keys(files)
    .forEach((key)=>{
    @@ -233,18 +240,20 @@ function import_files(event){
    }

    function import_json(content_string){
    prompt("replace all snippets or append json content")
    var json_data = deserialize(content_string)
    if(!state.gui_switches.append) return InspectorFrontendHost.setPreference("scriptSnippets", serialize(json_data.snippets))
    json_data.snippets.forEach(snippet => {
    add_snippet(snippet.name, snippet.content)
    })
    }

    function file_loaded(event){
    const content_string = event.target.result
    const fileName = event.target.fileName
    const fileNameNoExt = fileName.split(".")[0]
    const fileNameNoExt = /(.+?)(\.[^.]*$|$)/.exec(fileName)[1]
    const ext = /\.[0-9a-z]+$/.exec(fileName)[0]

    console.log(ext)
    // TODO sucks
    if(ext === "json") return import_json(content_string)

    if(ext === ".json") return import_json(content_string)

    add_snippet(fileNameNoExt, content_string)
    }
    @@ -262,12 +271,14 @@ function save_snippets(){


    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS? (this is not working right now)")
    // TODO: too risky for dev
    return
    var choice = window.confirm("DELETE ALL SNIPPETS IN DEVTOOLS?")
    if(choice) return clear_chrome_snippets()
    }

    function clear_chrome_snippets(){
    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    init()
    }

    function add_snippet(name, snippet_content_string){
  6. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 34 additions and 6 deletions.
    40 changes: 34 additions & 6 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,10 @@ const markup = `
    </dropzone>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:<button id="external_snippets">load some scripts from bgrins/devtools-snippets repo</button></column>
    <column>import files from external sources:
    <button id="external_bgrins">load some scripts from bgrins/devtools-snippets repo</button>
    <button id="external_bahmutov">load some scripts from bahmutov/code-snippets repo</button>
    </column>
    </row>
    </grid>
    `
    @@ -166,7 +169,9 @@ function setupGUI(){
    getID("init").on("click", init)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)
    getID("external_snippets").on("click", external_snippets)

    getID("external_bgrins").on("click", external_bgrins)
    getID("external_bahmutov").on("click", external_bahmutov)
    }


    @@ -227,14 +232,21 @@ function import_files(event){
    })
    }

    function import_json(content_string){
    prompt("replace all snippets or append json content")
    }

    function file_loaded(event){
    const content_string = event.target.result
    const fileName = event.target.fileName
    const fileNameNoExt = fileName.split(".")[0]
    const ext = /\.[0-9a-z]+$/.exec(fileName)[0]

    // TODO: this cant be good lol
    var removeExtension = fileName.split(".")[0]
    add_snippet(removeExtension, content_string)
    console.log(ext)
    // TODO sucks
    if(ext === "json") return import_json(content_string)

    add_snippet(fileNameNoExt, content_string)
    }

    function set_pref(name, data_string){
    @@ -276,7 +288,7 @@ function add_snippet(name, snippet_content_string){
    update()
    }

    function external_snippets(){
    function external_bgrins(){

    const brings_snippets = [
    'allcolors',
    @@ -294,6 +306,22 @@ function external_snippets(){
    })
    }

    function external_bahmutov(){

    const bahmutov_snippets = [
    'timing',
    'profile-method-call',
    'time-method-call'
    ]

    bahmutov_snippets.forEach((snippet)=>{
    request('https://raw.githubusercontent.com/bahmutov/code-snippets/master/'+snippet+'.js', function(request){
    const snippet_content_string = request.target.response
    add_snippet(snippet, snippet_content_string)
    })
    })
    }

    function export_snippets(){
    if(state.gui_switches.format === "json") return download_json()
    return download_js()
  7. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 5 additions and 21 deletions.
    26 changes: 5 additions & 21 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -144,7 +144,7 @@ function init(){
    review: false
    }

    get_prefs( prefs => {
    InspectorFrontendHost.getPreferences( prefs => {
    const lastScriptSnippets = prefs.scriptSnippets
    state.scriptSnippets = deserialize(lastScriptSnippets)
    state.lastIdentifier = prefs.scriptSnippets_lastIdentifier
    @@ -242,19 +242,6 @@ function set_pref(name, data_string){
    }


    function get_prefs(cb){
    InspectorFrontendHost.getPreferences(function(prefs){
    cb(prefs)
    })
    }


    function get_snippets(cb){
    get_prefs(function(prefs){
    cb(prefs.scriptSnippets)
    })
    }

    function save_snippets(){
    set_pref( "scriptSnippets", serialize(state.scriptSnippets) )
    set_pref( "scriptSnippets_lastIdentifier", state.lastIdentifier)
    @@ -392,15 +379,12 @@ function create_window(options, title){
    /*
    * UNIT TESTS
    */
    let_us("export a json file", ()=>{

    let_us("write some tests", ()=>{
    // TODO
    // TDD tests are deleted now / remove harness
    })






    /* Nanoharness
    */
    function let_us(msg,f){
    @@ -427,4 +411,4 @@ function html_log(){
    }


    }("thank you for reading this")
    }("thank you for reading")
  8. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -76,7 +76,7 @@ const markup = `
    <grid>
    <row>
    <column>
    <item>
    <item> load snippets:
    <button id="init">(re)init</button>
    </item>
    </column>
  9. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -126,7 +126,7 @@ const markup = `

    /* Main logic
    */
    const app_window = create_window("menubar=false, height=700, width=1000", "chrome snippets import/export")
    const app_window = create_window("menubar=false, height=700, width=1000", "chrome snippets import/export by: github.com/soundyogi - ALPHA USE AT OWN RISK")
    const document = app_window.document

    let_us("bootstrap the whole thing", function(){
  10. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ void function(){


    let_us("execute some init tests", function(){
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools / please inspect devtools again (ctrl+shift+i)")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })

  11. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 21 additions and 17 deletions.
    38 changes: 21 additions & 17 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ void function(){
    /*
    * Manage and Import / Export snippets from chrome (2016)
    * hacked together by: http://github.com/soundyogi
    * inspired by: aaran etc // TODO
    * inspired by: https://github.com/bgrins/devtools-snippets/blob/master/import-export/chrome/devtools_import_export.js
    * ALPHA / SILLY SIDE PROJECT
    */

    @@ -25,9 +25,6 @@ const state = {
    }


    window.state = state


    const style = `
    <style>
    body{
    @@ -49,10 +46,11 @@ row {
    display: flex;
    -webkit-flex-flow: row;
    width: 90vw;
    margin-bottom: 2vh;
    }
    item {
    background: tomato;
    min-height: 5vh;
    min-height: 13vh;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    @@ -77,12 +75,12 @@ dropzone {
    const markup = `
    <grid>
    <row>
    <column>
    <item>
    <button id="init">(re)init</button>
    </item>
    <item>
    <input id="import_files" type='file' multiple='true'/>
    </item>
    </column>
    <column>
    <item>
    <label>on name conflicts:
    <select id='rename'>
    @@ -91,29 +89,36 @@ const markup = `
    </select>
    </label>
    </item>
    </column>
    <column>
    <item>
    <button id="export_snippets">export</button>
    <select id='format'>
    <option value="json">Single .json</option>
    <option value="js">Multiple .js</option>
    </select>
    </item>
    </column>
    <column>
    <item>
    <button id="save_snippets">Save to Chrome</button>
    </item>
    </column>
    <column>
    <item>
    <button id="reset_snippets">DELETE all on Chrome</button>
    </item>
    </column>
    </row>
    <row>
    <column>
    <dropzone>
    <div>Drop Files Here</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:<button id="external_snippets">load some scripts from bgrins/devtools-snippets repo</button></column>
    <dropzone>
    <div>Drop files or click</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:<button id="external_snippets">load some scripts from bgrins/devtools-snippets repo</button></column>
    </row>
    </grid>
    `
    @@ -155,7 +160,6 @@ function setupGUI(){
    getID("rename").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)
    getID("drop_files").on("change", import_files)

    getID("export_snippets").on("click", export_snippets)
    @@ -254,7 +258,7 @@ function get_snippets(cb){
    function save_snippets(){
    set_pref( "scriptSnippets", serialize(state.scriptSnippets) )
    set_pref( "scriptSnippets_lastIdentifier", state.lastIdentifier)
    load_snippets()
    init()
    }


  12. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ void function(){
    /*
    * Manage and Import / Export snippets from chrome (2016)
    * hacked together by: http://github.com/soundyogi
    * inspired by: https://github.com/bgrins/devtools-snippets/blob/master/import-export/chrome/devtools_import_export.js
    * inspired by: aaran etc // TODO
    * ALPHA / SILLY SIDE PROJECT
    */

    @@ -25,6 +25,9 @@ const state = {
    }


    window.state = state


    const style = `
    <style>
    body{
  13. @soundyogi soundyogi revised this gist Jan 26, 2016. No changes.
  14. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -25,9 +25,6 @@ const state = {
    }


    window.state = state


    const style = `
    <style>
    body{
  15. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ void function(){
    /*
    * Manage and Import / Export snippets from chrome (2016)
    * hacked together by: http://github.com/soundyogi
    * inspired by: aaran etc // TODO
    * inspired by: https://github.com/bgrins/devtools-snippets/blob/master/import-export/chrome/devtools_import_export.js
    * ALPHA / SILLY SIDE PROJECT
    */

  16. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 30 additions and 21 deletions.
    51 changes: 30 additions & 21 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -52,11 +52,12 @@ row {
    }
    item {
    background: tomato;
    min-height: 20vh;
    min-height: 5vh;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    padding: 20px;
    }
    #drop_files {
    opacity: 0;
    @@ -67,7 +68,7 @@ dropzone {
    cursor: pointer;
    border: 1px black dotted;
    font-weight: bold;
    font-size: 1.5em;
    font-size: 1em;
    text-align: center;
    }
    </style>
    @@ -83,7 +84,7 @@ const markup = `
    <input id="import_files" type='file' multiple='true'/>
    </item>
    <item>
    <label>Rename?
    <label>on name conflicts:
    <select id='rename'>
    <option value='true'>Rename Import Files</option>
    <option value="false">Overwrite Snippets</option>
    @@ -105,11 +106,14 @@ const markup = `
    </item>
    </row>
    <row>
    <column>
    <dropzone>
    <div>Drop Files Here</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    <column><ul id="state.scriptSnippets"></ul></column>
    </column>
    <column>scriptSnippets preview: <ul id="state.scriptSnippets"></ul></column>
    <column>import files from external sources:<button id="external_snippets">load some scripts from bgrins/devtools-snippets repo</button></column>
    </row>
    </grid>
    `
    @@ -158,15 +162,14 @@ function setupGUI(){
    getID("init").on("click", init)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)
    getID("external_snippets").on("click", external_snippets)
    }


    function handle_gui_switches(ev){
    const target = ev.target
    const opt = state.gui_switches

    console.log(target.value)

    if(target.id === 'format') {
    opt.format = target.value
    return update()
    @@ -282,6 +285,24 @@ function add_snippet(name, snippet_content_string){
    update()
    }

    function external_snippets(){

    const brings_snippets = [
    'allcolors',
    'cachebuster',
    'cssreload',
    'cssprettifier',
    'hashlink'
    ]

    brings_snippets.forEach((snippet)=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/'+snippet+'/'+snippet+'.js', function(request){
    const snippet_content_string = request.target.response
    add_snippet(snippet, snippet_content_string)
    })
    })
    }

    function export_snippets(){
    if(state.gui_switches.format === "json") return download_json()
    return download_js()
    @@ -302,10 +323,6 @@ function download_json(){







    /* util & shorthand
    */
    function request(url, success) {
    @@ -375,17 +392,9 @@ let_us("export a json file", ()=>{

    })

    /*
    let_us("import a snippet from bgrins", ()=> {
    const brings_snippets = [
    'allcolors'
    ]
    brings_snippets.forEach(()=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/allcolors/allcolors.js', function(request){
    var snippet = request.currentTarget.response || request.target.responseText;
    })
    })
    */





    /* Nanoharness
  17. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -117,7 +117,7 @@ const markup = `

    /* Main logic
    */
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const app_window = create_window("menubar=false, height=700, width=1000", "chrome snippets import/export")
    const document = app_window.document

    let_us("bootstrap the whole thing", function(){
  18. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -224,7 +224,10 @@ function import_files(event){
    function file_loaded(event){
    const content_string = event.target.result
    const fileName = event.target.fileName
    add_snippet(fileName, content_string)

    // TODO: this cant be good lol
    var removeExtension = fileName.split(".")[0]
    add_snippet(removeExtension, content_string)
    }

    function set_pref(name, data_string){
    @@ -377,11 +380,9 @@ let_us("import a snippet from bgrins", ()=> {
    const brings_snippets = [
    'allcolors'
    ]
    brings_snippets.forEach(()=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/allcolors/allcolors.js', function(request){
    var snippet = request.currentTarget.response || request.target.responseText;
    })
    })
    */
  19. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 0 additions and 26 deletions.
    26 changes: 0 additions & 26 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -347,32 +347,6 @@ function download(name, data){
    a.click()
    }

    function getDownloadFileName(count) {
    var abbrevCount;
    var d = new Date();
    var fileName = 'chrome-snippets-' + count + '-';
    fileName += d.getFullYear();
    var month = d.getMonth() + 1;
    fileName += "-" + ((month < 10) ? "0" + month : month); //$NON-NLS-1$
    // TODO Please note getDay() returns the day of week,
    // see http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.5.16
    var day = d.getDate();
    fileName += "-" + ((day < 10) ? "0" + day : day); //$NON-NLS-1$
    var hours = d.getHours();
    fileName += "T" + ((hours < 10) ? "0" + hours : hours); //$NON-NLS-1$
    var minutes = d.getMinutes();
    fileName += ((minutes < 10) ? "0" + minutes : minutes);
    var seconds = d.getSeconds();
    fileName += ((seconds < 10) ? "0" + seconds : seconds);
    var timeZoneOffset = -d.getTimezoneOffset();
    var offsetMinutes = timeZoneOffset % 60;
    var offsetHours = (timeZoneOffset - offsetMinutes) / 60;
    // TODO FIXME >= 0 ?
    fileName += (offsetHours > 0 ? "+" : "") + ((offsetHours < 10) ? "0" + offsetHours : offsetHours) + ((offsetMinutes < 10) ? "0" + offsetMinutes : offsetMinutes); //$NON-NLS-2$ //$NON-NLS-1$
    fileName += '.json';
    return fileName;
    }


    function is_duplicate(name, snippets_arr){
    const result = snippets_arr.filter(function(snippet){
  20. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 65 additions and 56 deletions.
    121 changes: 65 additions & 56 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@ void function(){
    /*
    * Manage and Import / Export snippets from chrome (2016)
    * hacked together by: http://github.com/soundyogi
    * inspired by: aaran etc.
    * inspired by: aaran etc // TODO
    * ALPHA / SILLY SIDE PROJECT
    */


    @@ -57,19 +58,29 @@ item {
    font-size: 1.5em;
    text-align: center;
    }
    #drop_files {
    opacity: 0;
    width: 100%;
    height: 20vh;
    }
    dropzone {
    cursor: pointer;
    border: 1px black dotted;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    }
    </style>
    `

    const markup = `
    <grid>
    <row>
    <item>
    <button id="load_snippets">Load</button>
    <button id="init">(re)init</button>
    </item>
    <item>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    <input id="import_files" type='file' multiple='true'/>
    </item>
    <item>
    <label>Rename?
    @@ -94,7 +105,11 @@ const markup = `
    </item>
    </row>
    <row>
    <column><ul id="state.scriptSnippets"></column>
    <dropzone>
    <div>Drop Files Here</div>
    <input id="drop_files" type='file' multiple='true'/>
    </dropzone>
    <column><ul id="state.scriptSnippets"></ul></column>
    </row>
    </grid>
    `
    @@ -105,10 +120,12 @@ const markup = `
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document

    init()
    let_us("bootstrap the whole thing", function(){
    init()
    })

    function init(){
    setupGUI()
    load_snippets()

    state.scriptSnippets = []
    state.lastIdentifier = 0
    @@ -117,54 +134,28 @@ function init(){
    format: "json",
    review: false
    }
    }

    function main(prefs){
    const lastScriptSnippets = prefs.scriptSnippets
    state.scriptSnippets = deserialize(lastScriptSnippets)
    state.lastIdentifier = prefs.scriptSnippets_lastIdentifier


    /*
    var loop = setInterval(function(){
    render()
    console.log(state.gui_switches)
    }, 1000)
    window.loop = loop
    */

    render()

    /*
    let_us("import a snippet from bgrins", ()=> {
    const brings_snippets = [
    'allcolors'
    ]
    brings_snippets.forEach(()=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/allcolors/allcolors.js', function(request){
    var snippet = request.currentTarget.response || request.target.responseText;
    })
    })*/
    get_prefs( prefs => {
    const lastScriptSnippets = prefs.scriptSnippets
    state.scriptSnippets = deserialize(lastScriptSnippets)
    state.lastIdentifier = prefs.scriptSnippets_lastIdentifier

    update()
    })
    }


    function load_snippets(){
    get_prefs(main)
    }

    function setupGUI(){
    app_window.document.body.innerHTML = style+markup
    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)
    getID("drop_files").on("change", import_files)

    getID("export_snippets").on("click", export_snippets)
    getID("load_snippets").on("click", init)
    getID("init").on("click", init)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)
    }
    @@ -193,11 +184,10 @@ function handle_gui_switches(ev){


    function update(){
    render()
    render_list()
    }


    function render(){
    function render_list(){
    const ul = app_window.document.getElementById("state.scriptSnippets")
    ul.innerHTML = ''

    @@ -263,7 +253,7 @@ function save_snippets(){


    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS? (this is not working right now)")
    // TODO: too risky for dev
    return

    @@ -296,13 +286,15 @@ function export_snippets(){

    function download_js(){
    state.scriptSnippets.forEach((snippet)=>{
    download(snippet.name, snippet.content)
    download(snippet.name+'.js', snippet.content)
    })
    }

    function download_json(){
    console.log("json")
    const fileName = serialize(Date())
    const json_data = serialize({'snippets': state.scriptSnippets}, ['snippets', 'name', 'content'], 2)
    download('json', json_data)
    download(fileName+".json", json_data)
    }


    @@ -358,26 +350,26 @@ function download(name, data){
    function getDownloadFileName(count) {
    var abbrevCount;
    var d = new Date();
    var fileName = 'chrome-snippets-' + count + '-'; //$NON-NLS-0$
    var fileName = 'chrome-snippets-' + count + '-';
    fileName += d.getFullYear();
    var month = d.getMonth() + 1;
    fileName += "-" + ((month < 10) ? "0" + month : month); //$NON-NLS-0$ //$NON-NLS-1$
    fileName += "-" + ((month < 10) ? "0" + month : month); //$NON-NLS-1$
    // TODO Please note getDay() returns the day of week,
    // see http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.5.16
    var day = d.getDate();
    fileName += "-" + ((day < 10) ? "0" + day : day); //$NON-NLS-0$ //$NON-NLS-1$
    fileName += "-" + ((day < 10) ? "0" + day : day); //$NON-NLS-1$
    var hours = d.getHours();
    fileName += "T" + ((hours < 10) ? "0" + hours : hours); //$NON-NLS-0$ //$NON-NLS-1$
    fileName += "T" + ((hours < 10) ? "0" + hours : hours); //$NON-NLS-1$
    var minutes = d.getMinutes();
    fileName += ((minutes < 10) ? "0" + minutes : minutes); //$NON-NLS-0$
    fileName += ((minutes < 10) ? "0" + minutes : minutes);
    var seconds = d.getSeconds();
    fileName += ((seconds < 10) ? "0" + seconds : seconds); //$NON-NLS-0$
    fileName += ((seconds < 10) ? "0" + seconds : seconds);
    var timeZoneOffset = -d.getTimezoneOffset();
    var offsetMinutes = timeZoneOffset % 60;
    var offsetHours = (timeZoneOffset - offsetMinutes) / 60;
    // TODO FIXME >= 0 ?
    fileName += (offsetHours > 0 ? "+" : "") + ((offsetHours < 10) ? "0" + offsetHours : offsetHours) + ((offsetMinutes < 10) ? "0" + offsetMinutes : offsetMinutes); //$NON-NLS-0$ //$NON-NLS-2$ //$NON-NLS-1$
    fileName += '.json'; //$NON-NLS-0$
    fileName += (offsetHours > 0 ? "+" : "") + ((offsetHours < 10) ? "0" + offsetHours : offsetHours) + ((offsetMinutes < 10) ? "0" + offsetMinutes : offsetMinutes); //$NON-NLS-2$ //$NON-NLS-1$
    fileName += '.json';
    return fileName;
    }

    @@ -402,6 +394,23 @@ function create_window(options, title){
    /*
    * UNIT TESTS
    */
    let_us("export a json file", ()=>{

    })

    /*
    let_us("import a snippet from bgrins", ()=> {
    const brings_snippets = [
    'allcolors'
    ]
    brings_snippets.forEach(()=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/allcolors/allcolors.js', function(request){
    var snippet = request.currentTarget.response || request.target.responseText;
    })
    })
    */


    /* Nanoharness
  21. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 40 additions and 20 deletions.
    60 changes: 40 additions & 20 deletions chrome_snippet_gui_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -104,13 +104,19 @@ const markup = `
    */
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document
    const init = load_snippets

    init()
    function init(){
    setupGUI()
    load_snippets()

    function load_snippets(){
    app_window.document.body.innerHTML = style+markup
    get_prefs(main)
    state.scriptSnippets = []
    state.lastIdentifier = 0
    state.gui_switches = {
    rename: true,
    format: "json",
    review: false
    }
    }

    function main(prefs){
    @@ -119,22 +125,14 @@ function main(prefs){
    state.lastIdentifier = prefs.scriptSnippets_lastIdentifier


    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)

    getID("export_snippets").on("click", export_snippets)
    getID("load_snippets").on("click", load_snippets)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)

    /*
    var loop = setInterval(function(){
    render()
    console.log(state)
    console.log(state.gui_switches)
    }, 1000)
    window.kill = clearInterval(loop)
    window.loop = loop
    */

    render()

    /*
    @@ -152,6 +150,26 @@ function main(prefs){

    }


    function load_snippets(){
    get_prefs(main)
    }

    function setupGUI(){
    app_window.document.body.innerHTML = style+markup
    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)

    getID("export_snippets").on("click", export_snippets)
    getID("load_snippets").on("click", init)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)
    }


    function handle_gui_switches(ev){
    const target = ev.target
    const opt = state.gui_switches
    @@ -180,14 +198,16 @@ function update(){


    function render(){
    const list = app_window.document.getElementById("state.scriptSnippets")
    list.innerHTML = ''
    const ul = app_window.document.getElementById("state.scriptSnippets")
    ul.innerHTML = ''

    state.scriptSnippets.forEach((snippet)=>{
    const li = document.createElement('li')
    const a = document.createElement('a')
    a.href = snippet.name
    a.innerHTML = snippet.name
    list.appendChild(a)
    li.appendChild(a)
    ul.appendChild(li)
    })
    }

  22. @soundyogi soundyogi renamed this gist Jan 26, 2016. 1 changed file with 0 additions and 0 deletions.
    0 chrome_snippet_export_import_2016.js → chrome_snippet_gui_export_import_2016.js
    View file
    File renamed without changes.
  23. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 6 additions and 41 deletions.
    47 changes: 6 additions & 41 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,12 +20,13 @@ const state = {
    rename: true,
    format: "json",
    review: false
    },
    props: {}
    }
    }


    window.state = state


    const style = `
    <style>
    body{
    @@ -58,44 +59,6 @@ item {
    }
    </style>
    `
    const template = `
    <grid>
    <row>
    <item>
    <button id="load_snippets">Load</button>
    </item>
    <item>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    </item>
    <item>
    <label>Rename?
    <select id='rename'>
    <option value='true'>Rename Import Files</option>
    <option value="false">Overwrite Snippets</option>
    </select>
    </label>
    </item>
    <item>
    <button id="export_snippets">export</button>
    <select id='format'>
    <option value="json">Single .json</option>
    <option value="js">Multiple .js</option>
    </select>
    </item>
    <item>
    <button id="save_snippets">Save to Chrome</button>
    </item>
    <item>
    <button id="reset_snippets">DELETE all on Chrome</button>
    </item>
    </row>
    <row>
    <column><ul id="state.scriptSnippets"></column>
    </row>
    </grid>
    `

    const markup = `
    <grid>
    @@ -141,8 +104,9 @@ const markup = `
    */
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document
    const init = load_snippets

    load_snippets()
    init()

    function load_snippets(){
    app_window.document.body.innerHTML = style+markup
    @@ -171,6 +135,7 @@ function main(prefs){
    console.log(state)
    }, 1000)
    window.kill = clearInterval(loop)
    render()

    /*
    let_us("import a snippet from bgrins", ()=> {
  24. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 50 additions and 13 deletions.
    63 changes: 50 additions & 13 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,18 @@ let_us("execute some init tests", function(){
    })


    const state = {
    scriptSnippets: [],
    lastIdentifier: 0,
    gui_switches: {
    rename: true,
    format: "json",
    review: false
    },
    props: {}
    }

    window.state = state

    const style = `
    <style>
    @@ -46,6 +58,44 @@ item {
    }
    </style>
    `
    const template = `
    <grid>
    <row>
    <item>
    <button id="load_snippets">Load</button>
    </item>
    <item>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    </item>
    <item>
    <label>Rename?
    <select id='rename'>
    <option value='true'>Rename Import Files</option>
    <option value="false">Overwrite Snippets</option>
    </select>
    </label>
    </item>
    <item>
    <button id="export_snippets">export</button>
    <select id='format'>
    <option value="json">Single .json</option>
    <option value="js">Multiple .js</option>
    </select>
    </item>
    <item>
    <button id="save_snippets">Save to Chrome</button>
    </item>
    <item>
    <button id="reset_snippets">DELETE all on Chrome</button>
    </item>
    </row>
    <row>
    <column><ul id="state.scriptSnippets"></column>
    </row>
    </grid>
    `

    const markup = `
    <grid>
    @@ -89,19 +139,6 @@ const markup = `

    /* Main logic
    */
    const state = {
    scriptSnippets: [],
    lastIdentifier: 0,
    gui_switches: {
    rename: true,
    format: "json",
    review: false
    },
    props: {},
    markup: markup
    }

    window.state = state
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document

  25. @soundyogi soundyogi revised this gist Jan 26, 2016. 1 changed file with 23 additions and 12 deletions.
    35 changes: 23 additions & 12 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -57,9 +57,6 @@ const markup = `
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    <label>Review Imports?
    <input id='review' type='checkbox'/>
    </label>
    </item>
    <item>
    <label>Rename?
    @@ -99,10 +96,12 @@ const state = {
    rename: true,
    format: "json",
    review: false
    }
    },
    props: {},
    markup: markup
    }


    window.state = state
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document

    @@ -121,7 +120,7 @@ function main(prefs){

    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    getID("review").on("change", handle_gui_switches)
    //getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)

    @@ -130,7 +129,11 @@ function main(prefs){
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)

    render()
    var loop = setInterval(function(){
    render()
    console.log(state)
    }, 1000)
    window.kill = clearInterval(loop)

    /*
    let_us("import a snippet from bgrins", ()=> {
    @@ -153,15 +156,24 @@ function handle_gui_switches(ev){

    console.log(target.value)

    if(target.id === 'format') return opt.format = target.value
    if(target.id === 'rename') return opt.rename = !target.value
    if(target.id === 'review') return opt.review = !opt.review
    if(target.id === 'format') {
    opt.format = target.value
    return update()
    }

    if(target.id === 'rename') {
    opt.rename = !target.value
    return update()
    }
    if(target.id === 'review') {
    opt.review = !opt.review
    return update()
    }
    }


    function update(){
    render()
    //save_snippets()
    }


    @@ -170,7 +182,6 @@ function render(){
    list.innerHTML = ''

    state.scriptSnippets.forEach((snippet)=>{
    console.log(snippet)
    const a = document.createElement('a')
    a.href = snippet.name
    a.innerHTML = snippet.name
  26. @soundyogi soundyogi revised this gist Jan 25, 2016. 1 changed file with 237 additions and 196 deletions.
    433 changes: 237 additions & 196 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,13 @@
    void function(){
    "use strict"
    /*
    * Import / Export snippets from chrome (2016)
    * Manage and Import / Export snippets from chrome (2016)
    * hacked together by: http://github.com/soundyogi
    * inspired by: aaran etc.
    */
    void function(){
    "use strict"


    let_us("init tests", function(){
    let_us("execute some init tests", function(){
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })
    @@ -16,17 +16,28 @@ let_us("init tests", function(){

    const style = `
    <style>
    body{
    margin: 0;
    padding: 0;
    }
    grid {
    display: flex;
    -webkit-flex-flow: column;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-flex-flow: column;
    }
    cell {
    background: tomato;
    column {
    display: flex;
    -webkit-flex-flow: column;
    width: 30vw;
    }
    row {
    display: flex;
    -webkit-flex-flow: row;
    width: 90vw;
    }
    item {
    background: tomato;
    min-height: 20vh;
    color: white;
    font-weight: bold;
    @@ -38,88 +49,147 @@ cell {

    const markup = `
    <grid>
    <cell>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    <label>Review Imports?
    <input type='checkbox'/>
    </label>
    </cell>
    <cell>
    <label>Handling Duplicate Names
    <select>
    <option>Rename imported content</option>
    <option>Import overwrites existing content</option>
    </select>
    </label>
    </cell>
    <cell>
    <button id="export_files">export</button>
    <select>
    <option>As Single .json</option>
    <option>As Multiple .js</option>
    </select>
    </cell>
    <cell>
    <button id="reset_snippets">delete all files</button>
    </cell>
    <row>
    <item>
    <button id="load_snippets">Load</button>
    </item>
    <item>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    <label>Review Imports?
    <input id='review' type='checkbox'/>
    </label>
    </item>
    <item>
    <label>Rename?
    <select id='rename'>
    <option value='true'>Rename Import Files</option>
    <option value="false">Overwrite Snippets</option>
    </select>
    </label>
    </item>
    <item>
    <button id="export_snippets">export</button>
    <select id='format'>
    <option value="json">Single .json</option>
    <option value="js">Multiple .js</option>
    </select>
    </item>
    <item>
    <button id="save_snippets">Save to Chrome</button>
    </item>
    <item>
    <button id="reset_snippets">DELETE all on Chrome</button>
    </item>
    </row>
    <row>
    <column><ul id="state.scriptSnippets"></column>
    </row>
    </grid>
    `


    /* Main logic
    */
    const main = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const state = {
    scriptSnippets: [],
    lastIdentifier: 0,
    gui_switches: {
    rename: true,
    format: "json",
    review: false
    }
    }

    main.document.body.innerHTML = style+markup

    main.document
    .getElementById("export_files")
    .addEventListener("click", export_files)
    const app_window = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    const document = app_window.document

    main.document
    .getElementById("import_files")
    .addEventListener('change', import_files)
    load_snippets()

    main.document
    .getElementById("reset_snippets")
    .addEventListener("click", reset_snippets)
    function load_snippets(){
    app_window.document.body.innerHTML = style+markup
    get_prefs(main)
    }

    function main(prefs){
    const lastScriptSnippets = prefs.scriptSnippets
    state.scriptSnippets = deserialize(lastScriptSnippets)
    state.lastIdentifier = prefs.scriptSnippets_lastIdentifier

    let_us("create another window with a live snippets preview", function(){
    const snippet_view = create_window("menubar=false, height=700, width=300", "snippets")
    snippet_view.document.body.appendChild(document.createElement("ul"))

    const update_loop = setTimeout( ()=> {
    update_snippet_view(snippet_view)
    }, 1000 )
    window.kill = ( ()=> clearInterval(update_loop) )
    })
    getID("format").on("change", handle_gui_switches)
    getID("rename").on("change", handle_gui_switches)
    getID("review").on("change", handle_gui_switches)

    getID("import_files").on("change", import_files)

    getID("export_snippets").on("click", export_snippets)
    getID("load_snippets").on("click", load_snippets)
    getID("save_snippets").on("click", save_snippets)
    getID("reset_snippets").on("click", reset_snippets)

    render()

    /*
    let_us("import a snippet from bgrins", ()=> {
    const brings_snippets = [
    'allcolors'
    ]
    brings_snippets.forEach(()=>{
    request('https://raw.githubusercontent.com/bgrins/devtools-snippets/master/snippets/allcolors/allcolors.js', function(request){
    var snippet = request.currentTarget.response || request.target.responseText;
    })
    })*/

    }

    function handle_gui_switches(ev){
    const target = ev.target
    const opt = state.gui_switches

    console.log(target.value)

    if(target.id === 'format') return opt.format = target.value
    if(target.id === 'rename') return opt.rename = !target.value
    if(target.id === 'review') return opt.review = !opt.review
    }


    function update(){
    render()
    //save_snippets()
    }

    // helper functions
    function update_snippet_view(w){
    get_snippets(function(snippets){
    const list = w.document.querySelector("ul")
    const parsed_snippets = deserialize(snippets)

    parsed_snippets.forEach((snippet)=>{
    function render(){
    const list = app_window.document.getElementById("state.scriptSnippets")
    list.innerHTML = ''

    state.scriptSnippets.forEach((snippet)=>{
    console.log(snippet)
    const a = document.createElement('a')
    a.innerHTML = "lol"+snippet.name
    a.href = snippet.name
    a.innerHTML = snippet.name
    list.appendChild(a)
    })
    })
    }


    /* Helpers
    */


    function import_files(event){
    const files = event.target.files
    const stack = Object.keys(files)
    .forEach((key)=>{
    const file = files[key]
    const reader = new FileReader()
    reader.fileName = file.name
    reader.onerror = (()=> {throw Error})
    reader.onabort = (()=> {throw Error})
    reader.onload = file_loaded
    @@ -128,39 +198,127 @@ function import_files(event){
    }


    function export_files(){
    // TODO add export options and such
    }

    function file_loaded(event){
    const content_string = event.target.result
    debugger
    const fileName = event.target.fileName
    add_snippet(fileName, content_string)
    }

    function set_pref(name, data_string){
    InspectorFrontendHost.setPreference(name, data_string)
    }


    function get_prefs(cb){
    InspectorFrontendHost.getPreferences(function(prefs){
    cb(prefs)
    })
    }


    function get_snippets(cb){
    get_prefs(function(prefs){
    add_snippet(name, content_string, prefs)
    cb(prefs.scriptSnippets)
    })
    }

    function export_js(){
    function save_snippets(){
    set_pref( "scriptSnippets", serialize(state.scriptSnippets) )
    set_pref( "scriptSnippets_lastIdentifier", state.lastIdentifier)
    load_snippets()
    }


    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
    // TODO: too risky for dev
    return

    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    }

    function add_snippet(name, snippet_content_string){
    if(is_duplicate(name, state.scriptSnippets)) {
    if(!state.gui_switches.rename) return state.scriptSnippets[name] = snippet_content_string
    return add_snippet(name+"copy", snippet_content_string)
    }

    function export_json(files){
    get_snippets(function(snippets){
    const json_data = serialize({'snippets': snippets}, ['snippets', 'name', 'content'], 2)
    download(json_data)
    })
    const currentIdentifier = serialize(parseInt(state.lastIdentifier)+1)
    const new_snip = {
    content: snippet_content_string,
    id: currentIdentifier,
    name: name
    }

    state.scriptSnippets.push( new_snip )
    state.lastIdentifier = currentIdentifier
    update()
    }

    function export_snippets(){
    if(state.gui_switches.format === "json") return download_json()
    return download_js()
    }

    function download_js(){
    state.scriptSnippets.forEach((snippet)=>{
    download(snippet.name, snippet.content)
    })
    }

    function download_json(){
    const json_data = serialize({'snippets': state.scriptSnippets}, ['snippets', 'name', 'content'], 2)
    download('json', json_data)
    }







    /* util & shorthand
    */
    function request(url, success) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = success;
    xhr.send();
    return xhr;
    }


    function getID(id){
    const element = app_window.document.getElementById(id)
    element.on = function on(event_name, fn){
    this.addEventListener(event_name, fn)
    return this
    }
    return element
    }

    function download(data){

    function serialize(object, ...rest){
    if(!object) throw Error("serialize needs an object")
    return JSON.stringify(object, ...rest)
    }


    function deserialize(string){
    if(typeof string !== "string") throw Error("deserialize needs a string")
    if(string === "") throw Error("no snippets present")
    return JSON.parse(string)
    }

    function download(name, data){
    const Blob = new window.Blob([data],{
    'type': 'text/utf-8'
    })
    const a = document.createElement('a')

    a.href = URL.createObjectURL(Blob)
    a.download = JSON.stringify(Date.now())
    a.download = name
    a.click()
    }

    @@ -191,59 +349,6 @@ function getDownloadFileName(count) {
    }





    function get_prefs(cb){
    InspectorFrontendHost.getPreferences(function(prefs){
    cb(prefs)
    })
    }


    function get_snippets(cb){
    get_prefs(function(prefs){
    cb(prefs.scriptSnippets)
    })
    }


    function set_pref(name, data_string){
    InspectorFrontendHost.setPreference(name, data_string)
    }


    function add_snippet(name, snippet_content_string, current_prefs){
    const snippets_deserialized = deserialize(current_prefs.scriptSnippets)
    const new_id_string = serialize(parseInt(current_prefs.scriptSnippets_lastIdentifier)+1)

    if(is_duplicate(name, snippets_deserialized)) throw Error("script "+name+" already exists")

    const new_snip = {
    content: snippet_content_string,
    id: new_id_string,
    name: name
    }

    snippets_deserialized.push( new_snip )
    set_pref( "scriptSnippets", serialize(snippets_deserialized) )
    set_pref( "scriptSnippets_lastIdentifier", new_id_string )
    }


    function serialize(object, ...rest){
    if(!object) throw Error("serialize needs an object")
    return JSON.stringify(object, ...rest)
    }


    function deserialize(string){
    if(typeof string !== "string") throw Error("deserialize needs a string")
    if(string === "") throw Error("no snippets present")
    return JSON.parse(string)
    }


    function is_duplicate(name, snippets_arr){
    const result = snippets_arr.filter(function(snippet){
    return snippet.name === name
    @@ -254,86 +359,22 @@ function is_duplicate(name, snippets_arr){
    }


    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
    // TODO: too risky for dev
    return

    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    }


    function create_window(options, title){
    const w = window.open("", "", options)
    w.document.title = title
    return w
    }
    /*
    * UNIT TESTS
    */

    /*
    let_us("reset all snippets", function(){
    reset_snippets()
    get_prefs(function(prefs){
    var snippets_parsed = deserialize(prefs.scriptSnippets)
    ok(snippets_parsed.length === 0, "all snippets are gone")
    ok(prefs.scriptSnippets_lastIdentifier === "0", "last identifier should be 0")
    })
    })
    let_us("insert a new snippet", function(){
    get_prefs(function(prefs){
    var snippets = prefs.scriptSnippets
    var snippets_parsed = deserialize(snippets)
    add_snippet("test_snippet", "var a = 4", prefs)
    // make a seperate test out of this
    get_prefs(function(prefs){
    var snippets = prefs.scriptSnippets
    var snippets_parsed = deserialize(snippets)
    console.log(snippets_parsed)
    var new_snippet = snippets_parsed.filter(function(snippet){
    return snippet.name === "test_snippet"
    })
    ok(new_snippet.length === 1, "snippet is there!")
    })
    })
    })


    let_us("get the snippets and parse them, so the individual scripts can be iterated", function(){
    get_prefs(function(prefs){
    var snippets = prefs.scriptSnippets
    var snippets_parsed = deserialize(snippets)
    ok(snippets, "are defined")
    ok(typeof snippets === "string", "are a string")
    ok(typeof snippets_parsed == "object", "parsing successful")
    snippets_parsed.map(function(snippet){
    ok(snippet.content !== undefined, "snippets have content")
    })
    })
    })
    /*
    * UNIT TESTS
    */

    // TODO: testint is not async

    /* Nanoharness
    */
    function let_us(msg,f){
    console.log("__group: "+msg)
    console.log("we_will: "+msg)
    try { f() }
    catch (exception) {
    console.warn(exception.stack.replace(/:(\d+):(\d+)/g, "$& (Line $1, Column $2)"))
  27. @soundyogi soundyogi revised this gist Jan 25, 2016. No changes.
  28. @soundyogi soundyogi revised this gist Jan 25, 2016. 1 changed file with 51 additions and 10 deletions.
    61 changes: 51 additions & 10 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ cell {
    min-height: 20vh;
    color: white;
    font-weight: bold;
    font-size: 3em;
    font-size: 1.5em;
    text-align: center;
    }
    </style>
    @@ -39,20 +39,30 @@ cell {
    const markup = `
    <grid>
    <cell>
    <label>sdsdsd</label>
    <input type='checkbox'>
    <label>Drop Files Here
    <input id="import_files" type='file' multiple='true'/>
    </label>
    <label>Review Imports?
    <input type='checkbox'/>
    </label>
    </cell>
    <cell>
    <input id="import" type='file' multiple='true'>Drop Files Here</input>
    <label>Handling Duplicate Names
    <select>
    <option>Rename imported content</option>
    <option>Import overwrites existing content</option>
    </select>
    </label>
    </cell>
    <cell>
    <button id="export_files">export</button>
    <select>
    <option>Rename imported content</option>
    <option>Import overwrites existing content</option>
    <option>As Single .json</option>
    <option>As Multiple .js</option>
    </select>
    </cell>
    <cell>
    <button id="export_json">export</button>
    <button id="reset_snippets">delete all files</button>
    </cell>
    </grid>
    `
    @@ -65,16 +75,45 @@ const main = create_window("menubar=false, height=700, width=700", "chrome snipp
    main.document.body.innerHTML = style+markup

    main.document
    .getElementById("export_json")
    .getElementById("export_files")
    .addEventListener("click", export_files)

    main.document
    .getElementById("import")
    .getElementById("import_files")
    .addEventListener('change', import_files)

    main.document
    .getElementById("reset_snippets")
    .addEventListener("click", reset_snippets)


    let_us("create another window with a live snippets preview", function(){
    const snippet_view = create_window("menubar=false, height=700, width=300", "snippets")
    snippet_view.document.body.appendChild(document.createElement("ul"))

    const update_loop = setTimeout( ()=> {
    update_snippet_view(snippet_view)
    }, 1000 )
    window.kill = ( ()=> clearInterval(update_loop) )
    })



    // helper functions
    function update_snippet_view(w){
    get_snippets(function(snippets){
    const list = w.document.querySelector("ul")
    const parsed_snippets = deserialize(snippets)

    parsed_snippets.forEach((snippet)=>{
    const a = document.createElement('a')
    a.innerHTML = "lol"+snippet.name
    list.appendChild(a)
    })
    })
    }


    function import_files(event){
    const files = event.target.files
    const stack = Object.keys(files)
    @@ -188,7 +227,6 @@ function add_snippet(name, snippet_content_string, current_prefs){

    snippets_deserialized.push( new_snip )
    set_pref( "scriptSnippets", serialize(snippets_deserialized) )
    // update lastIdentifier
    set_pref( "scriptSnippets_lastIdentifier", new_id_string )
    }

    @@ -218,6 +256,9 @@ function is_duplicate(name, snippets_arr){

    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
    // TODO: too risky for dev
    return

    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    }
  29. @soundyogi soundyogi revised this gist Jan 25, 2016. 1 changed file with 49 additions and 38 deletions.
    87 changes: 49 additions & 38 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,14 @@
    void function(){
    "use strict"


    let_us("init tests", function(){
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })



    const style = `
    <style>
    grid {
    @@ -52,66 +60,69 @@ const markup = `

    /* Main logic
    */
    let_us("check the location", function(){
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })
    const main = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")

    main.document.body.innerHTML = style+markup

    let_us("create the app window", function(){
    const w = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    w.document.body.innerHTML = style+markup
    main.document
    .getElementById("export_json")
    .addEventListener("click", export_files)

    let_us("export all snippets when the export button is clicked", function(){
    w.document
    .getElementById("export_json")
    .addEventListener("click", export_json)
    })
    main.document
    .getElementById("import")
    .addEventListener('change', import_files)

    let_us("read from input and load files", function(){
    const input = w.document.getElementById("import")
    input.addEventListener('change', function import_files(event){
    const files = event.target.files
    const stack = Object
    .keys(files)
    .forEach((key)=>{
    const file = files[key]
    const reader = new FileReader()
    debugger
    reader.onerror = (()=> {throw Error})
    reader.onabort = (()=> {throw Error})
    reader.onload = file_loaded
    reader.readAsText(file)
    })
    })
    })
    })


    // helper functions
    function import_files(event){
    const files = event.target.files
    const stack = Object.keys(files)
    .forEach((key)=>{
    const file = files[key]
    const reader = new FileReader()
    reader.onerror = (()=> {throw Error})
    reader.onabort = (()=> {throw Error})
    reader.onload = file_loaded
    reader.readAsText(file)
    })
    }


    function export_files(){
    // TODO add export options and such
    }

    function file_loaded(event){
    const content_string = event.target.result
    debugger

    get_prefs(function(prefs){
    add_snippet(name, content_string, prefs)
    })
    }

    function export_js(){

    function export_json(){
    }


    function export_json(files){
    get_snippets(function(snippets){
    const json_data = serialize({'snippets': snippets}, ['snippets', 'name', 'content'], 2)
    const Blob = new window.Blob([json_data],{
    download(json_data)
    })
    }

    function download(data){
    const Blob = new window.Blob([data],{
    'type': 'text/utf-8'
    })
    const a = document.createElement('a')
    const snippet_count = deserialize(snippets).length


    a.href = URL.createObjectURL(Blob)
    a.download = getDownloadFileName(snippet_count)
    a.download = JSON.stringify(Date.now())
    a.click()
    })
    }

    function getDownloadFileName(count) {
    @@ -218,7 +229,7 @@ function create_window(options, title){
    return w
    }
    /*
    * TESTS
    * UNIT TESTS
    */

    /*
  30. @soundyogi soundyogi revised this gist Jan 25, 2016. 1 changed file with 149 additions and 76 deletions.
    225 changes: 149 additions & 76 deletions chrome_snippet_export_import_2016.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,90 +1,147 @@
    /*
    * Import / Export snippets from chrome (2016)
    * by: http://github.com/soundyogi
    inspired by: aaran etc.
    // TODO add this
    * hacked together by: http://github.com/soundyogi
    * inspired by: aaran etc.
    */
    void function(){
    "use strict"


    // nanoharness
    function group(msg,f){
    console.log("__group: "+msg)
    try { f() }
    catch (exception) {
    console.warn(exception.stack.replace(/:(\d+):(\d+)/g, "$& (Line $1, Column $2)"))
    }
    }
    function ok(expr, msg){
    log(expr, msg)
    }
    function log(expr, msg){
    expr ? console.log("!pass "+msg) : console.log("?fail "+msg)
    }
    function html_log(){
    const queue = []
    return function log(expr, msg) {
    queue.push( expr ? `!pass ${msg}` : `?fail ${msg}` )
    debugger
    }
    const style = `
    <style>
    grid {
    display: flex;
    -webkit-flex-flow: column;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    let_us('ok', function(){
    ok(true, 'I pass')
    ok(false, 'I fail')
    ok(true, 'will be caught')
    })

    // main logic
    cell {
    background: tomato;
    width: 90vw;
    min-height: 20vh;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    }
    </style>
    `

    const markup = `
    <grid>
    <cell>
    <label>sdsdsd</label>
    <input type='checkbox'>
    </cell>
    <cell>
    <input id="import" type='file' multiple='true'>Drop Files Here</input>
    </cell>
    <cell>
    <select>
    <option>Rename imported content</option>
    <option>Import overwrites existing content</option>
    </select>
    </cell>
    <cell>
    <button id="export_json">export</button>
    </cell>
    </grid>
    `


    /* Main logic
    */
    let_us("check the location", function(){
    if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
    ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
    })


    let_us("make a window", function(){
    const w = window.open("", "", "menubar=false, height=700, width=700")
    const w_markup = `
    <style>
    .center {
    margin: 0 auto;
    }
    </style>
    <input class='center' type='file'>hello is it me you are looking for</>
    <input class='center' type='checkbox'></input>
    <div>What if snippets by those names exist in devtools?<select><option>Rename imported content</option><option>Import overwrites existing content</option></select></div><hr><div>You may set Google Chrome to <a href="https://support.google.com/chrome/answer/95574?hl=de" target="dtie_afd">ask for download location</a> to avoid malware warning (still requires confirming each download).</div>
    `

    w.document.title = "chrome snippets import/export"
    w.document.body.innerHTML = w_markup
    let_us("create the app window", function(){
    const w = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
    w.document.body.innerHTML = style+markup

    let_us("export all snippets when the export button is clicked", function(){
    w.document
    .getElementById("export_json")
    .addEventListener("click", export_json)
    })

    let_us("read from input and load files", function(){
    const input = w.document.getElementById("import")
    input.addEventListener('change', function import_files(event){
    const files = event.target.files
    const stack = Object
    .keys(files)
    .forEach((key)=>{
    const file = files[key]
    const reader = new FileReader()
    debugger
    reader.onerror = (()=> {throw Error})
    reader.onabort = (()=> {throw Error})
    reader.onload = file_loaded
    reader.readAsText(file)
    })
    })
    })
    })


    // helper functions
    function make_JSON(){
    return
    function file_loaded(event){
    const content_string = event.target.result
    debugger

    get_prefs(function(prefs){
    add_snippet(name, content_string, prefs)
    })
    }


    function export_all_snippets(){
    get_prefs(function(prefs){
    var snippets_parsed = deserialize(prefs.scriptSnippets)
    // export as json
    function export_json(){
    get_snippets(function(snippets){
    const json_data = serialize({'snippets': snippets}, ['snippets', 'name', 'content'], 2)
    const Blob = new window.Blob([json_data],{
    'type': 'text/utf-8'
    })
    const a = document.createElement('a')
    const snippet_count = deserialize(snippets).length

    a.href = URL.createObjectURL(Blob)
    a.download = getDownloadFileName(snippet_count)
    a.click()
    })
    }


    function import_all_snippets(){
    // resets everything?
    // one should be able to add only one script
    return
    function getDownloadFileName(count) {
    var abbrevCount;
    var d = new Date();
    var fileName = 'chrome-snippets-' + count + '-'; //$NON-NLS-0$
    fileName += d.getFullYear();
    var month = d.getMonth() + 1;
    fileName += "-" + ((month < 10) ? "0" + month : month); //$NON-NLS-0$ //$NON-NLS-1$
    // TODO Please note getDay() returns the day of week,
    // see http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.5.16
    var day = d.getDate();
    fileName += "-" + ((day < 10) ? "0" + day : day); //$NON-NLS-0$ //$NON-NLS-1$
    var hours = d.getHours();
    fileName += "T" + ((hours < 10) ? "0" + hours : hours); //$NON-NLS-0$ //$NON-NLS-1$
    var minutes = d.getMinutes();
    fileName += ((minutes < 10) ? "0" + minutes : minutes); //$NON-NLS-0$
    var seconds = d.getSeconds();
    fileName += ((seconds < 10) ? "0" + seconds : seconds); //$NON-NLS-0$
    var timeZoneOffset = -d.getTimezoneOffset();
    var offsetMinutes = timeZoneOffset % 60;
    var offsetHours = (timeZoneOffset - offsetMinutes) / 60;
    // TODO FIXME >= 0 ?
    fileName += (offsetHours > 0 ? "+" : "") + ((offsetHours < 10) ? "0" + offsetHours : offsetHours) + ((offsetMinutes < 10) ? "0" + offsetMinutes : offsetMinutes); //$NON-NLS-0$ //$NON-NLS-2$ //$NON-NLS-1$
    fileName += '.json'; //$NON-NLS-0$
    return fileName;
    }


    function gistsync(){
    return
    }



    function get_prefs(cb){
    @@ -118,16 +175,16 @@ function add_snippet(name, snippet_content_string, current_prefs){
    name: name
    }

    set_pref( "scriptSnippets_lastIdentifier", new_id_string )

    snippets_deserialized.push( new_snip )
    set_pref( "scriptSnippets", serialize(snippets_deserialized) )
    // update lastIdentifier
    set_pref( "scriptSnippets_lastIdentifier", new_id_string )
    }


    function serialize(object){
    function serialize(object, ...rest){
    if(!object) throw Error("serialize needs an object")
    return JSON.stringify(object)
    return JSON.stringify(object, ...rest)
    }


    @@ -149,11 +206,17 @@ function is_duplicate(name, snippets_arr){


    function reset_snippets(){
    prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
    set_pref("scriptSnippets", "[]")
    set_pref("scriptSnippets_lastIdentifier", "0")
    }


    function create_window(options, title){
    const w = window.open("", "", options)
    w.document.title = title
    return w
    }
    /*
    * TESTS
    */
    @@ -215,20 +278,30 @@ let_us("get the snippets and parse them, so the individual scripts can be iterat

    // TODO: testint is not async

    /* Nanoharness
    */
    function let_us(msg,f){
    console.log("__group: "+msg)
    try { f() }
    catch (exception) {
    console.warn(exception.stack.replace(/:(\d+):(\d+)/g, "$& (Line $1, Column $2)"))
    }
    }

    function ok(expr, msg){
    log(expr, msg)
    }

    function log(expr, msg){
    expr ? console.log("!pass "+msg) : console.log("?fail "+msg)
    }

    function html_log(){
    const queue = []
    return function log(expr, msg) {
    queue.push( expr ? `!pass ${msg}` : `?fail ${msg}` )
    }
    }













    }()
    }("thank you for reading this")