// Chrome 拡張機能（manifest V3）でプロセス情報を取得する例
// manifest.json に "permissions": ["processes"] が必要
 
// プロセス一覧の取得
chrome.processes.getProcessInfo(
  [], // 空配列 = 全プロセス
  true, // メモリ情報を含める
  (processes) => {
    for (const [pid, info] of Object.entries(processes)) {
      console.log(`PID: ${pid}`);
      console.log(`  Type: ${info.type}`);
      // type: "browser", "renderer", "gpu", "utility", "extension" 等
      console.log(`  CPU Usage: ${info.cpu.toFixed(2)}%`);
      console.log(`  Private Memory: ${(info.privateMemory / 1024 / 1024).toFixed(1)}MB`);
 
      // タブに関連付けられたプロセスの場合
      if (info.tasks) {
        info.tasks.forEach(task => {
          console.log(`  Task: ${task.title} (Tab ID: ${task.tabId})`);
        });
      }
    }
  }
);
 
// 特定のプロセスを監視（メモリリークの検出など）
function monitorRendererProcesses(intervalMs = 5000) {
  const history = new Map();
 
  setInterval(() => {
    chrome.processes.getProcessInfo([], true, (processes) => {
      for (const [pid, info] of Object.entries(processes)) {
        if (info.type !== 'renderer') continue;
 
        if (!history.has(pid)) {
          history.set(pid, []);
        }
        const memoryMB = info.privateMemory / 1024 / 1024;
        history.get(pid).push({
          timestamp: Date.now(),
          memory: memoryMB
        });
 
        // 直近10回分で50MB以上増加していたら警告
        const records = history.get(pid);
        if (records.length >= 10) {
          const oldest = records[records.length - 10].memory;
          const newest = records[records.length - 1].memory;
          if (newest - oldest > 50) {
            console.warn(
              `[Memory Leak?] PID ${pid}: ` +
              `${oldest.toFixed(1)}MB → ${newest.toFixed(1)}MB ` +
              `(+${(newest - oldest).toFixed(1)}MB)`
            );
          }
        }
      }
    });
  }, intervalMs);
}

// レンダラープロセス内のメインスレッドのパフォーマンスを監視する
 
// Long Task の検出 (50ms以上のタスクを検出)
const longTaskObserver = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log(`[Long Task Detected]`);
    console.log(`  Duration: ${entry.duration.toFixed(2)}ms`);
    console.log(`  Start: ${entry.startTime.toFixed(2)}ms`);
    console.log(`  Name: ${entry.name}`);
 
    // 100ms以上のタスクは深刻なUI遅延の原因
    if (entry.duration > 100) {
      console.error(
        `CRITICAL: Task took ${entry.duration.toFixed(0)}ms. ` +
        `This blocks rendering and causes jank.`
      );
    }
 
    // 50-100ms のタスクは改善の余地がある
    if (entry.duration > 50 && entry.duration <= 100) {
      console.warn(
        `WARNING: Task took ${entry.duration.toFixed(0)}ms. ` +
        `Consider breaking this into smaller chunks.`
      );
    }
  }
});
 
longTaskObserver.observe({ type: 'longtask', buffered: true });
 
// フレームレートの監視
function monitorFrameRate() {
  let lastTime = performance.now();
  let frameCount = 0;
  const fpsHistory = [];
 
  function tick(currentTime) {
    frameCount++;
    const elapsed = currentTime - lastTime;
 
    if (elapsed >= 1000) {
      const fps = Math.round((frameCount * 1000) / elapsed);
      fpsHistory.push(fps);
 
      if (fps < 30) {
        console.error(`[Frame Drop] FPS: ${fps} - Severe jank detected`);
      } else if (fps < 55) {
        console.warn(`[Frame Drop] FPS: ${fps} - Minor jank`);
      }
 
      frameCount = 0;
      lastTime = currentTime;
    }
 
    requestAnimationFrame(tick);
  }
 
  requestAnimationFrame(tick);
 
  return {
    getAverageFPS: () => {
      if (fpsHistory.length === 0) return 0;
      return Math.round(
        fpsHistory.reduce((a, b) => a + b, 0) / fpsHistory.length
      );
    },
    getHistory: () => [...fpsHistory]
  };
}
 
