Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website:Spacing and collapsable options #156

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Website:Spacing and collapsable options #156

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 148 additions & 107 deletions website.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ def print_headers(content_type: str) -> None:
</head>
"""
)
print("<body><pre><plaintext>", end="")
print("<body><pre><plaintext>", end="") # assuming this is the result page, any chance of adding rough syntax highlighting?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is, and yeah, that sounds like something we should do. Could probably use pygments

print(res.stdout.decode("utf-8", "replace"))
elif "?go" in os.environ.get("REQUEST_URI", ""):
print_headers(content_type="text/html")
Expand All @@ -133,129 +133,170 @@ def print_headers(content_type: str) -> None:
"""
<!DOCTYPE html><html>
<head>
<style>
* {
box-sizing: border-box;
}
html, body, form, .main, .sidebar {
margin: 0;
height: 100%;
}
textarea, .sidebar iframe {
width: 100%;
height: 100%;
border: 1px solid #bbb;
margin: 1px 0;
}
label {
white-space: nowrap;
}
[data-regvars]:not([data-regvars=custom]) [name=regvars] {
display: none;
}
[name=regvars] {
width: 150px;
}
.main, .sidebar {
display: flex;
flex-direction: column;
padding: 10px;
}
.sidebar {
display: none;
}
.has-sidebar form {
display: flex;
flex-direction: row;
}
.has-sidebar .main, .has-sidebar .sidebar {
flex: 1;
}
.has-sidebar .sidebar {
display: flex;
}
.dark-theme {
background-color: #2d2d2d;
color: #c0c0c0;
}
.dark-theme div,
.dark-theme body,
.dark-theme form,
.dark-theme textarea {
background-color: rgba(255, 255, 255, 0.0225);
color: #c0c0c0;
box-shadow: 1px 1px 10px 0px black;
}
</style>

