static/panes/tool.js

// Copyright (c) 2018, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright notice,
//       this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

'use strict';

var _ = require('underscore');
var $ = require('jquery');
var FontScale = require('../widgets/fontscale').FontScale;
var AnsiToHtml = require('../ansi-to-html').Filter;
var Toggles = require('../widgets/toggles').Toggles;
var ga = require('../analytics').ga;
var Components = require('../components');
var monaco = require('monaco-editor');
var monacoConfig = require('../monaco-config');
var ceoptions = require('../options').options;
var utils = require('../utils');
var PaneRenaming = require('../widgets/pane-renaming').PaneRenaming;
var saveAs = require('file-saver').saveAs;

function makeAnsiToHtml(color) {
    return new AnsiToHtml({
        fg: color ? color : '#333',
        bg: '#f5f5f5',
        stream: true,
        escapeXML: true,
    });
}

function Tool(hub, container, state) {
    this.hub = hub;
    this.container = container;
    this.compilerId = state.compiler;
    this.editorId = state.editor;
    this.treeId = state.tree;
    this.toolId = state.toolId;
    this.toolName = 'Tool';
    this.compilerService = hub.compilerService;
    this.eventHub = hub.createEventHub();
    this.domRoot = container.getElement();
    this.domRoot.html($('#tool-output').html());
    this.editorContentRoot = this.domRoot.find('.monaco-placeholder');
    this.plainContentRoot = this.domRoot.find('pre.content');
    this.optionsToolbar = this.domRoot.find('.options-toolbar');
    this.badLangToolbar = this.domRoot.find('.bad-lang');
    this.compilerName = '';
    this.monacoStdin = state.monacoStdin || false;
    this.monacoEditorOpen = state.monacoEditorOpen || false;
    this.monacoEditorHasBeenAutoOpened = state.monacoEditorHasBeenAutoOpened || false;
    this.monacoStdinField = '';
    this.normalAnsiToHtml = makeAnsiToHtml();

    this.optionsField = this.domRoot.find('input.options');
    this.localStdinField = this.domRoot.find('textarea.tool-stdin');

    this.outputEditor = monaco.editor.create(
        this.editorContentRoot[0],
        monacoConfig.extendConfig({
            readOnly: true,
            language: 'text',
            fontFamily: 'courier new',
            lineNumbersMinChars: 5,
            guides: false,
        })
    );

    this.fontScale = new FontScale(this.domRoot, state, '.content');
    this.fontScale.on(
        'change',
        _.bind(function () {
            this.saveState();
        }, this)
    );

    this.createToolInputView = _.bind(function () {
        return Components.getToolInputViewWith(this.compilerId, this.toolId, this.toolName);
    }, this);

    this.initButtons(state);
    this.options = new Toggles(this.domRoot.find('.options'), state);
    this.options.on('change', _.bind(this.onOptionsChange, this));

    this.paneRenaming = new PaneRenaming(this, state);

    this.initArgs(state);
    this.initCallbacks();

    this.onOptionsChange();

    ga.proxy('send', {
        hitType: 'event',
        eventCategory: 'OpenViewPane',
        eventAction: 'Tool',
    });

    this.eventHub.emit('toolOpened', this.compilerId, this.currentState());
    this.eventHub.emit('requestSettings');
}

Tool.prototype.initCallbacks = function () {
    this.container.on('resize', this.resize, this);
    this.container.on('shown', this.resize, this);
    this.container.on('destroy', this.close, this);

    this.paneRenaming.on('renamePane', this.saveState.bind(this));

    this.eventHub.on('compileResult', this.onCompileResult, this);
    this.eventHub.on('compilerClose', this.onCompilerClose, this);
    this.eventHub.on('settingsChange', this.onSettingsChange, this);
    this.eventHub.on('languageChange', this.onLanguageChange, this);
    this.eventHub.on('toolInputChange', this.onToolInputChange, this);
    this.eventHub.on('toolInputViewClosed', this.onToolInputViewClosed, this);

    this.toggleArgs.on(
        'click',
        _.bind(function () {
            this.togglePanel(this.toggleArgs, this.panelArgs);
        }, this)
    );

    this.toggleStdin.on(
        'click',
        _.bind(function () {
            if (!this.monacoStdin) {
                this.togglePanel(this.toggleStdin, this.panelStdin);
            } else {
                if (!this.monacoEditorOpen) {
                    this.openMonacoEditor();
                } else {
                    this.monacoEditorOpen = false;
                    this.toggleStdin.removeClass('active');
                    this.eventHub.emit('toolInputViewCloseRequest', this.compilerId, this.toolId);
                }
            }
        }, this)
    );

    if (MutationObserver !== undefined) {
        new MutationObserver(_.bind(this.resize, this)).observe(this.localStdinField[0], {
            attributes: true,
            attributeFilter: ['style'],
        });
    }
};

