From 4992e1001bb4a6206da90cfa622c3bdeba24c02f Mon Sep 17 00:00:00 2001 From: clementlize Date: Thu, 16 Nov 2023 09:47:28 +0100 Subject: [PATCH] feat: button is now visible in logs explorer --- css/content.css | 10 ++++++ manifest.json | 9 +++-- scripts/content.js | 88 +++++++++++++++++++++++++++++++++++++++------- 3 files changed, 91 insertions(+), 16 deletions(-) diff --git a/css/content.css b/css/content.css index eddfe6b..911fda1 100644 --- a/css/content.css +++ b/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; } \ No newline at end of file diff --git a/manifest.json b/manifest.json index 35d6db2..5c32046 100644 --- a/manifest.json +++ b/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"] } diff --git a/scripts/content.js b/scripts/content.js index 3696446..41f831c 100644 --- a/scripts/content.js +++ b/scripts/content.js @@ -1,32 +1,92 @@ + +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', () => { @@ -34,10 +94,12 @@ const observer = new MutationObserver((mutations) => { 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 }); \ No newline at end of file