W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-regions BugzillaTracker.js,NONE,1.1 BugzillaTrackerCSSRegions.js,NONE,1.1 Overview.html,1.49,1.50 Overview.src.html,1.54,1.55 issue_tracker.js,1.2,NONE

From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
Date: Sat, 04 Feb 2012 06:13:14 +0000
To: public-css-commits@w3.org
Message-Id: <E1RtYs6-0003GD-80@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv11184

Modified Files:
	Overview.html Overview.src.html 
Added Files:
	BugzillaTracker.js BugzillaTrackerCSSRegions.js 
Removed Files:
	issue_tracker.js 
Log Message:
Added missing issue. Integrated issue manager script (needs to be uncommented to work)

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.49
retrieving revision 1.50
diff -u -d -r1.49 -r1.50
--- Overview.html	3 Feb 2012 13:09:40 -0000	1.49
+++ Overview.html	4 Feb 2012 06:13:11 -0000	1.50
@@ -55,31 +55,130 @@
              display: none;
          }
          
-         @media screen and (min-width: 68em){
+         @media screen and (min-width: 68em){    
+             
                   .issue-marker {
                       position: absolute;
                       width: 20ex;
                       margin-left: -22ex;
                       text-align: right;
+                      margin-bottom: 1em;
+                  }
+                  
+                  div.issue-marker .issue-marker {
+                      position: static;
+                      width: auto;
+                      margin-left: 0;
+                      text-align: right;
+                  }  
+                  
+                  div.issue-marker {
+                      position: absolute;
+                      width: 20ex;
+                      margin-left: -22ex;
                   }
          }
 
          @media screen and (max-width: 68em){
                   .issue-marker {
+                      margin-bottom: 1em;
                   }
                   
                   .issue-marker a:link {
                       padding-left: 0.5em;
                   }
+         } 
+         
+         #issue-manager form{
+             background: #eee;
+             padding:10px 1em;
+         }
+         
+         /* hide all non-"updated" issues */
+         #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){
+             display:none;
+         }
+            
+         /* hide all non-"new" issues */
+         #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){
+             display:none;
          }
+                  
+          #issue-manager .issue-marker{ 
+              background: none;
+              position: relative;  
+              margin:0; 
+              width:auto;
+              text-align:left; 
+              padding:0.5em 0;
+          }
+          
+          #issue-manager .issue-marker a:link{
+              padding:0.5em;
+          }
+          
+          #issue-list div[data-issue_state="new"]{
+              background:#C1FFC1;
+          }  
 
+          #issue-list div[data-issue_state="resolved"]{
+              background:white;
+              color: #a0a0a0;
+          }  
 
+          #issue-list div[data-issue_state="updated"]{
+              background:papayawhip;
+          }     
+          
+          #issue-list{
+              margin-top:20px;
+          }
 
+          #issue-list pre{
+              padding:1em;
+              margin:0;
+          }   
+          
+          #issue-list>div{
+              position:relative;
+          }
+          
+          #issue-list a.issue-markup-trigger{  
+              font-size: 0.8em;
+              padding: 0.2em 0.5em;
+              background: #eee;      
+              text-decoration: none;    
+              color: #444;
+              position: absolute;
+              right: 10px;
+              top: 10px;  
+              z-index: 1;
+          }  
+          
+           #issue-list a.issue-markup-trigger:hover{
+               background: #ddd;
+               color: #000;
+           }                        
+          
+          #issue-list .showMarkup pre{
+              display: block;
+          }                           
+          
+          #issue-list .showMarkup .issue-marker,
+          #issue-list pre{
+              display: none;
+          }
+      
          .issue-marker {
               background:#eee;  
               border:1px solid #ddd; 
               font-size: 1em;
           }