Tool.prototype.onLanguageChange = function (editorId, newLangId) {
    if (this.editorId && this.editorId === editorId) {
        var tools = ceoptions.tools[newLangId];
        this.toggleUsable(tools && tools[this.toolId]);
    }
};

Tool.prototype.toggleUsable = function (isUsable) {
    if (isUsable) {
        this.plainContentRoot.css('opacity', '1');
        this.badLangToolbar.hide();
        this.optionsToolbar.show();
    } else {
        this.plainContentRoot.css('opacity', '0.5');
        this.optionsToolbar.hide();
        this.badLangToolbar.show();
    }
};

Tool.prototype.onSettingsChange = function (newSettings) {
    this.outputEditor.updateOptions({
        contextmenu: newSettings.useCustomContextMenu,
        minimap: {
            enabled: newSettings.showMinimap,
        },
        fontFamily: newSettings.editorsFFont,
        codeLensFontFamily: newSettings.editorsFFont,
        fontLigatures: newSettings.editorsFLigatures,
    });
};

Tool.prototype.initArgs = function (state) {
    var optionsChange = _.debounce(
        _.bind(function (e) {
            this.onOptionsChange($(e.target).val());

            this.eventHub.emit('toolSettingsChange', this.compilerId);
        }, this),
        800
    );

    if (this.optionsField) {
        this.optionsField.on('change', optionsChange).on('keyup', optionsChange);

        if (state.args) {
            this.optionsField.val(state.args);
        }
    }

    if (this.localStdinField) {
        this.localStdinField.on('change', optionsChange).on('keyup', optionsChange);

        if (state.stdin) {
            if (!this.monacoStdin) {
                this.localStdinField.val(state.stdin);
            } else {
                this.eventHub.emit('setToolInput', this.compilerId, this.toolId, state.stdin);
            }
        }
    }
};

Tool.prototype.getInputArgs = function () {
    if (this.optionsField) {
        return this.optionsField.val();
    } else {
        return '';
    }
};

Tool.prototype.onToolInputChange = function (compilerId, toolId, input) {
    if (this.compilerId === compilerId && this.toolId === toolId) {
        this.monacoStdinField = input;
        this.onOptionsChange();
        this.eventHub.emit('toolSettingsChange', this.compilerId);
    }
};

Tool.prototype.onToolInputViewClosed = function (compilerId, toolId, input) {
    if (this.compilerId === compilerId && this.toolId === toolId) {
        // Duplicate close messages have been seen, with the second having no value.
        // If we have a current value and the new value is empty, ignore the message.
        if (this.monacoStdinField && input) {
            this.monacoStdinField = input;
            this.monacoEditorOpen = false;
            this.toggleStdin.removeClass('active');

            this.onOptionsChange();
            this.eventHub.emit('toolSettingsChange', this.compilerId);
        }
    }
};

Tool.prototype.getInputStdin = function () {
    if (!this.monacoStdin) {
        if (this.localStdinField) {
            return this.localStdinField.val();
        } else {
            return '';
        }
    } else {
        return this.monacoStdinField;
    }
};

Tool.prototype.openMonacoEditor = function () {
    this.monacoEditorHasBeenAutoOpened = true; // just in case we get here in an unexpected way
    this.monacoEditorOpen = true;
    this.toggleStdin.addClass('active');
    var insertPoint =
        this.hub.findParentRowOrColumn(this.container) || this.container.layoutManager.root.contentItems[0];
    insertPoint.addChild(this.createToolInputView);
    this.onOptionsChange();
    this.eventHub.emit('setToolInput', this.compilerId, this.toolId, this.monacoStdinField);
};

Tool.prototype.getEffectiveOptions = function () {
    return this.options.get();
};

Tool.prototype.resize = function () {
    utils.updateAndCalcTopBarHeight(this.domRoot, this.optionsToolbar, this.hideable);
    var barsHeight = this.optionsToolbar.outerHeight() + 2;
    if (!this.panelArgs.hasClass('d-none')) {
        barsHeight += this.panelArgs.outerHeight();
    }
    if (!this.panelStdin.hasClass('d-none')) {
        barsHeight += this.panelStdin.outerHeight();
    }

    this.outputEditor.layout({
        width: this.domRoot.width(),
        height: this.domRoot.height() - barsHeight,
    });

    this.plainContentRoot.height(this.domRoot.height() - barsHeight);
};

Tool.prototype.onOptionsChange = function () {
    var options = this.getEffectiveOptions();
    this.plainContentRoot.toggleClass('wrap', options.wrap);
    this.wrapButton.prop('title', '[' + (options.wrap ? 'ON' : 'OFF') + '] ' + this.wrapTitle);

    this.saveState();
};

