feat(editor): F4.6d the web browser and web server on a computer's desktop

The oracle BrowserWindowRun uses Java's browser and web server windows as a
person does; the room keeps a browser window per computer and sends a
program window's view, the start names the person's language. The editor
shows the page in a sandboxed frame, links and forms go to the room, the web
server has its button, virtual hosts and lines. Better than Java: relative
images and links count from the page's folder, a mark stays in the page, the
error page from Java's template, the virtual hosts' file with complete rows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-03 16:09:05 +00:00
co-authored by Claude Opus 5.5
parent f0e7c73ec7
commit aa54e5400e
31 changed files with 2773 additions and 55 deletions
+157
View File
@@ -379,3 +379,160 @@
padding: 0 16px;
flex: none;
}
/* The web browser (GUIApplicationWebBrowserWindow): the address line with
* its button above the page, five pixels around each as in Java; the page
* in a frame of its own on white. */
.browser {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: #eeeeee;
font: 13px Dialog, sans-serif;
}
.browser-address {
display: flex;
gap: 5px;
flex: none;
padding: 5px;
}
.browser-address input {
flex: 1;
min-width: 0;
min-height: 36px;
padding: 0 6px;
border: 1px solid #a0a0a0;
background: #ffffff;
color: #000000;
font: 16px Dialog, sans-serif;
}
.browser-address button,
.web-server-bar button {
min-width: 44px;
min-height: 36px;
padding: 0 14px;
border: 1px solid #a0a0a0;
border-radius: 6px;
background: #f8f8f8;
color: #000000;
font: 13px Dialog, sans-serif;
cursor: pointer;
}
.browser-page {
flex: 1;
min-height: 0;
margin: 0 5px 5px;
display: flex;
background: #ffffff;
border: 1px solid #a0a0a0;
}
.browser-page iframe {
flex: 1;
width: 100%;
border: none;
background: #ffffff;
}
.browser-start {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
}
.browser-start img {
max-width: 100%;
}
/* The web server (GUIApplicationWebServerWindow): the button and the check
* box above, the virtual hosts' table while it is ticked, the lines below. */
.web-server {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 5px 10px 10px;
background: #eeeeee;
color: #000000;
font: 13px Dialog, sans-serif;
}
.web-server-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 24px;
flex: none;
}
.web-server-bar label {
display: flex;
align-items: center;
gap: 6px;
min-height: 44px;
cursor: pointer;
}
.web-server-bar input[type='checkbox'] {
width: 20px;
height: 20px;
}
.web-server-hosts {
display: flex;
flex-direction: column;
gap: 5px;
flex: none;
}
.web-server-hosts table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background: #ffffff;
}
.web-server-hosts th {
padding: 4px;
border: 1px solid #a0a0a0;
background: #e4e4e4;
font-weight: normal;
text-align: left;
}
.web-server-hosts td {
padding: 0;
border: 1px solid #c0c0c0;
}
.web-server-hosts td input {
width: 100%;
min-height: 32px;
box-sizing: border-box;
padding: 0 5px;
border: none;
background: transparent;
color: #000000;
font: 16px Dialog, sans-serif;
}
.web-server-log {
flex: 1;
min-height: 120px;
margin: 0;
overflow: auto;
padding: 4px;
border: 1px solid #a0a0a0;
background: #ffffff;
font: 12px ui-monospace, Menlo, Consolas, monospace;
white-space: pre-wrap;
overflow-wrap: anywhere;
user-select: text;
}