Browse Source

Work in progress on resizable editors

dev/git-series/gccdum
Matt Godbolt 7 years ago
parent
commit
889cf2795f
  1. 1
      .idea/libraries/gcc_explorer_node_modules.xml
  2. 4
      .idea/misc.xml
  3. 68
      static/compiler.js
  4. 21
      static/gcc.css
  5. 8
      static/gcc.js
  6. 36
      static/index.html

1
.idea/libraries/gcc_explorer_node_modules.xml

@ -9,7 +9,6 @@
<CLASSES>
<root url="file://$PROJECT_DIR$/node_modules" />
</CLASSES>
<JAVADOC />
<SOURCES />
</library>
</component>

4
.idea/misc.xml

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" assert-keyword="false" jdk-15="false" />
</project>

68
static/compiler.js

@ -276,7 +276,8 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
_gaq.push(['_trackEvent', 'Compile', request.compiler, request.options, data.code]);
_gaq.push(['_trackTiming', 'Compile', 'Timing', new Date() - request.timestamp]);
}
slot.node.find('.result .output :visible').remove();
var outputRoot = slot.node.find('.result .output');
outputRoot.find(':visible').remove();
// only show in Editor messages comming from the leaderSlot
var i;
if (slot.id == leaderSlot) {
@ -292,7 +293,7 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
msg = "Too many output lines...truncated";
}
numLines++;
var elem = slot.node.find('.result .output .template').clone().appendTo(slot.node.find(' .result .output')).removeClass('template');
var elem = outputRoot.find('.template').clone().appendTo(outputRoot).removeClass('template');
if (lineNum) {
// only show messages coming from the leaderSlot in the Editor
if (slot.id == leaderSlot) {
@ -877,19 +878,6 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
});
}
function setEditorHeight(height) {
const MinHeight = 80;
if (height < MinHeight) height = MinHeight;
cppEditor.setSize(null, height);
var i;
for (i = 0; i < slots.length; i++) {
slots[i].asmCodeMirror.setSize(null, height);
}
for (i = 0; i < diffs.length; i++) {
diffs[i].asmCodeMirror.setSize(null, height);
}
}
// External wrapper used by gcc.js only
function refreshSlot(slot) {
onCompilerChange(slot);
@ -1116,9 +1104,6 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
// source : JQuery UI examples
var panelList = $('#draggablePanelList');
panelList.sortable({
// Do not set the new-slot button sortable (nor a place to set windows)
items: "li:not(.panel-sortable-disabled)", // source : JQuery examples
// Omit this to make then entire <li>...</li> draggable.
handle: '.panel-heading',
update: function () {
$('.panel', panelList).each(function (index, elem) {
@ -1129,6 +1114,15 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
});
}
});
$('.resizable:visible').resizable(
{
resize: resizeOutputs,
minHeight: 300,
minWidth: 300,
alsoResize: ".resizable:visible"
}
);
$('.resizable-e:visible').resizable({handles: 'e'});
}
function slotDomCtor(slot, onUserAction) {
@ -1222,11 +1216,20 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
}
}
function ensureAllSlotsSameSize() {
var allResizable = $('.resizable:visible');
var w = allResizable.width();
var h = allResizable.height();
allResizable.width(w);
allResizable.height(h);
}
function createAndPlaceSlot(compilers, defaultCompiler, optionalId, onUserAction) {
var newSlot = slotCtor(optionalId);
slotDomCtor(newSlot, onUserAction);
slotUseDom(newSlot);
setCompilersInSlot(compilers, defaultCompiler, newSlot);
ensureAllSlotsSameSize();
return newSlot;
}
@ -1234,6 +1237,7 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
var newDiff = diffCtor(optionalId);
diffDomCtor(newDiff, onUserAction);
diffUseDom(newDiff);
ensureAllSlotsSameSize();
return newDiff;
}
@ -1404,15 +1408,39 @@ function Compiler(domRoot, origFilters, windowLocalPrefix,
}
}
function resizeOutputs() {
function doResize(cm) {
var parent = $(cm.getTextArea()).parent().find(".CodeMirror");
var container = parent.closest(".panel");
var containerSize = container.height();
var top = parent.position().top;
cm.setSize(null, containerSize - top);
console.log(containerSize, top);
}
_.each(slots, function(slot) { doResize(slot.asmCodeMirror); });
_.each(diffs, function(slot) { doResize(slot.asmCodeMirror); });
}
function resize(windowHeight) {
var editor = $(cppEditor.getTextArea()).parent();
var top = editor.offset().top;
var compOutputSize = Math.max(100, windowHeight * 0.05);
$('.output').height(compOutputSize);
var resultHeight = $('.result').height();
var height = windowHeight - top - resultHeight - 10;
cppEditor.setSize(null, height);
resizeOutputs();
}
return {
serialiseState: serialiseState,
deserialiseState: deserialiseState,
getSource: getSource,
setSource: setSource,
setFilters: setFilters,
setEditorHeight: setEditorHeight,
createAndPlaceSlot: createAndPlaceSlot,
createAndPlaceDiffUI: createAndPlaceDiffUI,
refreshSlot: refreshSlot
refreshSlot: refreshSlot,
resize: resize
};
}

21
static/gcc.css