Tool.prototype.initButtons = function (state) {
    this.wrapButton = this.domRoot.find('.wrap-lines');
    this.wrapTitle = this.wrapButton.prop('title');

    this.panelArgs = this.domRoot.find('.panel-args');
    this.panelStdin = this.domRoot.find('.panel-stdin');

    this.hideable = this.domRoot.find('.hideable');

    this.initButtonsVisibility(state);
};

Tool.prototype.initButtonsVisibility = function (state) {
    this.toggleArgs = this.domRoot.find('.toggle-args');
    this.toggleStdin = this.domRoot.find('.toggle-stdin');
    this.artifactBtn = this.domRoot.find('.artifact-btn');
    this.artifactText = this.domRoot.find('.artifact-text');

    if (state.argsPanelShown === true) {
        this.showPanel(this.toggleArgs, this.panelArgs);
    }

    if (state.stdinPanelShown === true) {
        if (!this.monacoStdin) {
            this.showPanel(this.toggleStdin, this.panelStdin);
        } else {
            if (!this.monacoEditorOpen) {
                this.openMonacoEditor();
            }
        }
    }
    this.artifactBtn.addClass('d-none');
};

Tool.prototype.showPanel = function (button, panel) {
    panel.removeClass('d-none');
    button.addClass('active');
    this.resize();
};

Tool.prototype.hidePanel = function (button, panel) {
    panel.addClass('d-none');
    button.removeClass('active');
    this.resize();
};

Tool.prototype.togglePanel = function (button, panel) {
    if (panel.hasClass('d-none')) {
        this.showPanel(button, panel);
    } else {
        this.hidePanel(button, panel);
    }
    this.saveState();
};

Tool.prototype.currentState = function () {
    var options = this.getEffectiveOptions();
    var state = {
        compiler: this.compilerId,
        editor: this.editorId,
        tree: this.treeId,
        wrap: options.wrap,
        toolId: this.toolId,
        args: this.getInputArgs(),
        stdin: this.getInputStdin(),
        stdinPanelShown:
            (this.monacoStdin && this.monacoEditorOpen) || (this.panelStdin && !this.panelStdin.hasClass('d-none')),
        monacoStdin: this.monacoStdin,
        monacoEditorOpen: this.monacoEditorOpen,
        monacoEditorHasBeenAutoOpened: this.monacoEditorHasBeenAutoOpened,
        argsPanelShow: !this.panelArgs.hasClass('d-none'),
    };
    this.paneRenaming.addState(state);
    this.fontScale.addState(state);
    return state;
};

Tool.prototype.saveState = function () {
    this.container.setState(this.currentState());
};

Tool.prototype.setLanguage = function (languageId) {
    if (languageId) {
        this.options.enableToggle('wrap', false);
        monaco.editor.setModelLanguage(this.outputEditor.getModel(), languageId);
        this.outputEditor.setValue('');
        this.fontScale.setTarget(this.outputEditor);
        $(this.plainContentRoot).hide();
        $(this.editorContentRoot).show();
    } else {
        this.options.enableToggle('wrap', true);
        this.plainContentRoot.empty();
        this.fontScale.setTarget('.content');
        $(this.editorContentRoot).hide();
        $(this.plainContentRoot).show();
    }
};

Tool.prototype.clickableUrls = function (text) {
    return text.replace(
        // URL detection regex grabbed from https://stackoverflow.com/a/3809435
        /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/,
        '<a href="$1" target="_blank">$1</a>'
    );
};

