| // Copyright (c) 2017, 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 options = require('../options'); |
| var _ = require('underscore'); |
| var $ = require('jquery'); |
| var Promise = require('es6-promise').Promise; |
| var ga = require('../analytics'); |
| var Components = require('../components'); |
| var Libraries = require('../libs-widget-ext'); |
| var CompilerPicker = require('../compiler-picker'); |
| |
| function Conformance(hub, container, state) { |
| this.hub = hub; |
| this.container = container; |
| this.eventHub = hub.createEventHub(); |
| this.compilerService = hub.compilerService; |
| this.domRoot = container.getElement(); |
| this.domRoot.html($('#conformance').html()); |
| this.editorId = state.editorid; |
| this.maxCompilations = options.cvCompilerCountMax || 6; |
| this.langId = state.langId || _.keys(options.languages)[0]; |
| this.source = state.source || ''; |
| this.sourceNeedsExpanding = true; |
| this.expandedSource = null; |
| this.compilerPickers = []; |
| |
| this.status = { |
| allowCompile: false, |
| allowAdd: true, |
| }; |
| this.stateByLang = {}; |
| |
| this.initButtons(); |
| this.initLibraries(state); |
| this.initCallbacks(); |
| this.initFromState(state); |
| this.handleToolbarUI(); |
| ga.proxy('send', { |
| hitType: 'event', |
| eventCategory: 'OpenViewPane', |
| eventAction: 'Conformance', |
| }); |
| |
| // Dismiss the popover on escape. |
| $(document).on('keyup.editable', _.bind(function (e) { |
| if (e.which === 27) { |
| this.libsButton.popover('hide'); |
| } |
| }, this)); |
| |
| // Dismiss on any click that isn't either in the opening element, inside |
| // the popover or on any alert |
| $(document).on('click', _.bind(function (e) { |
| var elem = this.libsButton; |
| var target = $(e.target); |
| if (!target.is(elem) && elem.has(target).length === 0 && target.closest('.popover').length === 0) { |
| elem.popover('hide'); |
| } |
| }, this)); |
| } |
| |
| Conformance.prototype.onLibsChanged = function () { |
| this.saveState(); |
| this.compileAll(); |
| }; |
| |
| Conformance.prototype.initLibraries = function (state) { |
| this.libsWidget = new Libraries.Widget(this.langId, null, |
| this.libsButton, state, _.bind(this.onLibsChanged, this)); |
| }; |
| |
| Conformance.prototype.initButtons = function () { |
| this.selectorList = this.domRoot.find('.compiler-list'); |
| this.addCompilerButton = this.domRoot.find('.add-compiler'); |
| this.selectorTemplate = $('#compiler-selector').find('.form-row'); |
| this.topBar = this.domRoot.find('.top-bar'); |
| this.libsButton = this.topBar.find('.show-libs'); |
| this.hideable = this.domRoot.find('.hideable'); |
| }; |
| |
| Conformance.prototype.initCallbacks = function () { |
| this.container.on('destroy', function () { |
| this.eventHub.unsubscribe(); |
| this.eventHub.emit('conformanceViewClose', this.editorId); |
| }, this); |
| |
| this.container.on('destroy', this.close, this); |
| this.container.on('open', function () { |
| this.eventHub.emit('conformanceViewOpen', this.editorId); |
| }, this); |
| |
| this.container.on('resize', this.resize, this); |
| this.container.on('shown', this.resize, this); |
| this.eventHub.on('resize', this.resize, this); |
| this.eventHub.on('editorChange', this.onEditorChange, this); |
| this.eventHub.on('editorClose', this.onEditorClose, this); |
| this.eventHub.on('languageChange', this.onLanguageChange, this); |
| |
| this.addCompilerButton.on('click', _.bind(function () { |
| this.addCompilerPicker(); |
| this.saveState(); |
| }, this)); |
| }; |
| |
| Conformance.prototype.setTitle = function (compilerCount) { |
| this.container.setTitle('Conformance viewer (Editor #' + this.editorId + ') ' + ( |
| compilerCount !== 0 ? (compilerCount + '/' + this.maxCompilations) : '' |
| )); |
| }; |
| |
| Conformance.prototype.addCompilerPicker = function (config) { |
| if (!config) { |
| config = { |
| // Compiler id which is being used |
| compilerId: '', |
| // Options which are in use |
| options: options.compileOptions[this.langId], |
| }; |
| } |
| |
| var newEntry = this.selectorTemplate.clone(); |
| |
| var onOptionsChange = _.debounce(_.bind(function () { |
| this.saveState(); |
| this.compileChild(newEntry); |
| }, this), 800); |
| |
| var optionsField = newEntry.find('.options') |
| .val(config.options) |
| .on('change', onOptionsChange) |
| .on('keyup', onOptionsChange); |
| |
| var compilerPicker = null; |
| newEntry.find('.close').not('.extract-compiler') |
| .on('click', _.bind(function () { |
| this.removeCompilerPicker(compilerPicker, newEntry); |
| }, this)); |
| |
| this.selectorList.append(newEntry); |
| |
| var statusIcon = newEntry.find('.status-icon'); |
| var prependOptions = newEntry.find('.prepend-options'); |
| var popCompilerButton = newEntry.find('.extract-compiler'); |
| |
| var onCompilerChange = _.bind(function (compilerId) { |
| popCompilerButton.toggleClass('d-none', !compilerId); |
| // Hide the results icon when a new compiler is selected |
| this.handleStatusIcon(statusIcon, {code: 0}); |
| var compiler = this.compilerService.findCompiler(this.langId, compilerId); |
| if (compiler) this.setCompilationOptionsPopover(prependOptions, compiler.options); |
| this.updateLibraries(); |
| }, this); |
| |
| var compilerPickerNode = newEntry[0].querySelector('.compiler-picker'); |
| compilerPicker = new CompilerPicker( |
| $(newEntry[0]), this.hub, this.langId, config.compilerId, |
| _.bind(function (value) { |
| onCompilerChange(value); |
| this.compileChild(newEntry); |
| }, this) |
| ); |
| this.compilerPickers.push(compilerPicker); |
| |
| var getCompilerConfig = _.bind(function () { |
| return Components.getCompilerWith( |
| this.editorId, undefined, optionsField.val(), compilerPickerNode.value, this.langId, this.lastState.libs); |
| }, this); |
| |
| this.container.layoutManager |
| .createDragSource(popCompilerButton, getCompilerConfig); |
| |
| popCompilerButton.click(_.bind(function () { |
| var insertPoint = this.hub.findParentRowOrColumn(this.container) || |
| this.container.layoutManager.root.contentItems[0]; |
| insertPoint.addChild(getCompilerConfig); |
| }, this)); |
| |
| this.handleToolbarUI(); |
| this.saveState(); |
| }; |
| |
| Conformance.prototype.setCompilationOptionsPopover = function (element, content) { |
| element.popover('dispose'); |
| element.popover({ |
| content: content || 'No options in use', |
| template: '<div class="popover' + |
| (content ? ' compiler-options-popover' : '') + |
| '" role="tooltip"><div class="arrow"></div>' + |
| '<h3 class="popover-header"></h3><div class="popover-body"></div></div>', |
| }); |
| }; |
| |
| Conformance.prototype.removeCompilerPicker = function (picker, element) { |
| if (picker) picker.close(); |
| if (element) element.remove(); |
| this.updateLibraries(); |
| this.handleToolbarUI(); |
| this.saveState(); |
| }; |
| |
| Conformance.prototype.expandSource = function () { |
| if (this.sourceNeedsExpanding || !this.expandedSource) { |
| return this.compilerService.expand(this.source).then(_.bind(function (expandedSource) { |
| this.expandedSource = expandedSource; |
| this.sourceNeedsExpanding = false; |
| return expandedSource; |
| }, this)); |
| } |
| return Promise.resolve(this.expandedSource); |
| }; |
| |
| Conformance.prototype.onEditorChange = function (editorId, newSource, langId) { |
| if (editorId === this.editorId) { |
| this.langId = langId; |
| this.source = newSource; |
| this.sourceNeedsExpanding = true; |
| this.compileAll(); |
| } |
| }; |
| |
| Conformance.prototype.onEditorClose = function (editorId) { |
| if (editorId === this.editorId) { |
| this.close(); |
| _.defer(function (self) { |
| self.container.close(); |
| }, this); |
| } |
| }; |
| |
| function hasResultAnyOutput(result) { |
| return (result.stdout || []).length > 0 || (result.stderr || []).length > 0; |
| } |
| |
| Conformance.prototype.handleCompileOutIcon = function (element, result) { |
| var hasOutput = hasResultAnyOutput(result); |
| element.toggleClass('d-none', !hasOutput); |
| if (hasOutput) { |
| this.compilerService.handleOutputButtonTitle(element, result); |
| } |
| |
| }; |
| |
| Conformance.prototype.onCompileResponse = function (child, result) { |
| var compilationOptions = ''; |
| if (result.compilationOptions) { |
| compilationOptions = result.compilationOptions.join(' '); |
| } |
| |
| this.setCompilationOptionsPopover(child.find('.prepend-options'), compilationOptions); |
| |
| this.handleCompileOutIcon(child.find('.compiler-out'), result); |
| |
| this.handleStatusIcon(child.find('.status-icon'), this.compilerService.calculateStatusIcon(result)); |
| this.saveState(); |
| }; |
| |
| Conformance.prototype.compileChild = function (child) { |
| // Hide previous status icons |
| var picker = child.find('.compiler-picker'); |
| |
| if (!picker || !picker.val()) return; |
| |
| this.handleStatusIcon(child.find('.status-icon'), {code: 4}); |
| |
| this.expandSource().then(_.bind(function (expandedSource) { |
| var request = { |
| source: expandedSource, |
| compiler: picker.val(), |
| options: { |
| userArguments: child.find('.options').val() || '', |
| filters: {}, |
| compilerOptions: {produceAst: false, produceOptInfo: false}, |
| libraries: [], |
| skipAsm: true, |
| }, |
| lang: this.langId, |
| }; |
| |
| _.each(this.libsWidget.getLibsInUse(), function (item) { |
| request.options.libraries.push({ |
| id: item.libId, |
| version: item.versionId, |
| }); |
| }); |
| |
| // This error function ensures that the user will know we had a problem (As we don't save asm) |
| this.compilerService.submit(request) |
| .then(_.bind(function (x) { |
| this.onCompileResponse(child, x.result); |
| }, this)) |
| .catch(_.bind(function (x) { |
| this.onCompileResponse(child, { |
| asm: '', |
| code: -1, |
| stdout: '', |
| stderr: x.error, |
| }); |
| }, this)); |
| }, this)); |
| }; |
| |
| Conformance.prototype.compileAll = function () { |
| _.each(this.selectorList.children(), _.bind(function (child) { |
| this.compileChild($(child)); |
| }, this)); |
| }; |
| |
| Conformance.prototype.handleToolbarUI = function () { |
| var compilerCount = this.selectorList.children().length; |
| |
| // Only allow new compilers if we allow for more |
| this.addCompilerButton.prop('disabled', compilerCount >= this.maxCompilations); |
| |
| this.setTitle(compilerCount); |
| }; |
| |
| Conformance.prototype.handleStatusIcon = function (statusIcon, status) { |
| this.compilerService.handleCompilationStatus(null, statusIcon, status); |
| }; |
| |
| Conformance.prototype.currentState = function () { |
| var compilers = _.map(this.selectorList.children(), function (child) { |
| child = $(child); |
| return { |
| compilerId: child.find('.compiler-picker').val() || '', |
| options: child.find('.options').val() || '', |
| }; |
| }); |
| return { |
| editorid: this.editorId, |
| langId: this.langId, |
| compilers: compilers, |
| libs: this.libsWidget.get(), |
| }; |
| }; |
| |
| Conformance.prototype.saveState = function () { |
| this.lastState = this.currentState(); |
| this.container.setState(this.lastState); |
| }; |
| |
| Conformance.prototype.resize = function () { |
| this.updateHideables(); |
| this.selectorList.css('height', this.domRoot.height() - this.topBar.outerHeight(true)); |
| }; |
| |
| Conformance.prototype.updateHideables = function () { |
| this.hideable.toggle(this.domRoot.width() > this.addCompilerButton.width()); |
| }; |
| |
| Conformance.prototype.getOverlappingLibraries = function (compilerIds) { |
| var compilers = _.map(compilerIds, _.bind(function (compilerId) { |
| return this.compilerService.findCompiler(this.langId, compilerId); |
| }, this)); |
| |
| var libraries = {}; |
| var first = true; |
| _.forEach(compilers, function (compiler) { |
| if (compiler) { |
| if (first) { |
| libraries = _.extend({}, compiler.libs); |
| first = false; |
| } else { |
| var libsInCommon = _.intersection(_.keys(libraries), |
| _.keys(compiler.libs)); |
| |
| _.forEach(libraries, function (lib, libkey) { |
| if (libsInCommon.includes(libkey)) { |
| var versionsInCommon = _.intersection(_.keys(lib.versions), |
| _.keys(compiler.libs[libkey].versions)); |
| |
| libraries[libkey].versions = _.pick(lib.versions, |
| function (version, versionkey) { |
| return versionsInCommon.includes(versionkey); |
| }); |
| } else { |
| libraries[libkey] = false; |
| } |
| }); |
| |
| libraries = _.omit(libraries, function (lib) { |
| return !lib || _.isEmpty(lib.versions); |
| }); |
| } |
| } |
| }); |
| |
| return libraries; |
| }; |
| |
| Conformance.prototype.updateLibraries = function () { |
| var compilerIds = _.uniq( |
| _.filter( |
| _.map(this.selectorList.children(), function (child) { |
| return $(child).find('.compiler-picker').val(); |
| }) |
| , function (compilerId) { |
| return compilerId !== ''; |
| }) |
| ); |
| |
| var libraries = this.getOverlappingLibraries(compilerIds); |
| |
| this.libsWidget.setNewLangId(this.langId, compilerIds.join('|'), libraries); |
| }; |
| |
| Conformance.prototype.onLanguageChange = function (editorId, newLangId) { |
| if (editorId === this.editorId && this.langId !== newLangId) { |
| var oldLangId = this.langId; |
| this.stateByLang[oldLangId] = this.currentState(); |
| |
| this.langId = newLangId; |
| this.selectorList.children().remove(); |
| _.each(this.compilerPickers, function (picker) { |
| picker.close(); |
| }); |
| this.compilerPickers = []; |
| var langState = this.stateByLang[newLangId]; |
| this.initFromState(langState); |
| this.updateLibraries(); |
| this.handleToolbarUI(); |
| this.saveState(); |
| } |
| }; |
| |
| Conformance.prototype.close = function () { |
| this.eventHub.unsubscribe(); |
| _.each(this.compilerPickers, function (picker) { |
| picker.close(); |
| }); |
| this.eventHub.emit('conformanceViewClose', this.editorId); |
| }; |
| |
| Conformance.prototype.initFromState = function (state) { |
| if (state && state.compilers) { |
| this.lastState = state; |
| _.each(state.compilers, _.bind(this.addCompilerPicker, this)); |
| } else { |
| this.lastState = this.currentState(); |
| } |
| }; |
| |
| module.exports = { |
| Conformance: Conformance, |
| }; |