Newpc

README.md

@@ -3,9 +3,6 @@ MRAID WebTester is a community-driven tool to run MRAID ad units in a web enviro
 
 !! This project is currently unattended and is not scheduled for updates !!
 
-### Using the tool
-
-!! The online tool at http://webtester.mraid.org/ is no longer maintained. Users wishing to run the webtester should do so locally. !!
 
 ===
 PREPARE: One the first screen, provide the properties for your test environment

css/main.css

@@ -140,7 +140,7 @@ div[class~=consoleFrame] {
 	line-height: 1.6;
 }
 
-#adURI, #adFragment {
+#adURI, #adFragment ,#adHeadScript{
     width:70%;
 }
 

docs/architecture.md

@@ -0,0 +1,106 @@
+# MRAID WebTester Architecture
+
+The MRAID WebTester is a web-based tool designed to test Mobile Rich Media Ad Interface Definitions (MRAID) implementations. This document outlines the architecture and core components of the system.
+
+## Project Structure
+
+```
+webtester/
+├── css/                    # Style sheets for the application
+├── jquery/                 # jQuery and UI libraries
+├── img/                    # Image assets
+├── widgets/                # UI widget implementations
+├── safari/                 # Core MRAID implementation
+│   ├── main.js             # Application logic
+│   └── mraidview.js        # MRAID view implementation
+├── compliance/             # IAB compliance test ads
+│   ├── units/              # Test ad units
+│   └── docs/               # Compliance documentation
+├── index.html              # Main application entry point
+├── htmlproxy.php           # Proxy for HTML content
+├── imageDownload.php       # Helper for image downloads
+├── favicon.ico             # Site favicon
+├── LICENSE                 # BSD License
+└── README.md               # Project documentation
+```
+
+## Core Components
+
+### 1. User Interface (index.html)
+
+The UI is divided into three main tabs:
+
+1. **Prepare**: Configure test environment properties
+   - Device geometry (ad sizes, screen sizes)
+   - API version selection (MRAID v1 or v2)
+   - Placement type (Inline or Interstitial)
+   - Off-screen option
+   - Native features to emulate (sms, tel, calendar, etc.)
+
+2. **Flight**: Input ad code for testing
+   - Head script inclusion
+   - HTML tag source input
+
+3. **Test**: Run and monitor the ad
+   - Console output for logging
+   - Orientation controls
+   - Error and info filtering
+
+### 2. Core MRAID Implementation (safari/mraidview.js)
+
+This is the heart of the application, providing a web-based MRAID container implementation. Key components:
+
+- **Constants**: Defines MRAID versions, placements, states, events, and features
+- **Event Handling**: System for registering and triggering event listeners
+- **MRAID Bridge**: Implementation of the MRAID API specification
+- **Rendering Engine**: Creates and manages the ad frame/window
+
+The implementation follows the MRAID specification flow:
+1. Initialize properties (version, supports)
+2. Create ad window
+3. Initialize ad frame and bridge
+4. Set up event listeners
+5. Signal ready state to the ad
+
+### 3. Application Logic (safari/main.js)
+
+Controls the application flow and user interaction:
+
+- **Event Listeners**: For console logging and error reporting
+- **Form Handling**: Processing user input from the Prepare tab
+- **Rendering**: Functions to render ads from HTML or URLs
+- **Utilities**: Helper functions for orientation changes, query string parsing, etc.
+
+### 4. Compliance Testing (compliance/units/)
+
+Contains IAB-created test ad units for validating MRAID implementations:
+
+- Interstitial ads
+- Resize functionality (with error testing)
+- Two-part expand tests
+- Full-page ad examples
+- Video support tests
+
+## Data Flow
+
+1. User configures test environment in the Prepare tab
+2. User inputs ad HTML/script in the Flight tab
+3. System renders the ad in a popup window with MRAID container
+4. MRAID events and method calls are logged to the console
+5. User can manipulate the environment (e.g., orientation) to test ad behavior
+
+## Integration Points
+
+- **Query String Parameter**: The `adtag` parameter allows direct injection of HTML into the Flight tab
+- **Console Logging**: All MRAID interactions are logged to the console for debugging
+
+## Technical Constraints
+
+- Project is no longer actively maintained
+- Uses older versions of jQuery and related libraries
+- Implementation specifically designed for MRAID v1 and v2 (not newer versions)
+- Some browser security policies may affect functionality when running locally
+
+---
+
+This architecture document should be updated if any feature changes or enhancements are made to the system. 

index.html

@@ -44,7 +44,7 @@
         orientationWidget.init();
         load();
 
-        var adtag = getQueryStringValue('adtag'), 
+        var adtag = getQueryStringValue('adtag'),
             fragmentArea;
 
         if (adtag  && adtag !== '') {
@@ -75,14 +75,14 @@
 
 <form id="setup" name="setup" onsubmit="renderAd(); return false">
     <div id="content">
-    
+
         <section>
             <h2 class="no-margin">properties</h2>
             <div id="propertiesDiv">
                 <div id="propertiesSelectDiv">
                 <div id="deviceDiv">
                     <p class="no-margin">Device geometry:<br/>
-                    <table id="geometryTable"> 
+                    <table id="geometryTable">
                         <tr><td class="name">Default ad size (w x h):</td>
                             <td class="value">
                                 <input id="adWidth" name="adWidth" class="dimension" value="320" onchange="devicesizeWidget.updatePreview()"/>x<input id="adHeight" name="adHeight" class="dimension" value="50" onchange="devicesizeWidget.updatePreview()"/>
@@ -111,15 +111,15 @@ <h2 class="no-margin">properties</h2>
                     </table>
                     </p>
                 </div>
-                
+
                 <div id="placementDiv">
-                    <p class="no-margin">API version to test: 
+                    <p class="no-margin">API version to test:
                         <select name="version">
                             <option value="1.0">MRAID v1</option>
                             <option value="2.0" selected="selected">MRAID v2</option>
                         </select>
                     </p>
-                    <p class="no-margin">Placement: 
+                    <p class="no-margin">Placement:
                         <select name="placement">
                             <option value="inline" selected="selected">Inline</option>
                             <option value="interstitial">Interstitial</option>
@@ -168,9 +168,14 @@ <h2 class="no-margin">properties</h2>
                 </div>
             </div>
         </section>
-    
+
         <section>
             <div>
+                <h2 class="no-margin">head script</h2>
+                <div>
+                    <textarea name="adHeadScript" id="adHeadScript" rows="10" placeholder="JavaScript that goes into head tag (executed before page loads)"></textarea><br/>
+                    <input type="checkbox" id="adHeadScriptIsURI" checked="checked" /> Use script's URL. <i>When this option is checked, paste a URL of the script instead of its source</i>
+                </div>
                 <h2 class="no-margin">tag source</h2>
                 <div>
                     <!--textarea name="adFragment" id="adFragment" rows="10" ><script src='http://rtr.innovid.com/r1.5637e6df321548.45146407;cb=[timestamp]'></script></textarea><br/-->
@@ -179,7 +184,7 @@ <h2 class="no-margin">tag source</h2>
                 </div>
             </div>
         </section>
-        
+
         <section>
             <div id="consoleDiv">
                 <h2 class="no-margin">console</h2>
@@ -205,7 +210,7 @@ <h2 class="no-margin">controls</h2>
 
             </div>
         </section>
-    
+
     </div>
 </form>
 

safari/main.js

@@ -18,10 +18,10 @@ function load() {
                 now = new Date();
 
             console.innerHTML = [
-                formatInfoTime(now), 
-                ' INFO ', 
-                message, 
-                '<br />', 
+                formatInfoTime(now),
+                ' INFO ',
+                message,
+                '<br />',
                 console.innerHTML
             ].join('');
         }
@@ -33,9 +33,9 @@ function load() {
                 now = new Date();
 
             console.innerHTML = [
-                formatInfoTime(now), 
-                ' <span style="color:red;">ERROR ', 
-                message, '</span><br />', 
+                formatInfoTime(now),
+                ' <span style="color:red;">ERROR ',
+                message, '</span><br />',
                 console.innerHTML
             ].join('');
         }
@@ -77,7 +77,7 @@ function contains(array, item) {
             return true;
         }
     }
-    
+
     return false;
 }
 
@@ -98,13 +98,18 @@ function nextStep() {
 function renderHtmlAd() {
     var form = document.forms.setup;
     prepareMraidView(form);
+    if (form.adHeadScriptIsURI.checked) {
+        mraidview.setAdHeadScript("document.write('<script src=" + form.adHeadScript.value + "></script>');");
+    } else {
+        mraidview.setAdHeadScript(form.adHeadScript.value);
+    }
     mraidview.setUseHtml(true, form.adFragment.value);
     mraidview.render();
     $('[href=#tabs-3]').click(); // switch to third tab
 }
 
 function prepareMraidView(form) {
-/* 
+/*
 Note: This must be served from a webserver when using Chrome, otherwise you'll
       run into cross-domain limitations. For more information see:
       http://74.125.153.99/support/forum/p/Chrome/thread?tid=0ba628caf22b4a31&hl=en

safari/mraid.js

@@ -7,14 +7,15 @@
  *  be found in the AUTHORS file in the root of the source tree.
  */
 
-function mraidJsId() {
-	if (typeof (mraid) === 'undefined') {
-		console.log('mraid not found yet');
-	} else {
-		clearInterval(idInterval);
-		mraid.info('mraid.js identification script included');
-		mraidview.scriptFound = true;
-	}
-}
-
-var idInterval = setInterval(mraidJsId, 500);
+// function mraidJsId() {
+// 	if (typeof (mraid) === 'undefined') {
+// 		console.log('mraid not found yet');
+// 	} else {
+// 		clearInterval(idInterval);
+// 		mraid.info('mraid.js identification script included');
+// 		mraidview.scriptFound = true;
+// 	}
+// }
+//
+// var idInterval = setInterval(mraidJsId, 500);
+window.mraid = window.mraid || window.parent.mraid || {}