
Loading…
Safari: more compatible build, better popover sizing #477
@gorhill hmm, interesting. I'll have to look at the Firefox code more.
I've added vadi-popup.js for Safari and moved that popup-specific stuff out of vapi-common.js. Also, the mini library for size-change detection is now non-minified.
@chrisaljoudi On the Firefox branch many changes were added to the Safari code too, which are not pushed to the master here, but they're more up to date. For example the compatibility with Python2.
The idea behind using mutation observers was to achieve transparent behavior, since no extra elements will be added to the popup. As a result it removes the chance of interfering with the main application in any way.
no extra elements will be added to the popup
I realized this afterward reading the code, and really I am not sure what to think, so I leave it to the platform-specific code to decide. Your mutation observer is almost a noop, so I don't really fear an overhead problem -- despite the popup UI removing/adding a node on mouse move.
@gorhill @Deathamns sure, I get the logic.
It's up to you, I guess. Sure, the current way of listening adds two invisible children (which should also have no effect on the layout) — but it only fires on size changes (the mutation observer will fire on modifications to children that may not have effect on size).
In any case, it's up to you.
It's worth mentioning that if we do go back to mutation observers, we should probably still keep the changes to the size calculation from this pull (not hard coding the magic constants that are the initial size).
@chrisaljoudi as said I really don't have an opinion. On one side there is the extra overhead of mutation observer firing a lot compare to scroll event, on the other there is tampering with the popup UI which could be a problem in the future if adding some CSS rules which affect the added nodes. I just can't decide what is best. I will leave it to you two to decide.
- +0 −4 platform/safari/Info.plist
- +0 −42 platform/safari/vapi-common.js
- +45 −0 platform/safari/vapi-popup.js
- +7 −6 tools/make-safari-meta.py
| @@ -0,0 +1,45 @@ | ||
| +var whenSizeChanges = function(elm, callback) { | ||
| + var reset = function() { | ||
| + k.style.width = grow.offsetWidth + 10 + "px"; | ||
| + k.style.height = grow.offsetHeight + 10 + "px"; | ||
| + grow.scrollLeft = grow.scrollWidth; | ||
| + grow.scrollTop = grow.scrollHeight; | ||
| + shrink.scrollLeft = shrink.scrollWidth; | ||
| + shrink.scrollTop = shrink.scrollHeight; | ||
| + w = elm.offsetWidth; | ||
| + h = elm.offsetHeight; | ||
| + } | ||
| + var aux = document.createElement("div"); | ||
| + aux.style.cssText = "position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden"; | ||
| + aux.innerHTML = '<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\ | ||
| +<div style="position:absolute;left:0;top:0;"></div>\ | ||
| +</div>\ | ||
| +<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\ | ||
| +<div style="position:absolute;left:0;top:0;width:200%;height:200%"></div>\ | ||
| +</div>'; | ||
| + elm.appendChild(aux); | ||
| + var grow = aux.childNodes[0], | ||
| + k = grow.childNodes[0], | ||
| + shrink = aux.childNodes[1]; | ||
| + var w, h; | ||
| + reset(); | ||
| + grow.addEventListener("scroll", function() { | ||
| + (elm.offsetWidth > w || elm.offsetHeight > h) && callback(); | ||
| + reset(); | ||
| + }); | ||
| + shrink.addEventListener("scroll", function() { | ||
| + (elm.offsetWidth < w || elm.offsetHeight < h) && callback(); | ||
| + reset(); | ||
| + }); | ||
| +}; | ||
| +var onLoaded = function() { | ||
| + var body = document.body, popover = safari.self; | ||
| + var updateSize = function() { | ||
| + popover.width = body.offsetWidth; | ||
| + popover.height = body.offsetHeight; | ||
| + }; | ||
| + updateSize(); | ||
| + body.style.position = "relative"; // Necessary for size change detection | ||
| + whenSizeChanges(body, updateSize); | ||
| +}; | ||
| +window.addEventListener('load', onLoaded); |
No description provided.