+          
+          .issue-marker.wrapper {
+              background: none;
+              border: none;
+          }
 
          .issue-marker a:link {
               color: #c00;
@@ -113,7 +212,6 @@
   type="text/css">
   <link href="../alternate-spec-style.css" id=st rel=stylesheet
   title="alternate spec style" type="text/css">
-  <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
 
  <body>
   <div class=head id=div-head>
@@ -126,14 +224,14 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 February
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20120203/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20120204/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -348,6 +446,9 @@
    <li class=no-num><a href="#index">Index</a>
 
    <li class=no-num><a href="#property-index">Property index</a>
+
+   <li><a href="#issue-manager0"><span class=secno>11. </span>Issue
+    manager</a>
   </ul>
   <!--end-toc-->
 
@@ -355,7 +456,7 @@
 
   <p><em>This section is non-normative.</em>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15159 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15159">Bug-15159</a>
    <div class=issue-details>
     <p class=short-desc>Add code samples to the CSS regions use cases page</p>
@@ -376,7 +477,7 @@
    another, where the areas are the multi-column element's column boxes and
    the flow is made of the multi-column element's children.
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15733 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a>
    <div class=issue-details>
     <p class=short-desc>Should the region specification define a mechanism to
@@ -403,7 +504,7 @@
    <p class=caption>Layout requiring sophisticated content flow</p>
   </div>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15131 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug-15131</a>
    <div class=issue-details>
     <p class=short-desc>Add layout to initial example</p>
@@ -562,11 +663,24 @@
 
   <h3 id=regions><span class=secno>2.1. </span>Regions</h3>
 
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
-   <div class=issue-details>
-    <p class=short-desc>Is a mechanism to auto-generate regions necessary in
-     order to support reusable style sheets?</p>
+  <div class="issue-marker wrapper">
+   <div class=issue-marker data-bug_id=15186 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Is a mechanism to auto-generate regions necessary in
+      order to support reusable style sheets?</p>
+    </div>
+   </div>
+
+   <div class=issue-marker data-bug_id=15187 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Explain how regions and pages interact. How can
+      regions be placed onto certain pages, and how can they be positiond
+      wrt. pages.</p>
+    </div>
    </div>
   </div>
 
@@ -636,7 +750,7 @@
    href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
    property</h3>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a>
    <div class=issue-details>
     <p class=short-desc>Creating a named flow from external resource</p>
@@ -729,10 +843,22 @@
    formatting of elements placed into a named flow and of regions laying out
    content from a named flow.
 
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
-   <div class=issue-details>
-    <p class=short-desc>Should first region be ICB for flow content?</p>
+  <div class="issue-marker wrapper">
+   <div class=issue-marker data-bug_id=15858 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Should first region be ICB for flow content?</p>
+    </div>
+   </div>
+
+   <div class=issue-marker data-bug_id=15870 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Describe how containing blocks are used for element
+      fragments</p>
+    </div>
    </div>
   </div>
 
@@ -800,7 +926,7 @@
    class=property>flow-from</code></a>&rsquo; property makes an element a
    region and associates it with a named flow.
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15191 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a>
    <div class=issue-details>
     <p class=short-desc>Should we allow multi-column elements to be regions?</p>
@@ -911,21 +1037,30 @@
    empty named flow and, consequently, its children are not formatted
    visually.</div>
 
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
-   <div class=issue-details>
-    <p class=short-desc>Should regions be non-breakable?</p>
+  <div class="issue-marker wrapper">
+   <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Should regions be non-breakable?</p>
+    </div>
    </div>
-   <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
-   <div class=issue-details>
-    <p class=short-desc>Should regions not create a new stacking context?</p>
+
+   <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Should regions not create a new stacking context?</p>
+    </div>
    </div>
-   <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
-   <div class=issue-details>
-    <p class=short-desc>Specify behavior of stacking contexts that are split
-     between regions</p>
+
+   <div class=issue-marker data-bug_id=15827 data-bug_status=NEW> <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
+    
+    <div class=issue-details>
+     <p class=short-desc>Specify behavior of stacking contexts that are split
+      between regions</p>
+    </div>
    </div>
   </div>
 
@@ -987,7 +1122,7 @@
   <h4 id=auto-width-on-regions><span class=secno>4.2.1. </span>Auto width on
    regions</h4>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15741 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15741">Bug-15741</a>
    <div class=issue-details>
     <p class=short-desc>Regions intrinsic size</p>
@@ -1230,7 +1365,7 @@
      <td>specified value
   </table>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15832 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a>
    <div class=issue-details>
     <p class=short-desc>Should we have region-overflow:nobreak and have
@@ -1353,6 +1488,13 @@
   <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
    rule</h3>
 
+  <div class=issue-marker data-bug_id=15116 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a>
+   <div class=issue-details>
+    <p class=short-desc>Add CSS OM Interface for @region style rules</p>
+   </div>
+  </div>
+
   <p>An &lsquo;<code class=css>@region</code>&rsquo; rule contains style
    declarations specific to particular regions.
 
@@ -1374,7 +1516,7 @@
    rel=biblioentry>[DOM-LEVEL-2-TRAVERSAL-RANGE]<!--{{DOM-LEVEL-2-TRAVERSAL-RANGE}}--></a>)
    from the region's flow that flows in the selected region(s).
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a>
    <div class=issue-details>
     <p class=short-desc>Model for styling element fragments</p>
