Browse Source

Separate settings, make delay time configurable

dev/git-series/gccdum
Matt Godbolt 6 years ago
parent
commit
02881080d7
  1. 6
      .idea/inspectionProfiles/profiles_settings.xml
  2. 3
      bower.json
  3. 40
      static/editor.js
  4. 5
      static/explorer.css
  5. 45
      static/index.html
  6. 18
      static/main.js
  7. 66
      static/settings.js

6
.idea/inspectionProfiles/profiles_settings.xml

@ -1,6 +0,0 @@
<component name="InspectionProjectProfileManager">
<settings>
<option name="PROJECT_PROFILE" />
<version value="1.0" />
</settings>
</component>

3
bower.json

@ -27,6 +27,7 @@
"clipboard": "^1.5.12",
"raven-js": "^3.7.0",
"es6-promise": "^4.0.5",
"lru-cache": "2.7.3"
"lru-cache": "2.7.3",
"seiyria-bootstrap-slider": "9.7.x"
}
}

40
static/editor.js

@ -28,7 +28,6 @@ define(function (require) {
var _ = require('underscore');
var $ = require('jquery');
var colour = require('colour');
var Toggles = require('toggles');
var loadSaveLib = require('loadSave');
var FontScale = require('fontscale');
var Sharing = require('sharing');
@ -46,13 +45,12 @@ define(function (require) {
this.domRoot = container.getElement();
this.domRoot.html($('#codeEditor').html());
this.eventHub = hub.createEventHub();
this.settings = {};
this.widgetsByCompiler = {};
this.asmByCompiler = {};
this.busyCompilers = {};
this.colours = [];
this.options = new Toggles(this.domRoot.find('.options'), state.options);
this.options.on('change', _.bind(this.onOptionsChange, this));
var cmMode;
switch (lang.toLowerCase()) {
@ -98,10 +96,7 @@ define(function (require) {
// * Only actually triggering a change if the document text has changed from
// the previous emitted.
this.lastChangeEmitted = null;
var ChangeDebounceMs = 800;
this.debouncedEmitChange = _.debounce(function () {
if (self.options.get().compileOnChange) self.maybeEmitChange();
}, ChangeDebounceMs);
this.onSettingsChange({});
this.editor.getModel().onDidChangeContent(_.bind(function () {
this.debouncedEmitChange();
this.updateState();
@ -148,6 +143,8 @@ define(function (require) {
this.eventHub.on('compileResult', this.onCompileResponse, this);
this.eventHub.on('selectLine', this.onSelectLine, this);
this.eventHub.on('settingsChange', this.onSettingsChange, this);
// NB a new compilerConfig needs to be created every time; else the state is shared
// between all compilers created this way. That leads to some nasty-to-find state
// bugs e.g. https://github.com/mattgodbolt/compiler-explorer/issues/225
@ -187,8 +184,7 @@ define(function (require) {
Editor.prototype.updateState = function () {
var state = {
id: this.id,
source: this.getSource(),
options: this.options.get()
source: this.getSource()
};
this.fontScale.addState(state);
this.container.setState(state);
@ -198,17 +194,27 @@ define(function (require) {
return this.editor.getModel().getValue();
};
Editor.prototype.onOptionsChange = function (before, after) {
this.updateState();
Editor.prototype.onSettingsChange = function (newSettings) {
var before = this.settings;
var after = newSettings;
this.settings = _.clone(newSettings);
// TODO: bug when:
// * Turn off auto.
// * edit code
// * change compiler or compiler options (out of date code is used)
if (after.compileOnChange && !before.compileOnChange) {
// If we've just enabled "compile on change"; forcibly send a change
// which will recolourise as required.
this.maybeEmitChange(true);
} else if (before.colouriseAsm !== after.colouriseAsm) {
if (before.delayAfterChange !== after.delayAfterChange || !this.debouncedEmitChange) {
if (after.delayAfterChange) {
this.debouncedEmitChange = _.debounce(_.bind(function () {
this.maybeEmitChange();
}, this), after.delayAfterChange);
this.maybeEmitChange(true);
} else {
this.debouncedEmitChange = _.noop;
}
}
if (before.colouriseAsm !== after.colouriseAsm) {
// if the colourise option has been toggled...recompute colours
this.numberUsedLines();
}
@ -229,7 +235,7 @@ define(function (require) {
});
if (_.any(this.busyCompilers)) return;
this.updateColours(this.options.get().colouriseAsm ? result : []);
this.updateColours(this.settings.colouriseAsm ? result : []);
};
Editor.prototype.updateColours = function (colours) {

5
static/explorer.css

@ -2,12 +2,17 @@
@import url("ext/golden-layout/src/css/goldenlayout-base.css");
@import url("ext/golden-layout/src/css/goldenlayout-light-theme.css");
@import url("ext/selectize/dist/css/selectize.bootstrap2.css");
@import url("ext/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css");
.navbar {
border-radius: 0;
margin-bottom: 2px;
}
.navbar-brand {
width: 13.5em;
}
.navbar-inverse {
background-color: #226;
}

45
static/index.html

@ -20,9 +20,13 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Compiler Explorer &dash; <span class="language-name"></span></a>
<a class="navbar-brand" href="#" title="Compiler Explorer">Compiler Explorer &dash; <span
class="language-name"></span></a>
</div>
<li class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#" data-target="#settings" data-toggle="modal">Settings</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.patreon.com/mattgodbolt">
<img height="20" width="20" src="assets/patreon_logo.png">&nbsp;
@ -66,16 +70,6 @@
<div class="gl_keep template">
<div id="codeEditor">
<div class="top-bar btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm options" role="group">
<button title="Colourise lines so one can see how the source maps to the output"
class="btn btn-default btn-sm active" data-bind="colouriseAsm">
<span class="glyphicon glyphicon-adjust"></span>
</button>
<button title="Run the compilers automatically as you type"
class="btn btn-default btn-sm active" data-bind="compileOnChange">
<span class="glyphicon glyphicon-play-circle"></span>
</button>
</div>
<div class="btn-group btn-group-sm">
<button title="Decrease font size"
class="btn btn-default btn-sm decrease-font-size">
@ -302,5 +296,34 @@ int square(int num) {
<!-- /.modal-dialog -->
</div>
<div class="modal fade gl_keep" id="settings">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Compiler Explorer Settings</h4>
</div>
<div class="modal-body">
<div>These settings control how Compiler Explorer acts for you. They are not preserved as part of shared
URLs, and are persisted locally using browser local storage.
</div>
<div class="form-group options" role="group">
<div class="checkbox"><label><input type="checkbox" class="colourise">Colourise lines so one can see how the source
maps to the output</label></div>
<div>Delay before compiling:&nbsp;<b>Disabled</b>
<div class="slider slider-horizontal delay"></div>
<b>3s</b></div>
</div>
</div>
<!-- model-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>

18
static/main.js

@ -38,18 +38,21 @@ require.config({
'raven-js': 'ext/raven-js/dist/raven',
'es6-promise': 'ext/es6-promise/es6-promise',
'lru-cache': 'ext/lru-cache/lib/lru-cache',
'vs': "ext/monaco-editor/min/vs"
'vs': "ext/monaco-editor/min/vs",
'bootstrap-slider': 'ext/seiyria-bootstrap-slider/dist/bootstrap-slider'
},
shim: {
underscore: {exports: '_'},
'lru-cache': {exports: 'LRUCache'},
bootstrap: ['jquery']
bootstrap: ['jquery'],
'bootstrap-slider': ['bootstrap']
}
});
define(function (require) {
"use strict";
require('bootstrap');
require('bootstrap-slider');
var analytics = require('analytics');
var sharing = require('sharing');
var _ = require('underscore');
@ -60,6 +63,7 @@ define(function (require) {
var clipboard = require('clipboard');
var Hub = require('hub');
var Raven = require('raven-js');
var settings = require('./settings');
function start() {
analytics.initialise();
@ -147,6 +151,16 @@ define(function (require) {
new clipboard('.btn.clippy');
settings($('#settings'), function () {
return JSON.parse(window.localStorage.getItem('settings'));
}(), function (settings) {
try {
window.localStorage.setItem('settings', JSON.stringify(settings));
} catch (e) {
}
layout.eventHub.emit('settingsChange', settings);
});
sharing.initShareButton($('#share'), layout);
$('#ui-reset').click(function () {
window.localStorage.removeItem('gl');

66
static/settings.js

@ -0,0 +1,66 @@
// Copyright (c) 2012-2017, Matt Godbolt
//
// 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.
define(function (require) {
var _ = require('underscore');
function setupSettings(root, settings, onChange) {
settings = settings || {};
if (settings.delayAfterChange === undefined)
settings.delayAfterChange = 750;
if (settings.colouriseAsm === undefined)
settings.colouriseAsm = true;
root.find('.slider').slider({
value: settings.delayAfterChange,
max: 3000,
step: 250,
formatter: function (x) {
if (x === 0) return "Disabled";
return (x / 1000.0).toFixed(2) + "s";
}
});
function onSettingsChange(settings) {
root.find('.colourise').prop('checked', settings.colouriseAsm);
root.find('.slider').slider('setValue', settings.delayAfterChange);
onChange(settings);
}
function onUiChange() {
var settings = {};
settings.colouriseAsm = !!root.find('.colourise').prop('checked');
settings.delayAfterChange = root.find('.slider').slider('getValue');
onChange(settings);
}
root.find('.colourise').change(onUiChange);
root.find('.slider').change(onUiChange);
onSettingsChange(settings);
}
return setupSettings;
});
Loading…
Cancel
Save