serenity

serenity copied to clipboard

we can't login into discord because multi-factor auth form is not visible.

so far I found:

• the form is invisible because we clip the overflow of the div that wraps form with a rectangle of 0px height
• clip rectangle has 0 px height because some js code assigns incorrect height of 0px (inline style) to div that wraps the form
• calls to getClientRects(), getBoundingClientRect(), Element.clientHeight, and Element.scrollHeight do not seem to be used by the js code to identify the height of the form, which would then be assigned as an inline style to the wrapping div.

This seems to be a lack of ResizeObserver support, as it uses that to work out the width and height it should use for the containing element pointed at in the image:

function r() {
    for (var e = arguments.length, t = Array(e), n = 0; n < e; n++) t[n] = arguments[n];
    let [r, s] = i.useState(void 0), [a, o] = i.useState(void 0), l = i.useRef(null);
    return i.useLayoutEffect(() => {
        let e = l.current,
            t = null == e ? void 0 : e.ownerDocument.defaultView;
        if (null != e && null != t) {
            let n = new t.ResizeObserver(e => {
                var t, n, i, r, a, u;
                let c = e[0],
                    d = null == c ? void 0 : null === (n = c.borderBoxSize) || void 0 === n ? void 0 : null === (t = n[0]) || void 0 === t ? void 0 : t.inlineSize,
                    f = null == c ? void 0 : null === (r = c.borderBoxSize) || void 0 === r ? void 0 : null === (i = r[0]) || void 0 === i ? void 0 : i.blockSize;
                if (null == d || null == f) {
                    let e = l.current;
                    if (null != e) {
                        let t = window.getComputedStyle(e);
                        null == d && (d = parseFloat(null !== (a = t.width) && void 0 !== a ? a : "0")), null == f && (f = parseFloat(null !== (u = t.height) && void 0 !== u ? u : "0"))
                    }
                }
                s(d), o(f)
            });
            return n.observe(e), () => n.disconnect()
        }
    }, [l.current, ...t]), {
        ref: l,
        width: r,
        height: a
    }
}

https://github.com/SerenityOS/serenity/blob/fc8f6c07b463526b03a77a1ecd4b0984bc721962/Userland/Libraries/LibWeb/ResizeObserver/ResizeObserver.cpp#L37-L55