@@ -1388,7 +1530,7 @@
 
   <p>Only a limited list of properties can be set in a region style rule:
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15190 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a>
    <div class=issue-details>
     <p class=short-desc>List of region style properties</p>
@@ -1544,7 +1686,7 @@
     class=html>region_1</code> is styled with this rule.</p>
   </div>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a>
    <div class=issue-details>
     <p class=short-desc>@region and specificity</p>
@@ -1578,10 +1720,10 @@
 
   <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a>
    <div class=issue-details>
-    <p class=short-desc>add functionality for having textual describtion like
+    <p class=short-desc>add functionality for having textual description like
      "continued here" or "continued on page x" to regions.</p>
    </div>
   </div>
@@ -1628,7 +1770,7 @@
   <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
    and CSS regions</h2>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15679 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a>
    <div class=issue-details>
     <p class=short-desc>elementFromPoint and CSS regions</p>
@@ -1642,7 +1784,7 @@
    content on a mobile phone with a small screen may require more regions
    than on a large desktop display.
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15010 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15010">Bug-15010</a>
    <div class=issue-details>
     <p class=short-desc>Need to add a CSSRegionRule to Region OM</p>
@@ -1665,7 +1807,7 @@
   <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
    interface</h3>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=14948 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Bug-14948</a>
    <div class=issue-details>
     <p class=short-desc>What should getFlowByName return if there is no flow
@@ -1698,7 +1840,7 @@
    class=idl>Document</code></a> interface provides access to the document's
    <a href="#named-flow0">named flow</a> instances.
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15828 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug-15828</a>
    <div class=issue-details>
     <p class=short-desc>Should add a &lsquo;<a
@@ -1864,7 +2006,7 @@
   <h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
    layout events</h3>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15009 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15009">Bug-15009</a>
    <div class=issue-details>
     <p class=short-desc>Should we have additional events for CSS Regions?</p>
@@ -2536,6 +2678,35 @@
   <!--end-index-->
 
   <h2 class=no-num id=property-index>Property index</h2>
+  <!-- template markup for issues pulled from Bugzilla -->
+  <script id=issue-template type="text/template">
+</script>
+
+  <div class=issue-marker data-bug_id="{{bug_id}}"
+   data-bug_status="{{bug_status}}"> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a>
+   
+   <div class=issue-details>
+    <p class=short-desc>{{short_desc}}</p>
+   </div>
+  </div>
+  <!--
+    <script type="text/javascript" src="BugzillaTracker.js"></script>
+    <script type="text/javascript" src="BugzillaTrackerCSSRegions.js"></script>
+    -->
+
+  <div id=issue-manager>
+   <h2 id=issue-manager0><span class=secno>11. </span>Issue manager</h2>
+
+   <form action="#"></form>
+   <label> <input checked name=issue-filter type=radio value=all> All issues
+   </label> <label> <input name=issue-filter type=radio value=updated>
+   Updated issues </label> <label> <input name=issue-filter type=radio
+   value=new> New issues </label>
+   <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page -->
+   
+   <div id=issue-list></div>
+  </div>
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:

--- issue_tracker.js DELETED ---

