ID:1672538
 
Resolved
The size parameter in browse() is now respected, up to 75% of the screen width/height.
BYOND Version:507
Operating System:Windows 8 Pro 64-bit
Web Browser:Chrome 37.0.2062.103
Applies to:Webclient
Status: Resolved (507.1254)

This issue has been resolved.
Descriptive Problem Summary:
The webclient is ignoring the size parameter in the browse() proc.

Maybe id:1670091 could also be worked on as a larger popup will not fit on the small screen space available for games.

Numbered Steps to Reproduce Problem:
1. Use the code snippet below.
2. CTRL-ALT-Click an object on the screen.
3. A popup opens in 400x400 instead of 640x480.

Code Snippet (if applicable) to Reproduce Problem:
/proc/editableLists()
return world.contents

/client/verb/vEdit(var/datum/object as anything in editableLists())
set name = "edit"
var/html = "<!DOCTYPE html><html lang=\"en\"><head><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /><title>Edit \"["\proper[object]"]\"</title>\
<style type=\"text/css\">*{box-sizing:border-box}input{width:100%;border:1px solid #DCDCDC;padding: 4px}::-ms-clear{display:none}::-ms-reveal{display:none;}body{font-family:Arial;font-size:12px;overflow-y:scroll}body{margin:0px}table{width:100%;border-spacing:0px;border-collapse:collapse;table-layout:fixed}td,th{padding:4px 8px;vertical-align:top}th{text-align:left;}thead th{border:1px solid #000;border-left-width:0px;border-right-width:0px;}td>div{overflow:hidden;text-overflow:ellipsis;}span,a{cursor:pointer;color:#007FDC}th.a>span,th.b>span,a:visited{color:#DC00CA}th.b>span{text-decoration:underline;}</style>\
<script type=\"text/javascript\">function sortTable(table, col, reverse){var tb=table.tBodies\[0],tr=Array.prototype.slice.call(tb.rows,0),i;reverse=-((+reverse)||-1);tr=tr.sort(function(a,b){return reverse*(a.cells\[col\].textContent.trim().localeCompare(b.cells\[col\].textContent.trim()));});for(i=0;i<tr.length;++i){tb.appendChild(tr\[i])}var th=table.tHead;th&&(th=th.rows\[0\])&&(th=th.cells);for(i=th.length-1;i>=0;i--){th\[i\].className=(i==col?(reverse==1?\"b\":\"a\"):\"\")}}function makeSortable(table){var th=table.tHead,i,dir,currentcol;th&&(th=th.rows\[0])&&(th=th.cells);if(th){i=th.length}else{return}while(--i>=0)(function(i){th\[i\].innerHTML=\"<span>\"+th\[i\].innerHTML+\"</span>\";th\[i\].childNodes\[0\].addEventListener(\"click\", function(){dir=(currentcol==i?1-dir:0);currentcol=i;sortTable(table, i, dir)})}(i));th\[0\].childNodes\[0\].click()}function makeAllSortable(parent){parent=parent||document.body;var t=parent.getElementsByTagName(\"table\"),i=t.length;while(--i>=0){makeSortable(t\[i])}}\
var filter1,filter2; function filter(){ var rows = document.getElementById(\"t\").tBodies\[0\].rows; for (var i = 0; i < rows.length; i++){ rows\[i\].style.display=((!filter1||rows\[i\].childNodes\[0\].innerText.indexOf(filter1)>-1)&&(!filter2||rows\[i\].childNodes\[1\].innerText.indexOf(filter2)>-1||rows\[i\].childNodes\[2\].innerText.indexOf(filter2)>-1)?\"table-row\":\"none\"); } }\
</script>"
+ "</head><body onload=\"makeAllSortable()\">"

html = html + "<div style=\"background:#FFF;position:fixed;top:0px;left:0px;right:0px;padding-top:1px;\"><div style=\"display:inline-block;width:250px;margin-left:8px;\"><input type=\"text\" onkeyup=\"filter1=this.value;filter();\" placeholder=\"Filter on variable\"/></div><div style=\"display:inline-block;width:calc(100% - 250px - 24px - 100px);\"><input type=\"text\" id=\"filter\" onkeyup=\"filter2=this.value;filter();\" placeholder=\"Filter on value\" style=\"border-left: 0;\"/></div> <a href=\"byond://?src=\ref[object]&var_edit=select&select=true\">[src._vEdit_selected == object ? "deselect" : "select"]</a></div><table id=\"t\" style=\"margin-top: 24px;\"><colgroup><col width=\"250px\"/><col width=\"*\"/><col width=\"*\"/><col width=\"24px\"/></colgroup><thead onselectstart=\"return false\"><tr><th>Variable</th><th>Value</th><th r=\"true\">Default</th><th>S</th></tr></thead><tbody>"

var/value
var/default
var/const/ONMOUSEUP = "try{if(event.target.tagName!='A'){document.body.focus()}}catch(ex){}"
var/isClient = istype(object, /client)

for (var/variable in object.vars)
if (variable != "vars" && (!isClient || variable != "_vEdit_selected"))
value = _vEdit_getValue(object.vars[variable])
default = _vEdit_getValue(initial(object.vars[variable]))

html = html + "<tr><td><div onmouseup=\"[ONMOUSEUP]\"><a href=\"byond://?src=\ref[object]&var_edit=[url_encode(variable, 0)]\">[html_encode(variable)]</a></div></td><td><div onmouseup=\"[ONMOUSEUP]\">[value]</div></td><td><div onmouseup=\"[ONMOUSEUP]\">[default]</div></td><td>[issaved(object.vars[variable])?"T":"F"]</td></tr>"

html = html + "</tbody></table>"

html = html + "</body></html>"

src << browse(html, "window=var_edit_\ref[object];size=640x480")