<style>
* {
box-sizing: border-box;
}
div{
padding:16px
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabs -> spaces, and try to match existing style wrt spacing/semicolons:

div {
    padding: 16px;
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a lot of padding on my small/zoomed in screen, and in "Output Sidebar" mode it makes the left hand sign misaligned from the right hand side.

Would increasing the 12px of padding on .main, .sidebar be enough to get the effect you're going for?

2021-10-22-125204_1919x1015_scrot

}
html, body, form, .main, .sidebar {
margin: 0;
height: 100%;
}
textarea, .sidebar iframe {
width: 100%;/*calc(100% - 16px);*/
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove commented-out code

height: calc(100% - (1em + 16px));
border: 1px solid #888;
m//argin: 8px ;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a quickly removed attribute

}

label {
white-space: nowrap;
}
[data-regvars]:not([data-regvars=custom]) [name=regvars] {
display: none;
}
[name=regvars] {
width: 150px;
}
.main, .sidebar {
display: flex;
flex-direction: column;
padding: 10px;
margin:0px 4px;
}
.sidebar {
display: none;
}
.has-sidebar form {
display: flex;
flex-direction: row;
}
.has-sidebar .main, .has-sidebar .sidebar {
flex: 1;
}
.has-sidebar .sidebar {
display: flex;
}
.dark-theme {
background-color: #000;
color: #ccc;
}
.dark-theme div,
.dark-theme body,
.dark-theme form,
.dark-theme textarea {
background-color: rgba(255, 255, 255, 0.06225);
color: #c0c0c0;
}
.dark-theme div
{
box-shadow: 1px 1px 10px 0px black;
}
#options
{
overflow:scroll;box-shadow:none;background-color:inherit;display:flex;flex-wrap: wrap; flex:1; flex-basis: 300px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

line-wrap this

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least on chrome, I couldn't get this div to overflow: the div would always expand to fit all of the contents.

I tried googling/playing around with some different properties, but couldn't get anything to work (other than specifying a height, which seems worse).

Does the div ever become scrollable on a different browser? Otherwise overflow: scroll can be removed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was tetsing various ideas, I originally had a height but got rid of it.
the formatting is because of mixing manual typing with "F12 Dev Tools"

}
input[type=submit]
{
color:white;
Background-color:#282;
border:2px #282 outset;
font-weight:bold;
float:right;
}
input[type=submit]:focus {
border:2px #4f4 outset;
}
select
{

}
label
{
flex:1;flex-basis: 250px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the flex: 1; here should be removed. As-is, if there are an unequal number of cells per row, the final row looks misaligned?

With flex: 1;
2021-10-22-124133_861x160_scrot

Without flex: 1;
2021-10-22-123805_819x229_scrot

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually have no idea how flex works, I just worked from examples in the page, but your second image is far better and the exact effect I was going for.
I was also trying to align the dropdowns but to no avail...

}
.keyword{color:blue;}
.opperator{color:grey}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unused

</style>
</head>
<body>
<form action="?go" method="post">
<div class="main">
<div>
<div style="flex: 15;">
MIPS assembly:
</div>
<div style="flex: 20;">
<br>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think <br> is considered a bit dated, and a wrapper div makes it easier to changing spacing in various ways, so I'd prefer keeping it the way it was.

Right now div also has the side-effect of creating a box with a box-shadow, but we can fix that by creating a class for it and not applying the class to this particular div.

<textarea name="source" spellcheck="false"></textarea>
</div>
<div style="margin-top: 10px;">
<br>
<div style="flex: 11;">
Existing C source, preprocessed (optional):
</div>
<div style="flex: 11;">
<br>
<textarea name="context" spellcheck="false"></textarea>
</div>
<div style="margin-top: 10px;" id="options">
<br>
<div>
<input type="submit" value="Decompile">
<input type="submit" name="visualize" value="Visualize">
<label>Function: <select name="functionselect"></select></label>
</label>
<label>Global declarations:
<select name="globals">
<option value="used">used</option>
<option value="all">all</option>
<option value="none">none</option>
</select>
</label>
<label>Original Compiler:
<select name="compiler">
<option value="ido">ido</option>
<option value="gcc">gcc</option>
</select>
</label>
<label>Comment style:
<select name="comment_style">
<option value="multiline">/* ... */, aligned</option>
<option value="multiline_unaligned">/* ... */, unaligned</option>
<option value="oneline">// ..., aligned</option>
<option value="oneline_unaligned">// ..., unaligned</option>
</select>
</label>
<label>Use single var for:
<select name="regvarsselect">
<option value="none">none</option>
<option value="saved">saved regs</option>
<option value="all">all regs</option>
<option value="custom">custom</option>
</select>
</label>
<input name="regvars" value="">
<label><input type="checkbox" name="void">Force void return type</label>
<label><input type="checkbox" name="debug">Debug info</label>
<label><input type="checkbox" name="noandor">Disable &amp;&amp;/||</label>
<label><input type="checkbox" name="nocasts">Hide type casts</label>
<label><input type="checkbox" name="allman">Allman braces</label>
<label><input type="checkbox" name="leftptr">* to the left</label>
<label><input type="checkbox" name="noifs">Use gotos for everything</label> (to use a goto for a single branch, add "# GOTO" to the asm)
<label><input type="checkbox" name="usesidebar">Output sidebar</label>
<label><input type="checkbox" name="dark">Dark mode</label>
<details open="">
<summary>Options</summary>
<div id="options">
<label>Function:
<select name="functionselect">
</select>
</label>

<label>Global declarations:
<select name="globals">
<option value="used">used</option>
<option value="all">all</option>
<option value="none">none</option>
</select>
</label>
<label>Original Compiler:
<select name="compiler">
<option value="ido">ido</option>
<option value="gcc">gcc</option>
</select>
</label>
<label>Comment style:
<select name="comment_style">
<option value="multiline">/* ... */, aligned</option>
<option value="multiline_unaligned">/* ... */, unaligned</option>
<option value="oneline">// ..., aligned</option>
<option value="oneline_unaligned">// ..., unaligned</option>
</select>
</label>
<label>Use single var for:
<select name="regvarsselect">
<option value="none">none</option>
<option value="saved">saved regs</option>
<option value="all">all regs</option>
<option value="custom">custom</option>
</select>
</label>
<input name="regvars" value="">
<br>
<label><input type="checkbox" name="void">Force void return type</label>
<label><input type="checkbox" name="debug">Debug info</label>
<label><input type="checkbox" name="noandor">Disable &amp;&amp;/||</label>
<label><input type="checkbox" name="nocasts">Hide type casts</label>
<label><input type="checkbox" name="allman">Allman braces</label>
<label><input type="checkbox" name="leftptr">* to the left</label>
<label><input type="checkbox" name="noifs">Use gotos for everything</label>
<label><input type="checkbox" name="usesidebar">Output sidebar</label>
<label><input type="checkbox" name="dark">Dark mode</label>
<p>Notes:<br> to use a goto for a single branch, add "# GOTO" to the asm</p>
</div>
</details>
</div>
</div>
<div class="sidebar">
<div>
Output:
</div>
<div style="flex: 1;">
<br>
<iframe src="about:blank" name="outputframe"></iframe>
</div>
</div>
<script>
var formEl = document.getElementsByTagName("form")[0]
Expand Down