--- NEW FILE: BugzillaTrackerCSSRegions.js ---
(function(){
    function getIssuesFromDocument(){ 
        var list = {},
            issues = document.querySelectorAll(".issue-marker");

        if (issues){
            // make issue an array
            issues = Array.prototype.slice.call(issues); 

            // pluck out the bug data from the DOM object
            issues.forEach(function(issue){ 

                var bugId = issue.dataset["bug_id"];

                if (bugId){
                    list[bugId] = {
                        "bug_status": issue.dataset["bug_status"],
                        "short_desc": issue.querySelector(".short-desc").innerText
                    }
                }  
                
            })
        }

        return list;
    } 
    
    // Decorate the issues received from the sever with their state related to the issues in the page (new, changed)
    function setIssueStates(serverIssues, documentIssues){
        var serverIssue, documentIssue;
        
        if (!serverIssues){
            throw new TypeError("Missing 'serverIssues' from server. Expected Object, got "+ typeof serverIssues)
        }

        if (!documentIssues){
            throw new TypeError("Missing 'documentIssues' from document. Expected Object, got "+ typeof documentIssues)
        }

        for (var bugId in serverIssues){
            serverIssue = serverIssues[bugId];
            documentIssue = documentIssues[bugId];
            
            // is the bug in the doument?
            if (documentIssues[bugId]){

                // bug status has changed. it's an updated issue  
                if ( (documentIssue.bug_status !== serverIssue.bug_status) || 
                    (documentIssue.short_desc !== serverIssue.short_desc) ){  
                                                                                
                    serverIssue.issue_state = "updated"; 
                }  
            }
            else{ 
                // not found in the document. it's a new issue if the bug_status
                // is not RESOLVED
                if (serverIssue.bug_status === "RESOLVED") {
                    serverIssue.issue_state = 'resolved';
                } else {
                    serverIssue.issue_state = "new";
                }
            }
        }

        return serverIssues;    
    } 

    // "this" is bound to the "BugzillaTracker" instance
    function renderIssues(serverIssues){  

        if (!serverIssues && !serverIssues.length){
            return;
        }     
        
        // get a list of bugs from the document  
        var documentIssues = getIssuesFromDocument();
        
        // get the bugs list with the updated state (not bug status) related to the bugs already in the page
        var issueList = setIssueStates(serverIssues, documentIssues);
        
        var fragment =  document.createDocumentFragment();
        
        for (var issueId in issueList){
            
            // bind the bug data to the bug template
            var issueFragment = this.renderIssue(issueList[issueId]);
            
            var wrapper = document.createElement("div"); 
            var trigger = document.createElement("a");
            trigger.className = "issue-markup-trigger";
            trigger.href = "#";          
            trigger.innerHTML = "toggle markup"
            
            if (issueList[issueId]["issue_state"]){
                wrapper.setAttribute("data-issue_state", issueList[issueId]["issue_state"]);
            }     
            
            wrapper.appendChild(trigger);
            wrapper.appendChild(issueFragment);
            fragment.appendChild(wrapper); 
        }
       
        var issueListContainer = document.querySelector("#issue-list"); 
        issueListContainer.appendChild(fragment);
         
        // show/hide the markup for a bug entry
        issueListContainer.addEventListener("click", toggleMarkup);
    } 
    
    function toggleMarkup(e){
        if (e.target.className && e.target.classList.contains("issue-markup-trigger")){      
            e.preventDefault();       
            
            var parent = e.target.parentNode,
                issueEl = parent.querySelector(".issue-marker"),
                markup = issueEl.outerHTML;
                
           
            parent.classList.toggle("showMarkup");
            
            // already generated the markup
            if (parent.querySelector("pre")){   
                return
            }
            else{
                var pre = document.createElement("pre");
                pre.textContent = markup;

                parent.appendChild(pre);   
            }
        }
    }  
    
    function filterIssues(e){
        if (e.target.name !== "issue-filter"){
            return
        } 
        
        var issueManager = document.querySelector("#issue-manager");
        
        switch(e.target.value){
            case "all": 
                issueManager.removeAttribute("data-view_state");
            break;
            
            case "new":
                issueManager.setAttribute("data-view_state", "new");
            break;
            
            case "updated":
                issueManager.setAttribute("data-view_state", "updated");
            break;
        }
    }   

    document.addEventListener("DOMContentLoaded", function(){  
       BugzillaTracker.setIssueTemplate(document.querySelector("#issue-template").innerHTML); 
       BugzillaTracker.sync(
           {
               product: "CSS",
               component: "CSS Regions",
           }, 
           renderIssues); 
           
       document.querySelector("#issue-manager form").addEventListener("change", filterIssues)   
    })    
})()