/client/var/datum/_vEdit_selected

/client/proc/_vEdit_getType(value)
if (istext(value))
if (length(value) == 7 && copytext(value, 1, 2) == "#")
return "color"
else
return "text"
else if (isnum(value))
return "number"
else if (isicon(value))
return "icon"
else if (isfile(value))
return "file"
else if (ispath(value))
return "type path"
else if (istype(value, /list))
return "list"
else if (istype(value, /datum))
return "reference"
else if (isnull(value))
return "null"
else
return ""

/client/proc/_vEdit_getValue(value, include_type = 1)
var/datum/d = value
var/type = istype(value, /datum) ? d.type : _vEdit_getType(value)

if (istext(value))
if (length(value) == 7 && copytext(value, 1, 2) == "#")
. = "<font color=\"[value]\">["\proper[html_encode(value)]"]</font>"
else
. = "["\proper[html_encode(value)]"]"
else if (isnum(value))
. = "[value]"
else if (isicon(value))
. = "[value]"
else if (isfile(value))
. = "[value]"
else if (ispath(value))
. = "[value]"
else if (istype(value, /list))
. = "\["

var/first = TRUE
for (var/element in value)
if (!first) . = . + ", "
. = . + _vEdit_getValue(element, 0)
first = FALSE

. = . + "\]"
else if (istype(value, /datum) || istype(value, /client))
. = "<a href=\"byond://?src=\ref[value]&var_edit=edit&edit=true\">["\proper[html_encode(value)]"]</a>[include_type ? " <em>[d.type]</em>" : ""]"
include_type = FALSE
else if (isnull(value))
. = . + "&lt;null&gt;"
include_type = FALSE
else
. = . + "&lt;unknown&gt;"
include_type = FALSE

if (include_type) . = . + " <em>([type ? type : "unknown"])</em>"

return .

/client/proc/_vEdit_edit(variable, datum/object)
var/old_value = object.vars[variable]
var/new_value = _vEdit_prompt(variable, object.vars[variable], _vEdit_getType(object.vars[variable]), object)

if (new_value != "_<VEDIT_NO_VALUE>_")
object.vars[variable] = new_value

if (old_value != new_value)
src.vEdit(object)

/client/proc/_vEdit_prompt(variable, current_value, current_type, datum/object)
var/list/types = list("text", "number", "empty list", "file", "icon", "color", "type path", "reference", "set to initial value", "null")

if (!object) types.Remove("set to initial value")
if (src._vEdit_selected) types.Add("set to selected item (\"["\proper[src._vEdit_selected]"]\")")

var/type = input(src, "Specify desired type.", "Edit \"[variable]\"", current_type) as null|anything in types

if (type != null)
var/value

if (type == "set to initial value")
value = initial(object.vars[variable])
else if (type == "null")
value = null
else if (type == "empty list")
value = list()
else if (type == "set to selected item (\"["\proper[src._vEdit_selected]"]\")")
value = src._vEdit_selected
else
switch (type)
if ("text")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|text
if ("number")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|num
if ("file")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|file
if ("icon")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|icon
if ("color")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|color
if ("path")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|anything in typesof(/datum)
if ("reference")
value = input(src, "Specify new value.", "Edit \"[variable]\"", current_value) as null|anything in editableLists()

if (value == null) return "_<VEDIT_NO_VALUE>_"

return value

return "_<VEDIT_NO_VALUE>_"

/client/proc/_vEdit_topic(href_list[], hsrc)
var
datum/object = hsrc
variable = href_list["var_edit"]

if (variable == "select" && "select" in href_list)
src._vEdit_selected = src._vEdit_selected == object ? null : object
src.vEdit(object)
else if (variable == "edit" && "edit" in href_list)
src.vEdit(object)
else
if (istype(object.vars[variable], /list))
var/action = input(src, "Specify desired action.", "Edit \"[variable]\"") as null|anything in list("Add item to list", "Remove item from list", "Change variable type")
var/list/l = object.vars[variable]

switch (action)
if ("Add item to list")
var/value = _vEdit_prompt(variable, "", "", null)

if (value != "_<VEDIT_NO_VALUE>_")
l.Add(value)
src.vEdit(object)

if ("Remove item from list")
action = alert(src, "Specify desired method.", "Edit \"[variable]\"", "Select value from list", "Specify value to remove", "Cancel")

if (action != null && action != "Cancel")
var/value

if (action == "Select value from list")
value = input(src, "Specify item to remove.", "Edit \"[variable]\"") as null|anything in l
if (value == null) value = "_<VEDIT_NO_VALUE>_"
else
value = _vEdit_prompt(variable, "", "", null)

if (value != "_<VEDIT_NO_VALUE>_")
l.Remove(value)
src.vEdit(object)

if ("Change variable type")
_vEdit_edit(variable, object)
else
_vEdit_edit(variable, object)

/client/Click(atom/object, location, control, params)
params = params2list(params)
if (params["right"] && params["ctrl"] && params["alt"])
src.vEdit(object)
else
return ..()

/client/Topic(href, href_list[], hsrc)
if (hsrc && "var_edit" in href_list) src._vEdit_topic(href_list, hsrc)
else return ..()


Expected Results:
The popup should display in the appropriate size.

Actual Results:
The popup does not have the desired size.

Does the problem occur:
Every time? Or how often?
Every time.

Workarounds:
Creating a custom dialog may be a workaround, but is not a viable one for me as the above code is meant to be pasted into a random project without need for additional changes.
I should have documented that it isn't using the size parameter yet, but that's something I really should add. Obviously we don't want to overstep the screen size, but it'd be good to go with what the developer expects size-wise when we can.
Lummox JR resolved issue with message:
The size parameter in browse() is now respected, up to 75% of the screen width/height.