@ -41,7 +41,7 @@ body {
}
.compiler-options {
margin-left: 10px; // space between the scroll-down and the compiler's options
margin-left: 10px; /* space between the scroll-down and the compiler's options */
width: 100%;
}
@ -195,7 +195,6 @@ li.social {
font-weight: bold;
}
/* Only one of these class is currently used on index.html but just in case
* we change it, it is already tuned */
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4,
@ -212,7 +211,7 @@ li.social {
}
.panel-primary {
border-color: #000;
border-color: #000;
}
.panel-body {
@ -229,10 +228,10 @@ li.social {
.panel-modest,
.panel-modest .panel-body {
display: inline-block;
}
display: inline-block;
}
.unselectable{
.unselectable {
/* disable text selection on character icons
* source : http://stackoverflow.com/a/9314458/4669135 */
-webkit-touch-callout: none;
@ -274,11 +273,15 @@ li.social {
float: right;
}
.diff-before-button {
background-color: rgba(251,175,175,.7);
background-color: rgba(251, 175, 175, .7);
}
.diff-after-button {
background-color: rgba(151,234,151,.6);
background-color: rgba(151, 234, 151, .6);
}
.well-tiny {
padding: 2px;
border-radius: 2px;
}

8
static/gcc.js

@ -299,14 +299,8 @@ function loadState(state) {
}
function resizeEditors() {
var codeMirrors = $('.CodeMirror');
var top = codeMirrors.offset().top;
var windowHeight = $(window).height();
var compOutputSize = Math.max(100, windowHeight * 0.05);
$('.output').height(compOutputSize);
var resultHeight = $('.result').height();
var height = windowHeight - top - resultHeight - 90;
currentCompiler.setEditorHeight(height);
_.each(allCompilers, function (compiler) { compiler.resize(windowHeight); });
}
function initialise(options) {

36
static/index.html

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="ext/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet">
<link href="ext/codemirror/codemirror.css" rel="stylesheet">
<link href="gcc.css" rel="stylesheet">
<script src="client-options.js"></script>
@ -101,8 +102,7 @@
</div>
<div class="container-fluid">
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-primary col-md-3">
<div class="panel panel-primary col-md-5 resizable-e">
<div class="panel-heading"><span class="title">Code editor</span></div>
<div class="panel-body">
<div id="commonParams">
@ -110,8 +110,8 @@
<div>
<label>Source: <select class="source"></select></label>
<label>Name: <select class="filename"></select></label>
<button id="new-slot" class="btn btn-sm" title="Open a new slot.">New slot</button>
<button id="new-diff" class="btn btn-sm" title="Open a new diff.">New diff</button>
<button id="new-slot" class="btn btn-sm" title="Open a new compiler output slot">New slot</button>
<button id="new-diff" class="btn btn-sm" title="Open a new difference slot">New diff</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-sm load">Load</button>
@ -132,7 +132,7 @@
</button>
<button class="btn btn-sm active nonbinary" type="button"
title="Remove all lines which are only comments from the output" value="commentOnly">
Comment-only lines
Comment-only lines
</button>
<button class="btn btn-sm" type="button" title="Output disassembly in Intel syntax"
value="intel">Intel syntax
@ -167,6 +167,14 @@
</div>
<textarea>// Type your code here, or load an example.</textarea>
</div>
<div class="output">
<div class="result">
<div class="topbar">TODO: Compiler output &mdash; <span class="compilerVersion"></span></div>
<div class="output">
<div class="template"></div>
</div>
</div>
</div>
<div class="modal fade" id="saveDialog">
<div class="modal-dialog">
@ -187,21 +195,22 @@
</div>
</div>
</div>
</li>
<li class="panel panel-primary col-md-3 template slot" id="slotTemplate">
</div>
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-primary col-md-3 resizable template slot" id="slotTemplate">
<div class="panel-heading">
<span class="title">Slot template (should *not* be visible)</span>
<span class="closeButton unicodeCross unselectable characterIcon">&#10006;</span>
</div>
<div class="panel-body">
<div class="params">
<form class="well well-sm form-inline">
<form class="well well-tiny form-inline">
<table>
<tbody>
<tr>
<td>
<p class="leaderSlotIcon unselectable characterIcon unselectedCharacterIcon">&#9734;</p>
</td>
<td class="dropdown compilers-container">
<!-- the accesskey is set in static/compiler.js -->
<button accesskey="" type="button" title="Compiler to use (alt-C)" class="btn btn-default dropdown-toggle compiler-selection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@ -218,16 +227,17 @@
</tr>
</tbody>
</table>
<!-- Place slot-specific buttons here.
<div class="btn-group btn-group-sm filter">
<!-- Place slot-specific buttons here. -->
</div>
-->
</form>
</div>
<div class="asm">
<div class="topbar indented">Assembly output</div>
<textarea>Awaiting...</textarea>
</div>
<div class="output">
<div class="output hidden">
<div class="result">
<div class="topbar">Compiler output &mdash; <span class="compilerVersion"></span></div>
<div class="output">
@ -237,11 +247,11 @@
</div>
</div>
<li class="panel panel-primary col-md-3 template diff" id="diffTemplate">
<li class="panel panel-primary col-md-3 resizable template diff" id="diffTemplate">
<div class="panel-heading"><span class="title">Diff template (should *not* be visible)</span><span class="closeButton unicodeCross unselectable characterIcon">&#10006;</span></div>
<div class="panel-body">
<div class="params">
<form class="well well-sm form-inline">
<form class="well well-tiny form-inline">
<table>
<tbody>
<tr>

Loading…
Cancel
Save