--- NEW FILE: BugzillaTracker.js ---
(function(){ 
    
    // Templating engine
    var TemplateManager = (function(){ 
        
        /*                  
            Convert an HTML string into a valid node structure.
             
            @param {String} string The string HTML to be converted to nodes
            @return {DocumentFragment} a DocumentFragment with the node structure
       */
        var _convertStringToNode = function(string){
            // make a temporary container
            var temp = document.createElement("div");

            // let the parser turn the template into a valid node structure
            temp.innerHTML = string; 

            // create document fragment as payload container
            var fragment = document.createDocumentFragment();

            while(temp.firstChild){   

                // extract nodes from the temp container into the payload container
                fragment.appendChild(temp.firstChild)
            }  
        
            return fragment;       
        }  

        var _createTemplateFn = function(replaceVars, template){
       
            return function(data){  
                
                if (replaceVars.length && data !== null){
                    var templateClone = template; 
                    
                    for (var i = 0, len = replaceVars.length; i < len; i++){   

                        // extract just the variable name, without template markers
                        var key = replaceVars[i].replace("{{","").replace("}}","");

                        // do we have a value for this template variable?
                        if (data[key]){                          

                            // global regex pattern based on template variable 
                            var pattern =  new RegExp(replaceVars[i], "g"); 

                            // replace template variable with real data
                            templateClone = templateClone.replace(pattern, data[key]);  
                        }
                    }
                }    
            
                // return a nicely wrapped node structure to be appended to the document
                return _convertStringToNode(templateClone)
            }  
        }
    
    
        return { 
            
            /*  
                Create a template function from a string of HTML markup
                Extract template variables for quick reuse.
                
                @param {String} template A string of HTML with template variables marked as {{variable-name}}
                @return {Function} A function that expects a data object to populate the template
            */
            compile: function(template){  
        
                if (typeof template !== "string"){
                      throw new TypeError("Invalid templateString type. Expected 'String', got " + typeof templateString)
                }       
            
                // look for all the varialbes to be replaced. they look like {{varName}}
                var replaceVars = template.match(/{{[\w_-]*}}/g);  
            
                return _createTemplateFn(replaceVars, template) 
            }
        }  
    })();  
    
    // Bugzilla tracker
    var BugzillaTracker = (function(){ 
        
        var _cache = {},
            _config = { 
                bugSearchURL: "https://www.w3.org/Bugs/Public/buglist.cgi",
                scriptId: "BugzillaTracker",
                onSync: _onSync
            },
            _queryParams = {
                product: "CSS",
                component: "CSS Regions",
                ctype: "js"
            };
        
        
        function _getScript(url){
             var script = document.createElement("script"),
                 oldScript = document.getElementById(_config.scriptId),
                 target = document.getElementsByTagName("script")[0]; 
             
             // Bugzilla returns results in the global namespace.
             // Remove old script references to avoid poluted results
             if (oldScript){
                 oldScript.parentNode.removeChild(oldScript)
             }                                             
             
             script.type = "text/javascript";
             script.src = url;
             script.id = _config.scriptId; 
             
             return target.parentNode.insertBefore(script, target);
         }
        
        /*
            Extend an object with the properties and value of other objects.
            Uses the function arguments as source objects. 
            Same-name properties will be overwritten if found in subsequent source objects.
            
            @param {Object} object The target object that will be extended
            @return {Object} an object containing all the keys and the values of the source objects
            
            @example 
            _extend({}, {value: "1"}, {isPublic: false }) 
        */
        function _extend(object){   
              
            // make arguments an array and get all the arguments, except the first one
            var sources = Array.prototype.slice.call(arguments, 1);
            
            if (sources && sources.length){
                sources.forEach(function(source){
                    for (var property in source){
                        object[property] = source[property]
                    }
                })
            }   
            
            return object;
        }  
        
        /*
            Convert an object with key/value pairs into a query string.
            Value entities are encoded for use in HTTP requests.
         
            @param {Object} object The object to be serialized.
            @return {String} The serialized object;
        */
        function _serialize(object){
            var pairs = [];
            for (var key in object){
                pairs.push( key + "=" + encodeURIComponent(object[key]) )
            }
           
            return pairs.join("&");
        } 
        
        /*   
            Convert the Bugzilla bug data array into an object. 
            To maintain consistency where Bugzilla didn't, the object keys are named as the ones returned by the Bugzilla API when requesting a single bug.
            
            When requesting bugLists as JavaScript Bugzilla returns each bug's data as an array of 7 values in this order:
            
            [
                bug severity, 
                bug priority, 
                operating system,
                username assigned to bug,
                bug status,
                bug resolution,
                bug description (title)
            ]
            
            @param {Array} array The bug details as values of a 7 items array;
            
            @return {Object} An object with keys an values describing the bug ( The way we like it in the real world! ) 
            
        */
        function _createBugObject(array){ 
            if (array.length !== 7){
                throw new Error("Invalid bug data. Expected array of 7 values.")
            }
            
            return {
                "bug_severity": array[0],
                "priority": array[1],
                "op_sys": array[2],  // operating system
                "assigned_to": array[3],
                "bug_status": array[4],
                "resolution": array[5], 
                "short_desc": array[6]
            }
        }
        
        function _onSync(bugList){ 
            
            console.log("onsync", bugList)
        }
        
        function _getCallbackFn(){
            return function(bugList){  
                 
                // No bugs; Silent failure
                if (!bugList || !bugList.length){ 
                    return  
                } 
                 
                var bugObj,
                    bugs = {};
                
                bugList.forEach(function(bug, index){        
                    
                    var bugObj = _createBugObject(bug, index);
                               
                    if (bugObj){
                        bugObj["bug_id"] = index;   
                        bugs[index] = bugObj;
                    }    
                    
                })  
                
                // run user-provided callback with the bug list
                _config.onSync.call(BugzillaTracker, bugs)
                
                // restore any previously buglistCallback function
                if (typeof _cache.buglistCallback == "function"){
                    window.buglistCallback = _cache.buglistCallback
                }
            }
        }  
        
        return { 
            
            /*
                Request bugs from Bugzilla based on seach query parameters.
                
                @param {Object} queryParams A map of query parameters for the Bugzilla API

                @example      
                {        
                    product: "CSS",
                    component: "CSS Regions"
                }
            */
            sync: function(queryParams, callbackFn){
                
                var params = _extend({}, _queryParams, queryParams),
                    queryString = _serialize(params),
                    url = _config.bugSearchURL + "?" + queryString;  
                    
                if (typeof callbackFn == "function"){  
                    _config.onSync = callbackFn;
                }
                
                /* 
                   Bugzilla has a hardcoded callback function in the response when returning results as JavaScript (ctype=js).
                   It is window.buglistCallback(array); It receives a single paramter: an array of objects describing bugs.

                   Cache the reference to this callback if it already exists. 
                   Avoid collisions, replace with our own callback method, then restore the old function it other scripts may need it.
                */   
                if (typeof window.buglistCallback == "function"){
                    _cache.buglistCallback = window.buglistCallback;
                } 
                
                // Set our own handler. After running, it will replace itself with the original callback, if function was defined.
                window.buglistCallback = _getCallbackFn();
                
                _getScript(url);
            },  
            
            // overwrite default configuration (ex: Bugzilla buglist.cgi URL)
            setOptions: function(options){
                _config = _extend({}, _config, options)
            },
            
            setIssueTemplate: function(string){
                if (string && typeof string){ 
                    _config.issueTemplate = TemplateManager.compile(string);
                    
                    // usage
                    // _config.issueTemplate({bug_id: "1234", short_desc: "oprea e aici!"})
                }
            },
            
            renderIssue: function(bugData){    
                return _config.issueTemplate(bugData)
            }
        }
    })();
    
    window.BugzillaTracker = BugzillaTracker;
})()

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.54
retrieving revision 1.55
diff -u -d -r1.54 -r1.55
--- Overview.src.html	3 Feb 2012 13:09:40 -0000	1.54
+++ Overview.src.html	4 Feb 2012 06:13:11 -0000	1.55
@@ -58,31 +58,130 @@
              display: none;
          }
          
-         @media screen and (min-width: 68em){
+         @media screen and (min-width: 68em){    
+             
                   .issue-marker {
                       position: absolute;
                       width: 20ex;
                       margin-left: -22ex;
                       text-align: right;
+                      margin-bottom: 1em;
+                  }
+                  
+                  div.issue-marker .issue-marker {
+                      position: static;
+                      width: auto;
+                      margin-left: 0;
+                      text-align: right;
+                  }  
+                  
+                  div.issue-marker {
+                      position: absolute;
+                      width: 20ex;
+                      margin-left: -22ex;
                   }
          }
 
          @media screen and (max-width: 68em){
                   .issue-marker {
+                      margin-bottom: 1em;
                   }
                   
                   .issue-marker a:link {
                       padding-left: 0.5em;
                   }
+         } 
+         
+         #issue-manager form{
+             background: #eee;
+             padding:10px 1em;
          }
+         
+         /* hide all non-"updated" issues */
+         #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){
+             display:none;
+         }
+            
+         /* hide all non-"new" issues */
+         #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){
+             display:none;
+         }
+                  
+          #issue-manager .issue-marker{ 
+              background: none;
+              position: relative;  
+              margin:0; 
+              width:auto;
+              text-align:left; 
+              padding:0.5em 0;
+          }
+          
+          #issue-manager .issue-marker a:link{
+              padding:0.5em;
+          }
+          
+          #issue-list div[data-issue_state="new"]{
+              background:#C1FFC1;
+          }  
 
