/* cdp-measure-cols2.mjs — 对照实验：移除 th-title width 后标题列实际宽度（09-01）
 * 验证假设：auto 布局下 th 设 width 240 钳制了列宽；不设时剩余空间分配使标题列更宽
 */
const CDP = 'http://127.0.0.1:9223';
async function getWs(targetId) {
  const tabs = await (await fetch(CDP + '/json')).json();
  const t = tabs.find((x) => x.id === targetId);
  if (!t) throw new Error('target not found: ' + targetId);
  return t.webSocketDebuggerUrl;
}
function cdp(ws, method, params = {}) {
  return new Promise((resolve, reject) => {
    const id = ++cdp._id;
    const w = new WebSocket(ws);
    const timer = setTimeout(() => { try { w.close(); } catch (e) {} reject(new Error('timeout: ' + method)); }, 30000);
    w.onopen = () => w.send(JSON.stringify({ id, method, params }));
    w.onmessage = (ev) => {
      const m = JSON.parse(ev.data);
      if (m.id !== id) return;
      clearTimeout(timer);
      try { w.close(); } catch (e) {}
      m.error ? reject(new Error(method + ': ' + JSON.stringify(m.error))) : resolve(m.result);
    };
    w.onerror = () => { clearTimeout(timer); reject(new Error('ws error: ' + method)); };
  });
}
cdp._id = 0;
async function evalJs(ws, expr) {
  const r = await cdp(ws, 'Runtime.evaluate', { expression: expr, awaitPromise: true, returnByValue: true });
  if (r.exceptionDetails) throw new Error('eval err: ' + JSON.stringify(r.exceptionDetails).slice(0, 300));
  return r.result && r.result.value;
}
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

async function main() {
  const tabs = await (await fetch(CDP + '/json')).json();
  const tab = tabs.find((x) => x.url.includes('localhost:8900')) || tabs.find((x) => x.type === 'page');
  if (!tab) throw new Error('no 8900 tab found');
  const ws = await getWs(tab.id);
  await cdp(ws, 'Page.enable');
  await cdp(ws, 'Runtime.enable');
  await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=measure2' + '#/account/3' });
  await sleep(2500);
  const measure = `(() => {
    const ths = [...document.querySelectorAll('.table thead th')];
    const w = (el) => el ? Math.round(el.getBoundingClientRect().width) : -1;
    const obj = {};
    ths.forEach((t) => { obj[t.textContent.trim()] = { w: w(t), cls: t.className }; });
    return obj;
  })()`;
  const base = await evalJs(ws, measure);
  console.log('当前(th width 240):', JSON.stringify(base, null, 1));
  // 实验1：移除 th-title / th-pub 的 width（恢复 auto）
  await evalJs(ws, `(() => {
    const st = document.createElement('style');
    st.id = 'exp';
    st.textContent = 'th.th-title{width:auto!important;min-width:0!important} th.th-pub{width:auto!important}';
    document.head.appendChild(st);
    return true;
  })()`);
  await sleep(300);
  const exp1 = await evalJs(ws, measure);
  console.log('实验1(th width auto):', JSON.stringify(exp1, null, 1));
  // 实验2：th min-width 240（不设上限 width）
  await evalJs(ws, `(() => {
    const st = document.getElementById('exp');
    st.textContent = 'th.th-title{width:auto!important;min-width:240px!important} th.th-pub{width:130px!important}';
    return true;
  })()`);
  await sleep(300);
  const exp2 = await evalJs(ws, measure);
  console.log('实验2(th min-width 240):', JSON.stringify(exp2, null, 1));
  process.exit(0);
}
main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });