Added a new orange indicator to highlight elements that are 100% in the viewport but not yet considered viewable.

Fixed cross-site scripting issues in safeframe implementations.
Resolved an edge case in task scheduling with the new Scheduler.postTask method.
Enhanced size and position detection for highly dynamic ad slots and complex page layouts.
Updated webpack configuration to optimize production build by minimizing usage and removing debugging console logs.

Author: MarkusBordihn

assets/gpt_integration_script.css

@@ -16,9 +16,9 @@
 
 .viewability-insights-overlay {
   align-items: center;
-  box-shadow: inset 0px 0px 0px 10px rgba(255, 0, 0, 0.75);
+  box-shadow: inset 0 0 0 10px rgba(255, 0, 0, 0.75);
   display: flex;
-  font-family: Roboto, 'Noto Sans';
+  font-family: Roboto, 'Noto Sans', serif;
   font-size: 16px;
   height: 100%;
   justify-content: center;
@@ -28,7 +28,6 @@
   min-height: 20px;
   min-width: 20px;
   position: absolute;
-  position: absolute;
   right: 0;
   top: 0;
   width: 100%;
@@ -45,8 +44,22 @@
   );
 }
 
+.viewability-insights-overlay.predicted-viewable {
+  box-shadow: inset 0 0 0 10px rgba(255, 165, 0, 0.75);
+}
+
+.viewability-insights-overlay:hover.predicted-viewable {
+  background: repeating-linear-gradient(
+      45deg,
+      rgba(255, 165, 0, 0.2),
+      rgba(255, 165, 0, 0.2) 10px,
+      rgba(255, 165, 0, 0.3) 10px,
+      rgba(255, 165, 0, 0.3) 20px
+  );
+}
+
 .viewability-insights-overlay.viewable {
-  box-shadow: inset 0px 0px 0px 10px rgba(0, 255, 0, 0.75);
+  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.75);
 }
 
 .viewability-insights-overlay:hover.viewable {
@@ -63,6 +76,10 @@
   background: rgba(255, 0, 0, 0.75);
 }
 
+.viewability-insights-overlay.predicted-viewable > .slot-info {
+  background: rgba(255, 165, 0, 0.75);
+}
+
 .viewability-insights-overlay.viewable > .slot-info {
   background: rgba(0, 255, 0, 0.75);
 }

build/webpack.prod.js

@@ -14,23 +14,47 @@
  * limitations under the License.
  */
 
-const { merge } = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const optimizationOptions = {
+  minimize: true,
+  minimizer: [
+    new TerserPlugin({
+      terserOptions: {
+        compress: {
+          pure_funcs: [
+            'console.log',
+            'console.info',
+            'console.debug',
+            'console.warn'
+          ]
+        },
+      },
+    }),
+  ],
+}
 
 module.exports = [
   merge(common.devtoolsPageConfig, {
     mode: 'production',
+    optimization: optimizationOptions,
   }),
   merge(common.panelPageConfig, {
     mode: 'production',
+    optimization: optimizationOptions,
   }),
   merge(common.contentScriptConfig, {
     mode: 'production',
+    optimization: optimizationOptions,
   }),
   merge(common.adRequestDetailsSidebarConfig, {
     mode: 'production',
+    optimization: optimizationOptions,
   }),
   merge(common.gptIntegrationScriptConfig, {
     mode: 'production',
+    optimization: optimizationOptions,
   }),
 ];

global.d.ts

@@ -18,7 +18,7 @@
 declare const serviceWorkerOption: Record<string, unknown>;
 
 /** Google Publisher Tag (GPT) */
-declare const googletag: any;
+declare let googletag: any;
 
 /** Injected ViewabilityInsights script */
 declare const ViewabilityInsights: any;