feat: button is now visible in logs explorer

css/content.css

@@ -9,4 +9,14 @@ f7e-data-panel-viewer.fullscreen {
 
 .data-panel-viewer.fullscreen {
     height: 100vh !important;
+}
+
+/* .logs-card.logs-viewer-card.query-results.fullscreen { */
+.logs-card.consolidated-cards.ng-tns-c2823155722-4.default.ng-star-inserted.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    width: 100vw;
+    height: 100vh !important;
 }

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Firestore fullscreen",
-  "version": "1.0.4",
-  "description": "Get a fullscreen experience when browsing the Firestore database.",
+  "version": "1.0.5",
+  "description": "Get a fullscreen experience when browsing the Firestore database (and GCP logs explorer)",
 
   "icons": {
     "16": "images/icon-16.png",
@@ -12,7 +12,10 @@
   },
   "content_scripts": [
     {
-      "matches": ["*://console.firebase.google.com/*"], 
+      "matches": [
+        "*://console.firebase.google.com/*",
+        "*://console.cloud.google.com/*"
+      ], 
       "js": ["scripts/content.js"],
       "css" : ["css/content.css"]
     }

scripts/content.js

@@ -1,43 +1,105 @@
+
+let observerTriggerCount = 0;
+const MAX_OBSERVER_TRIGGER_COUNT = 200;
+
 let isFullScreen = false;
 const TOGGLE_BUTTON_CLASS = 'toggle-fullscreen-button';
 
+// TODO: use TS
+const PAGE_FIRESTORE = "firestore";
+const PAGE_LOGS_EXPLORER = "logs-explorer";
+
+// TODO: use TS
+const configs = {
+  [PAGE_FIRESTORE]: {
+    buttonContainerQuery: ".fire-card-action-bar.on-grey-theme-container",
+    queriesToCheckOnGoodPage: [
+      "firestore-link-out-menu"
+    ],
+    elementToToggleQueries: [
+      "f7e-data-panel-viewer",
+      ".data-panel-viewer",
+    ],
+    buttonAdditionalStyle: "",
+  },
+  [PAGE_LOGS_EXPLORER]: {
+    // buttonContainerQuery: ".mat-mdc-card-header.ng-tns-c2823155722-5",
+    buttonContainerQuery: ".mat-mdc-card-header.ng-tns-c2823155722-4",
+    queriesToCheckOnGoodPage: [],
+    elementToToggleQueries: [
+      // ".logs-card.logs-viewer-card.query-results",
+      ".logs-card.consolidated-cards.ng-tns-c2823155722-4.default.ng-star-inserted",
+    ],
+    buttonAdditionalStyle: "padding:0;margin-right:1.5rem;margin-top:0.15rem;",
+  }
+}
+
 const getButtonText = (isFullScreen) => {
   return `${isFullScreen ? "Exit" : "Enter"} fullscreen`;
 }
 
 const observer = new MutationObserver((mutations) => {
-
-  const toggleButtonContainer = document.querySelector(".fire-card-action-bar.on-grey-theme-container");
-  if (toggleButtonContainer) {
+
+  observerTriggerCount++;
+  if (observerTriggerCount > MAX_OBSERVER_TRIGGER_COUNT) {
+    console.info("Too many observer triggers, disconnecting..");
+    observer.disconnect();
+  }
+
+  let page = null;
+  let currentConfig = null;
+
+  let toggleButtonContainer = null;
+  for (const [configKey, config] of Object.entries(configs)) {
+    // Take only the 1st one matching, we shouldn't be on multiple pages at once
+    if (!toggleButtonContainer) {
+      toggleButtonContainer = document.querySelector(config.buttonContainerQuery);
+      // Found -> we keep trace on which page we're on
+      if (toggleButtonContainer) {
+        page = configKey;
+        currentConfig = config;
+      }
+    }
+  }
+
+  if (page && currentConfig && toggleButtonContainer) {
 
     console.debug("Found container for toggle button", toggleButtonContainer);
 
-    // Add toggle button if needed
+    // Add toggle button if not added yet
     if (!document.querySelector(`.${TOGGLE_BUTTON_CLASS}`)) {
 
-      const moreMenuButton = document.querySelector("firestore-link-out-menu");
-      if (!moreMenuButton) {
-        console.debug("Could not find more menu button, probably not on cloud firestore data page. Not inserting button");
-        return;
+      console.debug("Checking that we're on the right page using queries from config...");
+      for (const query of currentConfig.queriesToCheckOnGoodPage) {
+        console.debug(`Checking that we're on ${page} page by looking for ${query}...`)
+        const foundElement = document.querySelector(query);
+        if (!foundElement) {
+          console.debug(`Could not find element ${query}, probably not on ${page} page. Not inserting button.`);
+          return;
+        }
       }
+      console.debug(`We're on ${page} page, inserting button.`);
 
       console.log("Adding toggle button...");
       const toggleButton = document.createElement('button');
       toggleButton.classList.add("mat-mdc-menu-trigger", "menu-button", "mdc-button", "mat-mdc-button", "mat-primary", "mat-mdc-button-base", TOGGLE_BUTTON_CLASS);
+      toggleButton.style.cssText += currentConfig.buttonAdditionalStyle;
       toggleButton.textContent = getButtonText(isFullScreen);
       toggleButtonContainer.insertAdjacentElement("afterbegin", toggleButton);
-      console.debug("Added toggle button");
+      console.debug("Added toggle button", { toggleButtonContainer, toggleButton});
 
       console.log("Adding event listener...");
       toggleButton.addEventListener('click', () => {
 
         isFullScreen = !isFullScreen;
         toggleButton.textContent = getButtonText(isFullScreen);
 
-        // Toggle class on specific elements
+        // Toggle class "fullscreen" on specific elements
         const elementsToToggle = [];
-        elementsToToggle.push(document.querySelector("f7e-data-panel-viewer"));
-        elementsToToggle.push(document.querySelector(".data-panel-viewer"));
+        currentConfig.elementToToggleQueries.forEach((query) => {
+          elementsToToggle.push(document.querySelector(query));
+        });
+
         elementsToToggle.forEach((element) => {
           if (element) {
             element.classList.toggle("fullscreen");
@@ -53,7 +115,7 @@ const observer = new MutationObserver((mutations) => {
     }
   }
   else {
-    console.debug("Could not find container for toggle button");
+    console.debug("Could not find container for toggle button (or determine page)");
   }
 });
 observer.observe(document, { childList: true, subtree: true });