Tool.prototype.onCompileResult = function (id, compiler, result) {
    try {
        if (id !== this.compilerId) return;
        if (compiler) this.compilerName = compiler.name;

        var foundTool = _.find(
            compiler.tools,
            function (tool) {
                return tool.tool.id === this.toolId;
            },
            this
        );

        this.toggleUsable(foundTool);

        var toolResult = null;
        if (result && result.tools) {
            toolResult = _.find(
                result.tools,
                function (tool) {
                    return tool.id === this.toolId;
                },
                this
            );
        } else if (result && result.result && result.result.tools) {
            toolResult = _.find(
                result.result.tools,
                function (tool) {
                    return tool.id === this.toolId;
                },
                this
            );
        }

        var toolInfo = null;
        if (compiler && compiler.tools) {
            toolInfo = _.find(
                compiler.tools,
                function (tool) {
                    return tool.tool.id === this.toolId;
                },
                this
            );
        }

        if (toolInfo) {
            this.toggleStdin.prop('disabled', false);

            if (this.monacoStdin && !this.monacoEditorOpen && !this.monacoEditorHasBeenAutoOpened) {
                this.monacoEditorHasBeenAutoOpened = true;
                this.openMonacoEditor();
            } else if (!this.monacoStdin && toolInfo.tool.stdinHint) {
                this.localStdinField.prop('placeholder', toolInfo.tool.stdinHint);
                if (toolInfo.tool.stdinHint === 'disabled') {
                    this.toggleStdin.prop('disabled', true);
                } else {
                    this.showPanel(this.toggleStdin, this.panelStdin);
                }
            } else {
                this.localStdinField.prop('placeholder', 'Tool stdin...');
            }
        }

        // reset stream styles
        this.normalAnsiToHtml.reset();

        if (toolResult) {
            if (toolResult.languageId && toolResult.languageId === 'stderr') {
                toolResult.languageId = false;
            }

            this.setLanguage(toolResult.languageId);

            if (toolResult.languageId) {
                this.setEditorContent(_.pluck(toolResult.stdout, 'text').join('\n'));
            } else {
                _.each(
                    (toolResult.stdout || []).concat(toolResult.stderr || []),
                    function (obj) {
                        if (obj.text === '') {
                            this.add('<br/>');
                        } else {
                            this.add(
                                this.clickableUrls(this.normalAnsiToHtml.toHtml(obj.text)),
                                obj.tag ? obj.tag.line : obj.line,
                                obj.tag ? obj.tag.column : 0,
                                obj.tag ? obj.tag.flow : null
                            );
                        }
                    },
                    this
                );
            }

            this.toolName = toolResult.name;
            this.updateTitle();

            if (toolResult.sourcechanged && this.editorId) {
                this.eventHub.emit('newSource', this.editorId, toolResult.newsource);
            }
            this.artifactBtn.off('click');
            if (toolResult.artifact) {
                this.artifactBtn.removeClass('d-none');
                this.artifactText.text('Download ' + toolResult.artifactGenerated.title);
                this.artifactBtn.click(
                    _.bind(function () {
                        // The artifact content can be passed either as plain text or as a base64 encoded binary file
                        if (toolResult.artifactGenerated.type === 'application/octet-stream') {
                            // Fetch is the most convenient non ES6 way to build a binary blob out of a base64 string
                            fetch('data:application/octet-stream;base64,' + toolResult.artifactGenerated.content)
                                .then(res => res.blob())
                                .then(blob => saveAs(blob, toolResult.artifact.name));
                        } else {
                            saveAs(
                                new Blob([toolResult.artifact.content], {
                                    type: toolResult.artifact.type,
                                }),
                                toolResult.artifact.name
                            );
                        }
                    }, this)
                );
            } else {
                this.artifactBtn.addClass('d-none');
            }
        } else {
            this.setEditorContent('No tool result');
        }
    } catch (e) {
        this.setLanguage(false);
        this.add('javascript error: ' + e.message);
    }
};

Tool.prototype.add = function (msg, lineNum, column, flow) {
    var elem = $('<div/>').appendTo(this.plainContentRoot);
    if (lineNum && this.editorId) {
        elem.html(
            $('<a></a>')
                .prop('href', 'javascript:;')
                .html(msg)
                .on(
                    'click',
                    _.bind(function (e) {
                        this.eventHub.emit('editorSetDecoration', this.editorId, lineNum, true, column);
                        if (flow) {
                            this.eventHub.emit('editorDisplayFlow', this.editorId, flow);
                        }
                        e.preventDefault();
                        return false;
                    }, this)
                )
                .on(
                    'mouseover',
                    _.bind(function () {
                        this.eventHub.emit('editorSetDecoration', this.editorId, lineNum, false, column);
                    }, this)
                )
        );
    } else {
        elem.html(msg);
    }
};

Tool.prototype.setEditorContent = function (content) {
    if (!this.outputEditor || !this.outputEditor.getModel()) return;
    var editorModel = this.outputEditor.getModel();
    var visibleRanges = this.outputEditor.getVisibleRanges();
    var currentTopLine = visibleRanges.length > 0 ? visibleRanges[0].startLineNumber : 1;
    editorModel.setValue(content);
    this.outputEditor.revealLine(currentTopLine);
    this.setNormalContent();
};

Tool.prototype.setNormalContent = function () {
    this.outputEditor.updateOptions({
        lineNumbers: true,
        codeLens: false,
    });
    if (this.codeLensProvider) {
        this.codeLensProvider.dispose();
    }
};

Tool.prototype.getPaneName = function () {
    var name = this.toolName + ' #' + this.compilerId;
    if (this.compilerName) name += ' with ' + this.compilerName;
    return name;
};

Tool.prototype.updateTitle = function () {
    var name = this.paneName ? this.paneName : this.getPaneName();
    this.container.setTitle(_.escape(name));
};

Tool.prototype.onCompilerClose = function (id) {
    if (id === this.compilerId) {
        this.close();
        _.defer(function (self) {
            self.container.close();
        }, this);
    }
};

Tool.prototype.close = function () {
    this.eventHub.emit('toolClosed', this.compilerId, this.currentState());
    this.eventHub.unsubscribe();
    this.outputEditor.dispose();
};

module.exports = {
    Tool: Tool,
};