devtools.js

"use strict";

console.log("[CSSTree] devtools.js loaded", { href: location.href });

// Create the main panel tab that will appear alongside Elements, Console, Sources, etc.
console.log("[CSSTree] creating CSS Tree Inspector panel");
chrome.devtools.panels.create(
  "CSS Tree Inspector",
  "icons/icon16.png",
  "panel/panel.html",
  function(panel) {
    const visibilityChannel = new BroadcastChannel("css-tree-inspector-panel-visibility");
    panel.onShown.addListener(() => visibilityChannel.postMessage({ visible: true }));
    panel.onHidden.addListener(() => visibilityChannel.postMessage({ visible: false }));
  }
);
console.log("[CSSTree] CSS Tree Inspector panel registration complete");

// Create the sidebar pane in the Elements panel
console.log("[CSSTree] creating Elements sidebar pane");
chrome.devtools.panels.elements.createSidebarPane(
  "CSS Tree Inspector",
  function(sidebar) {
    console.log("[CSSTree] Elements sidebar created", sidebar);
    sidebar.setPage("sidebar/sidebar.html");
  }
);
console.log("[CSSTree] Elements sidebar registration complete");