const fpsMonitor = monitorFrameRate();

/* アンチパターン: left を使ったアニメーション
   → 毎フレームでレイアウト再計算が発生する */
.slide-bad {
  position: absolute;
  left: 0;
  transition: left 0.3s ease;
}
.slide-bad.active {
  left: 200px;  /* レイアウト → ペイント → コンポジット の全段階が実行される */
}
 
/* 推奨パターン: transform を使ったアニメーション
   → コンポジタースレッドのみで処理可能 */
.slide-good {
  transform: translateX(0);
  transition: transform 0.3s ease;
  will-change: transform;  /* レイヤー昇格のヒント */
}
.slide-good.active {
  transform: translateX(200px);  /* コンポジットのみ → 高速 */
}
 
/* アンチパターン: background-color のアニメーション
   → 毎フレームでペイントが発生する */
.fade-bad {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}
.fade-bad:hover {
  background-color: #f0f0f0;  /* ペイント → コンポジット が毎フレーム実行 */
}
 
/* 推奨パターン: opacity を使ったフェード
   → コンポジタースレッドのみで処理可能 */
.fade-good {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.fade-good:hover {
  opacity: 0.8;  /* コンポジットのみ → 高速 */
}

// JavaScript でもコンポジターフレンドリーなアニメーションを書く
 
// アンチパターン: style.left による直接操作
function animateBad(element, targetX) {
  let current = 0;
  const step = 2;
 
  function frame() {
    current += step;
    element.style.left = current + 'px'; // レイアウトスラッシング
    if (current < targetX) {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}
 
// 推奨パターン: Web Animations API + transform
function animateGood(element, targetX) {
  element.animate(
    [
      { transform: 'translateX(0)' },
      { transform: `translateX(${targetX}px)` }
    ],
    {
      duration: 300,
      easing: 'ease-out',
      fill: 'forwards',
      // composite: 'accumulate' // 既存のtransformと合成
    }
  );
}
 
// 推奨パターン: CSS Custom Properties + transition
function animateWithCustomProps(element, targetX) {
  element.style.setProperty('--translate-x', `${targetX}px`);
  // CSS で: transform: translateX(var(--translate-x));
  //         transition: transform 0.3s ease;
}

// third_party/blink/renderer/core/dom/node.h (簡略化)
// Blink の DOM ノードの基本構造
 
namespace blink {
 
class Node : public EventTarget {
 public:
  enum NodeType {
    kElementNode = 1,
    kAttributeNode = 2,
    kTextNode = 3,
    kCommentNode = 8,
    kDocumentNode = 9,
    kDocumentFragmentNode = 11,
  };
 
  // ツリー構造の走査
  Node* parentNode() const { return parent_; }
  Node* firstChild() const { return first_child_; }
  Node* lastChild() const { return last_child_; }
  Node* nextSibling() const { return next_; }
  Node* previousSibling() const { return previous_; }
 
  // DOM 操作
  Node* appendChild(Node* new_child);
  Node* removeChild(Node* old_child);
  Node* insertBefore(Node* new_child, Node* ref_child);
  Node* replaceChild(Node* new_child, Node* old_child);
 
  // レイアウト関連
  LayoutObject* GetLayoutObject() const { return layout_object_; }
  void SetLayoutObject(LayoutObject*);
 
  // スタイル関連
  const ComputedStyle* GetComputedStyle() const;
  void SetNeedsStyleRecalc(StyleChangeType);
 
  // ガベージコレクション（Oilpan）
  void Trace(Visitor*) const override;
 
 private:
  Member<Node> parent_;
  Member<Node> first_child_;
  Member<Node> last_child_;
  Member<Node> next_;
  Member<Node> previous_;
  Member<LayoutObject> layout_object_;
  NodeFlags node_flags_;
};
 
// Oilpan GC によるメモリ管理
// Blink は独自の GC（Oilpan）を使用する
// V8 の GC とは別に動作し、DOM オブジェクトのライフサイクルを管理
// Member<T> はマネージドポインタで、GC がトレースに使用する
 
}  // namespace blink

// --- Mojom IDL 定義 ---
// services/network/public/mojom/url_loader.mojom (簡略化)
 
module network.mojom;
 
// URL ローダーのインターフェース
interface URLLoader {
  // リダイレクトの追跡
  FollowRedirect(
    array<string> removed_headers,
    map<string, string> modified_headers
  );
 
  // 優先度の変更
  SetPriority(RequestPriority priority, int32 intra_priority_value);
};
 
// URL ローダークライアントのインターフェース
interface URLLoaderClient {
  // レスポンスの受信
  OnReceiveResponse(URLResponseHead head,
                    handle<data_pipe_consumer>? body);
 
  // リダイレクトの通知
  OnReceiveRedirect(URLRequestRedirectInfo redirect_info,
                    URLResponseHead head);
 
  // 完了の通知
  OnComplete(URLLoaderCompletionStatus status);
};
 
// --- C++ での使用例 ---
// content/browser/loader/navigation_url_loader.cc (簡略化)
 
#include "services/network/public/mojom/url_loader.mojom.h"
 
class NavigationURLLoader {
 public:
  void Start(const GURL& url) {
    // ネットワークサービスへの接続
    mojo::Remote<network::mojom::URLLoaderFactory> factory;
    GetNetworkService()->CreateURLLoaderFactory(
        factory.BindNewPipeAndPassReceiver());
 
    // URLLoader の作成とリクエスト送信
    mojo::Remote<network::mojom::URLLoader> loader;
    mojo::PendingRemote<network::mojom::URLLoaderClient> client;
    auto client_receiver = client.InitWithNewPipeAndPassReceiver();
 
    auto request = network::ResourceRequest::New();
    request->url = url;
    request->method = "GET";
 
    factory->CreateLoaderAndStart(
        loader.BindNewPipeAndPassReceiver(),
        /*request_id=*/0,
        /*options=*/0,
        std::move(request),
        std::move(client),
        /*traffic_annotation=*/net::MutableNetworkTrafficAnnotationTag()
    );
  }
};

// CORB (Cross-Origin Read Blocking)
// ブラウザが自動的にクロスオリジンの機密データを保護
 
// 例: 攻撃者が <img> タグで JSON データを読み取ろうとする
// <img src="https://bank.example/api/account"> ← CORB がブロック
 
// CORB がブロックする Content-Type:
// - text/html
// - application/json
// - text/xml / application/xml
 
// CORP (Cross-Origin-Resource-Policy)
// サーバー側でリソースの読み込みを制限するヘッダー
 
// サーバー側の設定例
// 同一オリジンからのみ読み込み可能
// Cross-Origin-Resource-Policy: same-origin
 
// 同一サイトからのみ読み込み可能
// Cross-Origin-Resource-Policy: same-site
 
// どのオリジンからも読み込み可能
// Cross-Origin-Resource-Policy: cross-origin
 
// --- 関連: COOP と COEP ---
 
// COOP (Cross-Origin-Opener-Policy)
// window.opener の参照をクロスオリジン間で遮断
// Cross-Origin-Opener-Policy: same-origin
 
// COEP (Cross-Origin-Embedder-Policy)
// クロスオリジンリソースの読み込みに明示的な許可を要求
// Cross-Origin-Embedder-Policy: require-corp
 
// COOP + COEP の設定で SharedArrayBuffer が利用可能に
// （Spectre 対策として、デフォルトでは無効化されている）
 
// 確認方法
if (crossOriginIsolated) {
  // SharedArrayBuffer が利用可能
  const sab = new SharedArrayBuffer(1024);
  console.log('Cross-origin isolated:', crossOriginIsolated);
} else {
  console.log('SharedArrayBuffer は使用不可');
  console.log('COOP と COEP ヘッダーを設定してください');
}

// レンダラープロセスからの IPC メッセージの検証（概念的なコード）
 
// ブラウザプロセス側での検証ロジック
class SecurityChecker {
 
  // ファイルアクセス要求の検証
  validateFileAccess(rendererProcessId, filePath) {
    // 1. レンダラーが要求したファイルパスの正規化
    const normalizedPath = this.normalizePath(filePath);
 
    // 2. パストラバーサル攻撃の検出
    if (normalizedPath.includes('..') || normalizedPath.includes('~')) {
      this.killRenderer(rendererProcessId, 'PATH_TRAVERSAL_ATTEMPT');
      return false;
    }
 
    // 3. ダウンロードディレクトリ外へのアクセスを拒否
    if (!normalizedPath.startsWith(this.allowedBasePath)) {
      this.killRenderer(rendererProcessId, 'UNAUTHORIZED_FILE_ACCESS');
      return false;
    }
 
    // 4. 機密ファイルへのアクセスを拒否
    const sensitivePatterns = ['/etc/passwd', '/etc/shadow', '.ssh/'];
    for (const pattern of sensitivePatterns) {
      if (normalizedPath.includes(pattern)) {
        this.killRenderer(rendererProcessId, 'SENSITIVE_FILE_ACCESS');
        return false;
      }
    }
 
    return true;
  }
 
  // ナビゲーション要求の検証
  validateNavigation(rendererProcessId, sourceOrigin, targetURL) {
    // レンダラーが自身のオリジンを詐称していないか確認
    const expectedOrigin = this.getOriginForProcess(rendererProcessId);
    if (sourceOrigin !== expectedOrigin) {
      this.killRenderer(rendererProcessId, 'ORIGIN_SPOOFING');
      return false;
    }
 
    // chrome:// や file:// への不正なナビゲーションを拒否
    const scheme = new URL(targetURL).protocol;
    if (['chrome:', 'file:', 'chrome-extension:'].includes(scheme)) {
      if (!this.isSchemeAllowed(rendererProcessId, scheme)) {
        return false;
      }
    }
 
    return true;
  }
 
  // 不正なレンダラーを強制終了
  killRenderer(processId, reason) {
    console.error(`Killing renderer ${processId}: ${reason}`);
    // chrome://kills で確認可能
    process.kill(processId);
    this.reportBadMessage(processId, reason);
  }
}

// パフォーマンス計測のユーティリティクラス
class BrowserPerformanceAnalyzer {
 
  constructor() {
    this.marks = new Map();
    this.measures = [];
  }
 
  // レンダリングパイプラインの各段階を計測
  measureRenderingPipeline() {
    // スタイル再計算のコスト測定
    performance.mark('style-start');
    // ... DOM操作やクラス変更 ...
    requestAnimationFrame(() => {
      performance.mark('style-end');
      performance.measure('Style Recalculation', 'style-start', 'style-end');
    });
  }
 
  // Layout Thrashing の検出
  detectLayoutThrashing() {
    const originalGetComputedStyle = window.getComputedStyle;
    let readCount = 0;
    let writeCount = 0;
    let thrashingDetected = false;
 
    // getComputedStyle の呼び出しを監視
    window.getComputedStyle = function(...args) {
      readCount++;
      if (writeCount > 0 && readCount > 1) {
        thrashingDetected = true;
        console.warn(
          `[Layout Thrashing] Read-Write-Read pattern detected. ` +
          `Reads: ${readCount}, Writes: ${writeCount}`
        );
      }
      return originalGetComputedStyle.apply(this, args);
    };
 
    // 一定時間後にリセット
    requestAnimationFrame(() => {
      window.getComputedStyle = originalGetComputedStyle;
      readCount = 0;
      writeCount = 0;
    });
 
    return { isThrashing: () => thrashingDetected };
  }
 
  // Navigation Timing の詳細分析
  analyzeNavigationTiming() {
    const timing = performance.getEntriesByType('navigation')[0];
    if (!timing) return null;
 
    return {
      // DNS ルックアップ
      dns: {
        duration: timing.domainLookupEnd - timing.domainLookupStart,
        label: 'DNS Lookup'
      },
      // TCP 接続（TLS 含む）
      connection: {
        duration: timing.connectEnd - timing.connectStart,
        label: 'TCP + TLS'
      },
      // TTFB (Time to First Byte)
      ttfb: {
        duration: timing.responseStart - timing.requestStart,
        label: 'TTFB'
      },
      // レスポンスダウンロード
      download: {
        duration: timing.responseEnd - timing.responseStart,
        label: 'Download'
      },
      // DOM パース
      domParse: {
        duration: timing.domInteractive - timing.responseEnd,
        label: 'DOM Parse'
      },
      // DOMContentLoaded
      domContentLoaded: {
        duration: timing.domContentLoadedEventEnd
          - timing.domContentLoadedEventStart,
        label: 'DOMContentLoaded handlers'
      },
      // 全体のロード時間
      totalLoad: {
        duration: timing.loadEventEnd - timing.navigationStart,
        label: 'Total Load'
      }
    };
  }
 
  // Resource Timing の分析
  analyzeResourceTiming() {
    const resources = performance.getEntriesByType('resource');
 
    const byType = {};
    for (const resource of resources) {
      const type = resource.initiatorType || 'other';
      if (!byType[type]) {
        byType[type] = { count: 0, totalSize: 0, totalDuration: 0 };
      }
      byType[type].count++;
      byType[type].totalSize += resource.transferSize || 0;
      byType[type].totalDuration += resource.duration;
    }
 
    return {
      totalResources: resources.length,
      byType,
      slowest: resources
        .sort((a, b) => b.duration - a.duration)
        .slice(0, 5)
        .map(r => ({
          name: r.name.split('/').pop(),
          duration: Math.round(r.duration),
          size: r.transferSize
        }))
    };
  }
}
 
// 使用例
const analyzer = new BrowserPerformanceAnalyzer();
 
// ページロード後に分析を実行
window.addEventListener('load', () => {
  setTimeout(() => {
    const navTiming = analyzer.analyzeNavigationTiming();
    const resTiming = analyzer.analyzeResourceTiming();
 
    console.table(
      Object.entries(navTiming).map(([key, val]) => ({
        Phase: val.label,
        Duration: `${val.duration.toFixed(1)}ms`
      }))
    );
 
    console.log('Resource Summary:', resTiming);
  }, 100);
});

// ===== アンチパターン: Layout Thrashing =====
 
// 悪い例: 読み取りと書き込みの交互実行
function resizeAllBoxesBad(boxes) {
  for (const box of boxes) {
    // 読み取り → 強制レイアウト発生
    const width = box.offsetWidth;
 
    // 書き込み → レイアウトが無効化される
    box.style.width = (width * 1.1) + 'px';
 
    // 次のループで再び読み取り → 再度強制レイアウト!
    // N個のボックスに対して N回のレイアウト計算 → O(N) 回のレイアウト
  }
  // 100個のボックスで約 100回のレイアウト再計算
  // → 数十ms～数百ms のブロッキング
}
 
// ===== 推奨パターン: バッチ読み取り + バッチ書き込み =====
 
// 良い例: 読み取りを先にまとめ、その後書き込みをまとめる
function resizeAllBoxesGood(boxes) {
  // Phase 1: 全ての読み取りをバッチ処理（レイアウト計算は1回だけ）
  const widths = boxes.map(box => box.offsetWidth);
 
  // Phase 2: 全ての書き込みをバッチ処理
  boxes.forEach((box, i) => {
    box.style.width = (widths[i] * 1.1) + 'px';
  });
  // レイアウト計算は最初の1回 + 書き込み後の1回 = 合計2回のみ
}
 
// さらに良い例: requestAnimationFrame を使用
function resizeAllBoxesBest(boxes) {
  // 読み取りは現在のフレームで実行
  const widths = boxes.map(box => box.offsetWidth);
 
  // 書き込みは次のフレームで実行
  requestAnimationFrame(() => {
    boxes.forEach((box, i) => {
      box.style.width = (widths[i] * 1.1) + 'px';
    });
  });
}
 
// 強制レイアウト（Forced Synchronous Layout）を引き起こすプロパティ:
// offsetTop, offsetLeft, offsetWidth, offsetHeight
// scrollTop, scrollLeft, scrollWidth, scrollHeight
// clientTop, clientLeft, clientWidth, clientHeight
// getComputedStyle()
// getBoundingClientRect()
// innerText

/* ===== アンチパターン: 全要素に will-change を設定 ===== */
 
/* 悪い例: 全要素をレイヤー昇格させる */
* {
  will-change: transform;
  /* 全要素が独立レイヤーになる
     → GPU メモリを大量消費
     → レイヤー管理のオーバーヘッド増大
     → 逆にパフォーマンス低下 */
}
 
/* 悪い例: 多数のリストアイテムに will-change */
.list-item {
  will-change: transform, opacity;
  /* 1000個のリストアイテムがあれば1000レイヤー
     → GPU メモリ枯渇 → ソフトウェアフォールバック */
}

/* ===== 推奨パターン: 必要な要素にだけ、必要なタイミングで ===== */
 
/* 良い例: hover 時のみ will-change を有効化 */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  will-change: transform;
}
.card.animating {
  transform: scale(1.05);
}
 
/* 良い例: JavaScript で動的に管理 */
/*
  element.addEventListener('mouseenter', () => {
    element.style.willChange = 'transform';
  });
  element.addEventListener('transitionend', () => {
    element.style.willChange = 'auto';
  });
*/
 
/* 良い例: アニメーション対象の少数要素にだけ適用 */
.modal-overlay {
  will-change: opacity;
}
.slide-panel {
  will-change: transform;
}
/* その他の要素には will-change を設定しない */

// ===== アンチパターン: メインスレッドで重い計算 =====
 
// 悪い例: 大量データのソートをメインスレッドで実行
function sortLargeDatasetBad(data) {
  // 100万件のデータソート → メインスレッドが数秒間ブロック
  // → スクロール不可、クリック不応答、アニメーション停止
  return data.sort((a, b) => {
    // 複雑な比較ロジック
    return complexComparison(a, b);
  });
}
 
// ===== 推奨パターン: Web Worker にオフロード =====
 
// worker.js
// self.addEventListener('message', (e) => {
//   const { data, sortKey } = e.data;
//   const sorted = data.sort((a, b) => a[sortKey] - b[sortKey]);
//   self.postMessage({ sorted });
// });
 
// メインスレッド側
function sortLargeDatasetGood(data, sortKey) {
  return new Promise((resolve) => {
    const worker = new Worker('worker.js');
    worker.postMessage({ data, sortKey });
    worker.addEventListener('message', (e) => {
      resolve(e.data.sorted);
      worker.terminate();
    });
  });
}
 
// ===== 推奨パターン: タスク分割 (Time Slicing) =====
 
// チャンクに分割して処理し、メインスレッドに呼吸させる
async function processInChunks(items, processFn, chunkSize = 100) {
  const results = [];
 
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    const chunkResults = chunk.map(processFn);
    results.push(...chunkResults);
 
    // 各チャンク後にメインスレッドに制御を戻す
    // → レンダリングやイベント処理が割り込み可能
    if (i + chunkSize < items.length) {
      await new Promise(resolve => {
        // scheduler.yield() が利用可能なら使用
        if ('scheduler' in globalThis && 'yield' in scheduler) {
          scheduler.yield().then(resolve);
        } else {
          setTimeout(resolve, 0);
        }
      });
    }
  }
 
  return results;
}
 
// 使用例
// const processed = await processInChunks(largeArray, item => {
//   return expensiveTransform(item);
// }, 50);