<!DOCTYPE html>
  <script src="utils.js"></script>
  <title>Fenced frame content to report any changes in inner dimensions</title>

  <style>
    body {
      width: 500px;
      height: 500px;
      background: grey;
    }
  </style>
  <body>
    <script>
      let eventCount = 0;
      async function init() {
        const [resize_lock_inner_page_is_ready_key,
               resize_lock_resize_is_done_key,
               resize_lock_report_click_location_key,
               resize_lock_report_click_location_key_after_resize,
               resize_lock_report_click_location_key_after_resize_2] = parseKeylist();

        window.addEventListener('mousedown', async (event) => {
          eventCount++;
          let point = event.clientX + "," + event.clientY;
          if (eventCount == 1) {
            writeValueToServer(resize_lock_report_click_location_key, point);
            await nextValueFromServer(resize_lock_resize_is_done_key)
          } else if (eventCount == 2) {
            writeValueToServer(
              resize_lock_report_click_location_key_after_resize, point);
          } else {
            writeValueToServer(
              resize_lock_report_click_location_key_after_resize_2, point);
          }
        });

        writeValueToServer(resize_lock_inner_page_is_ready_key, "ready");
      }

      init();
    </script>
  </body>
</html>