+          #issue-list div[data-issue_state="resolved"]{
+              background:white;
+              color: #a0a0a0;
+          }  
 
+          #issue-list div[data-issue_state="updated"]{
+              background:papayawhip;
+          }     
+          
+          #issue-list{
+              margin-top:20px;
+          }
 
+          #issue-list pre{
+              padding:1em;
+              margin:0;
+          }   
+          
+          #issue-list>div{
+              position:relative;
+          }
+          
+          #issue-list a.issue-markup-trigger{  
+              font-size: 0.8em;
+              padding: 0.2em 0.5em;
+              background: #eee;      
+              text-decoration: none;    
+              color: #444;
+              position: absolute;
+              right: 10px;
+              top: 10px;  
+              z-index: 1;
+          }  
+          
+           #issue-list a.issue-markup-trigger:hover{
+               background: #ddd;
+               color: #000;
+           }                        
+          
+          #issue-list .showMarkup pre{
+              display: block;
+          }                           
+          
+          #issue-list .showMarkup .issue-marker,
+          #issue-list pre{
+              display: none;
+          }
+      
          .issue-marker {
               background:#eee;  
               border:1px solid #ddd; 
               font-size: 1em;
           }
+          
+          .issue-marker.wrapper {
+              background: none;
+              border: none;
+          }
 
          .issue-marker a:link {
               color: #c00;
@@ -118,9 +217,6 @@
         
        <link id="st" href="../alternate-spec-style.css" rel="stylesheet" 
               type="text/css" title="alternate spec style">
-              
-       <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
-        
 </head>
 
 
@@ -215,7 +311,7 @@
 
     <p><em>This section is non-normative.</em></p>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15159" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15159">Bug-15159</a>
 
@@ -238,7 +334,7 @@
     another, where the areas are the multi-column element's column boxes and
     the flow is made of the multi-column element's children.</p>
     
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15733" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a>
 
@@ -268,7 +364,7 @@
         <p class="caption">Layout requiring sophisticated content flow</p>
     </div>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15131" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug-15131</a>
 
@@ -417,7 +513,8 @@
 
     <h3 id="regions">Regions</h3>
 
-    <div class="issue-marker">
+    <div class="issue-marker wrapper">
+    <div class="issue-marker" data-bug_id="15186" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
 
@@ -427,6 +524,14 @@
         </div>
     </div>
     
+    <div class="issue-marker" data-bug_id="15187" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a>
+        <div class="issue-details">
+            <p class="short-desc">Explain how regions and pages interact. How can regions be   placed onto certain pages, and how can they be positiond wrt. pages.</p>
+        </div>  
+    </div>
+    </div>
+    
     <p class="index" title="region" id="region">A region is an element that
     generates a <a href=
     "http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
@@ -487,7 +592,7 @@
 
     <h3 id="the-flow-into-property">The 'flow-into' property</h3>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15811" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a>
 
@@ -582,7 +687,8 @@
     formatting of elements placed into a named flow and of regions laying out
     content from a named flow.</p>
 
-    <div class="issue-marker">
+    <div class="issue-marker wrapper">
+    <div class="issue-marker" data-bug_id="15858" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
 
@@ -590,7 +696,15 @@
             <p class="short-desc">Should first region be ICB for flow content?</p>
         </div>
     </div>
-
+    
+    <div class="issue-marker" data-bug_id="15870" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a>
+        <div class="issue-details">
+            <p class="short-desc">Describe how containing blocks are used for element fragments</p>
+        </div>  
+    </div>
+    </div>
+    
     <p>The edges of the first region in a region chain associated with a named flow establish 
         the rectangle that is the 
         <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a> 
@@ -628,7 +742,7 @@
     <h3 id="the-flow-from-property">The 'flow-from' property</h3>
 
     <p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15191" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a>
 
@@ -738,21 +852,25 @@
         are not formatted visually.
         </div>
         
-    
-    <div class="issue-marker">
+    <div class="issue-marker wrapper">
+    <div class="issue-marker" data-bug_id="15189" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
 
         <div class="issue-details">
             <p class="short-desc">Should regions be non-breakable?</p>
         </div>
+    </div>
+    <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW">
 
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
 
         <div class="issue-details">
             <p class="short-desc">Should regions not create a new stacking context?</p>
-        </div>    
+        </div> 
+     </div>   
+     <div class="issue-marker" data-bug_id="15827" data-bug_status="NEW">
         
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
@@ -760,9 +878,8 @@
         <div class="issue-details">
             <p class="short-desc">Specify behavior of stacking contexts that are split between regions</p>
         </div>    
-        
-        
-        </div>
+     </div>
+     </div>
 
     <p><span title="region">Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p>
     
@@ -818,7 +935,7 @@
     
     <h4>Auto width on regions</h4>
     
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15741" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15741">Bug-15741</a>
 
@@ -1077,7 +1194,7 @@
         </tr>
     </table>
     
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15832" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a>
 
@@ -1198,6 +1315,13 @@
 
     <h3 id="the-at-region-style-rule">The @region rule</h3>
 
+    <div class="issue-marker" data-bug_id="15116" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a>
+        <div class="issue-details">
+            <p class="short-desc">Add CSS OM Interface for @region style rules</p>
+        </div>  
+    </div>
+    
     <p>An '@region' rule contains style declarations specific to particular
     regions.</p>
 
@@ -1216,7 +1340,7 @@
     [[DOM-LEVEL-2-TRAVERSAL-RANGE]]) from the region's flow that flows in the
     selected region(s).</p>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15713" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a>
 
