Merge develop into transifex

Author: wordpressfan

.github/workflows/lint_phpcs.yml

@@ -1,40 +1,16 @@
-name: PHP CodeSniffer lint
+name: PHP CodeSniffer
 
 on:
   pull_request:
-    branches:
-      - trunk
-      - develop
-      - branch-*
-      - feature/*
-      - enhancement/*
-      - fix/*
+  workflow_dispatch:
 
-jobs:
-  run:
-    runs-on: ${{ matrix.operating-system }}
-
-    strategy:
-      fail-fast: false
-      matrix:
-        operating-system: [ubuntu-latest]
-        php-versions: ['8.4']
-
-    name: WPRocket lint with PHPCS. PHP ${{ matrix.php-versions }} on ${{ matrix.operating-system }}.
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-
-    - name: Setup PHP
-      uses: shivammathur/setup-php@v2
-      with:
-        php-version: ${{ matrix.php-versions }}
-        coverage: none  # XDebug can be enabled here 'coverage: xdebug'
-        tools: composer:v2
-
-    - name: Install dependencies
-      run: composer install --prefer-dist --no-interaction --no-scripts
-
-    - name: Lint with phpcs
-      run: composer phpcs
+# Cancel all previous workflow runs for the same branch that have not yet completed.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
+jobs:
+  lint:
+    uses: wp-media/workflows/.github/workflows/phpcs.yml@main
+    with:
+      composer-options: --no-scripts

.github/workflows/lint_phpstan.yml

@@ -1,41 +1,16 @@
-name: PHP Stan lint
+name: PHPStan
 
 on:
   pull_request:
-    branches:
-      - trunk
-      - develop
-      - branch-*
-      - feature/*
-      - enhancement/*
-      - fix/*
-      - dev/*
+  workflow_dispatch:
 
-jobs:
-  run:
-    runs-on: ${{ matrix.operating-system }}
-
-    strategy:
-      fail-fast: false
-      matrix:
-        operating-system: [ubuntu-latest]
-        php-versions: ['8.4']
-
-    name: WPRocket lint with PHP Stan. PHP ${{ matrix.php-versions }} on ${{ matrix.operating-system }}.
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-
-    - name: Setup PHP
-      uses: shivammathur/setup-php@v2
-      with:
-        php-version: ${{ matrix.php-versions }}
-        coverage: none  # XDebug can be enabled here 'coverage: xdebug'
-        tools: composer:v2
-
-    - name: Install dependencies
-      run: composer install --prefer-dist --no-interaction --no-scripts
-
-    - name: Lint with PHP Stan
-      run: composer run-stan
+# Cancel all previous workflow runs for the same branch that have not yet completed.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
+jobs:
+  lint:
+    uses: wp-media/workflows/.github/workflows/phpstan.yml@main
+    with:
+      composer-options: --no-scripts

assets/css/wpr-admin.css

@@ -104,6 +104,34 @@ a:focus, button:focus {
   font-size: 1em;
 }
 
+.wpr-loader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0 auto;
+  width: 60px;
+  aspect-ratio: 2;
+  --_g: no-repeat radial-gradient(circle closest-side,#ffffff 90%,#0000);
+  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
+  background-size: 33.3333333333% 50%;
+  animation: l3 1s infinite linear;
+}
+
+@keyframes l3 {
+  20% {
+    background-position: 0% 0%, 50% 50%, 100% 50%;
+  }
+  40% {
+    background-position: 0% 100%, 50% 0%, 100% 50%;
+  }
+  60% {
+    background-position: 0% 50%, 50% 100%, 100% 0%;
+  }
+  80% {
+    background-position: 0% 50%, 50% 50%, 100% 100%;
+  }
+}
 /*-----------------------------------------------*\
 
 	Icons in a font-icon with icomoon (https://icomoon.io/app)
@@ -715,7 +743,7 @@ a:focus, button:focus {
   color: #121116;
   padding: 8px 0;
   padding-left: 4px;
-  border-bottom: 1px solid #c2cad4;
+  border-bottom: 1px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
 }
 .wpr-Popin .wp-rocket-data-table td:not(.column-primary) {
   font-family: "Monaco";
@@ -2573,6 +2601,7 @@ div.wpr-tutorial-item {
   max-height: 100vh;
   overflow-y: auto;
   box-sizing: border-box;
+  z-index: 1;
 }
 .wpr-rocketcdn-modal iframe {
   max-width: 100%;
@@ -2870,7 +2899,7 @@ div.wpr-tutorial-item {
   font-family: Monaco;
   color: #121116;
   background: #fff;
-  border: 2px solid #c2cad4;
+  border: 2px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
   border-radius: 3px;
   font-size: 0.8125rem;
   line-height: 1.2307692308;
@@ -2902,7 +2931,7 @@ div.wpr-tutorial-item {
   height: 32px;
   color: #121116;
   background: #fff;
-  border: 2px solid #c2cad4;
+  border: 2px solid rgb(194.1698113208, 202.0188679245, 211.8301886792);
   border-radius: 3px;
   font-family: Monaco;
   font-size: 0.75rem;

assets/css/wpr-admin.min.css

@@ -24,6 +24,65 @@
     static isPageScrolled() {
       return window.pageYOffset > 0 || document.documentElement.scrollTop > 0;
     }
+    /**
+     * Checks if an element is visible in the viewport.
+     * 
+     * This method checks if the provided element is visible in the viewport by
+     * considering its display, visibility, opacity, width, and height properties.
+     * It also excludes elements with transparent text properties.
+     * It returns true if the element is visible, and false otherwise.
+     * 
+     * @param {Element} element - The element to check for visibility.
+     * @returns {boolean} True if the element is visible, false otherwise.
+     */
+    static isElementVisible(element) {
+      const style = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      if (!style) {
+        return false;
+      }
+      if (this.hasTransparentText(element)) {
+        return false;
+      }
+      return !(style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || rect.width === 0 || rect.height === 0);
+    }
+    /**
+     * Checks if an element has transparent text properties.
+     *
+     * This method checks for specific CSS properties that make text invisible,
+     * such as `color: transparent`, `color: rgba(..., 0)`, `color: hsla(..., 0)`,
+     * `color: #...00` (8-digit hex with alpha = 0), and `filter: opacity(0)`.
+     *
+     * @param {Element} element - The element to check.
+     * @returns {boolean} True if the element has transparent text properties, false otherwise.
+     */
+    static hasTransparentText(element) {
+      const style = window.getComputedStyle(element);
+      if (!style) {
+        return false;
+      }
+      const color = style.color || "";
+      const filter = style.filter || "";
+      if (color === "transparent") {
+        return true;
+      }
+      const rgbaMatch = color.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/);
+      if (rgbaMatch) {
+        return true;
+      }
+      const hslaMatch = color.match(/hsla\(\d+,\s*\d+%,\s*\d+%,\s*0\)/);
+      if (hslaMatch) {
+        return true;
+      }
+      const hexMatch = color.match(/#[0-9a-fA-F]{6}00/);
+      if (hexMatch) {
+        return true;
+      }
+      if (filter.includes("opacity(0)")) {
+        return true;
+      }
+      return false;
+    }
   };
   var Utils_default = BeaconUtils;
 
@@ -72,7 +131,7 @@
           rect
         };
       }).filter((item) => item !== null).filter((item) => {
-        return item.rect.width > 0 && item.rect.height > 0 && Utils_default.isIntersecting(item.rect);
+        return item.rect.width > 0 && item.rect.height > 0 && Utils_default.isIntersecting(item.rect) && Utils_default.isElementVisible(item.element);
       }).map((item) => ({
         item,
         area: this._getElementArea(item.rect),
@@ -483,55 +542,14 @@
     /**
      * Checks if an element is visible in the viewport.
      * 
-     * This method checks if the provided element is visible in the viewport by
-     * considering its display, visibility, opacity, width, and height properties.
-     * It also excludes elements with transparent text properties.
-     * It returns true if the element is visible, and false otherwise.
+     * This method delegates to BeaconUtils.isElementVisible() for consistent
+     * visibility checking across all beacons.
      * 
      * @param {Element} element - The element to check for visibility.
      * @returns {boolean} True if the element is visible, false otherwise.
      */
     isElementVisible(element) {
-      const style = window.getComputedStyle(element);
-      const rect = element.getBoundingClientRect();
-      if (this.hasTransparentText(element)) {
-        return false;
-      }
-      return !(style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || rect.width === 0 || rect.height === 0);
-    }
-    /**
-     * Checks if an element has transparent text properties.
-     *
-     * This method checks for specific CSS properties that make text invisible,
-     * such as `color: transparent`, `color: rgba(..., 0)`, `color: hsla(..., 0)`,
-     * `color: #...00` (8-digit hex with alpha = 0), and `filter: opacity(0)`.
-     *
-     * @param {Element} element - The element to check.
-     * @returns {boolean} True if the element has transparent text properties, false otherwise.
-     */
-    hasTransparentText(element) {
-      const style = window.getComputedStyle(element);
-      const color = style.color || "";
-      const filter = style.filter || "";
-      if (color === "transparent") {
-        return true;
-      }
-      const rgbaMatch = color.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*0\)/);
-      if (rgbaMatch) {
-        return true;
-      }
-      const hslaMatch = color.match(/hsla\(\d+,\s*\d+%,\s*\d+%,\s*0\)/);
-      if (hslaMatch) {
-        return true;
-      }
-      const hexMatch = color.match(/#[0-9a-fA-F]{6}00/);
-      if (hexMatch) {
-        return true;
-      }
-      if (filter.includes("opacity(0)")) {
-        return true;
-      }
-      return false;
+      return Utils_default.isElementVisible(element);
     }
     /**
      * Cleans a URL by removing query parameters and fragments.
@@ -631,19 +649,21 @@
         });
         return fontPairs;
       }
-      const externalFontsProviders = [
-        "fonts.googleapis.com",
-        "fonts.gstatic.com",
-        "use.typekit.net",
-        "fonts.adobe.com",
-        "cdn.fonts.net"
-        // Add more known external font domains as needed
-      ];
       const links = [
         ...document.querySelectorAll('link[rel="stylesheet"]')
-      ].filter(
-        (link) => externalFontsProviders.some((domain) => link.href.includes(domain))
-      );
+      ].filter((link) => {
+        try {
+          const linkUrl = new URL(link.href);
+          const currentUrl = new URL(window.location.href);
+          if (linkUrl.origin === currentUrl.origin) {
+            return false;
+          }
+          const exclusions = this.config.external_font_exclusions || [];
+          return !exclusions.some((exclusion) => link.href.includes(exclusion));
+        } catch (e) {
+          return false;
+        }
+      });
       if (links.length === 0) {
         this.logger.logMessage("No external CSS links found to process.");
         return {