@@ -1233,7 +1357,7 @@
 
     <p>Only a limited list of properties can be set in a region style rule:</p>
     
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15190" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a>
 
@@ -1351,7 +1475,7 @@
 
 
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15734" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a>
 
@@ -1380,14 +1504,12 @@
 
     <h2 id="pseudo_elements">Pseudo-elements</h2>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a>
 
         <div class="issue-details">
-            <p class="short-desc">add functionality for having textual
-            describtion like "continued here" or "continued on page x" to
-            regions.</p>
+            <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p>
         </div>
     </div>
     
@@ -1419,7 +1541,7 @@
  
     <h2 id="cssom_view_and_css_regions">CSSOM view and CSS regions</h2>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15679" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a>
 
@@ -1435,7 +1557,7 @@
     content on a mobile phone with a small screen may require more regions than
     on a large desktop display.</p>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15010" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15010">Bug-15010</a>
 
@@ -1460,7 +1582,7 @@
 
     <h3 id="the-namedflow-interface">The NamedFlow interface</h3>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="14948" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Bug-14948</a>
 
@@ -1493,7 +1615,7 @@
     >named flow</span> instances.</p>
     
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15828" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug-15828</a>
 
@@ -1636,7 +1758,7 @@
     
     <h3 id="region-flow-layout-events">Region flow layout events</h3>
     
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15009" data-bug_status="NEW">
         <a href=
         "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15009">Bug-15009</a>
 
@@ -1883,7 +2005,44 @@
     <h2 class="no-num" id="index">Index</h2><!--index-->
 
     <h2 class="no-num" id="property-index">Property index</h2>
-
+    
+    <!-- template markup for issues pulled from Bugzilla -->
+    <script type="text/template" id="issue-template">
+<div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
+    <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a>
+    <div class="issue-details">
+        <p class="short-desc">{{short_desc}}</p>
+    </div>  
+</div>
+    </script>   
+    <!--
+    <script type="text/javascript" src="BugzillaTracker.js"></script>
+    <script type="text/javascript" src="BugzillaTrackerCSSRegions.js"></script>
+    -->
+    
+    <div id="issue-manager"> 
+        <h2>Issue manager</h2>
+        <form action="#">
+            <label>       
+                <input type="radio" name="issue-filter" value="all" checked/>
+                All issues
+            </label>
+            <label>       
+                <input type="radio" name="issue-filter" value="updated" />
+                Updated issues
+            </label>
+            <label>       
+                <input type="radio" name="issue-filter" value="new" />
+                New issues
+            </label>
+        </form>
+        
+        <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page -->
+        <div id="issue-list">
+            
+        </div>
+    </div>
+    
 </body>
 </html>
 <!-- Keep this comment at the end of the file
Received on Saturday, 4 February 2012 06:13:17 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC