Changeset 206


Ignore:
Timestamp:
09/28/13 14:38:12 (6 years ago)
Author:
nhoyt
Message:

Added Element Results tree in Rule Details view. Moved Rule Information code to rule-info.js and added file element-results.js. Still need to update tree-sort.js to allow different sort orders for additional sort columns.

Also moved some of the Rule Category calls in ai-sidebar.js updateView function to view-category.js setCategoryView function.

Location:
trunk/proto-14/chrome
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/proto-14/chrome/content/ai-sidebar.js

    r205 r206  
    277277      break; 
    278278    default: 
    279       ainspectorSidebar.ruleResultsTable = ainspectorSidebar.getRuleResultsTable(); 
    280       ainspectorSidebar.sortRuleResults(); 
    281279      ainspectorSidebar.setCategoryView(); 
    282280      break; 
  • trunk/proto-14/chrome/content/tree-sort.js

    r205 r206  
    1010 *   tree  {Object} - tree element with custom tree view 
    1111 *   table {Object} - data table on which custom tree view is based 
     12 *   viewConstructor {Function} - custom tree view constructor (called with table arg) 
    1213 *   defaultOrder  {String} - "ascending" or "descending" 
    1314 *   defaultColumn {String} - default primary sort column 
     
    1617 *   sortColumn4   {String} - [can be null] 4th column for breaking ties in 3rd sort column 
    1718 *   defaultSortButton {Object} - [can be null] button element for default sort 
    18  *   viewConstructor {Function} - custom tree view constructor (called with table arg) 
    19  *   updateCallback  {Function} - called after new tree view created (with tree arg) 
     19 *   updateCallback  {Function} - [can be null] called after new tree view created (with tree arg) 
    2020 * 
    2121 * @param column {XUL treecol element} [optional] - primary sort column 
     
    2424var sortTree = function (properties, column) { 
    2525 
    26   var tree = properties.tree; 
    27   var table = properties.table; 
    28   var defaultOrder  = properties.defaultOrder; 
    29   var defaultColumn = properties.defaultColumn; 
    30   var sortColumn2   = properties.sortColumn2; 
    31   var sortColumn3   = properties.sortColumn3; 
    32   var sortColumn4   = properties.sortColumn4; 
     26  var tree              = properties.tree; 
     27  var table             = properties.table; 
     28  var viewConstructor   = properties.viewConstructor; 
     29  var defaultOrder      = properties.defaultOrder; 
     30  var defaultColumn     = properties.defaultColumn; 
     31  var sortColumn2       = properties.sortColumn2; 
     32  var sortColumn3       = properties.sortColumn3; 
     33  var sortColumn4       = properties.sortColumn4; 
    3334  var defaultSortButton = properties.defaultSortButton; 
    34   var viewConstructor = properties.viewConstructor; 
    35   var updateCallback = properties.updateCallback; 
     35  var updateCallback    = properties.updateCallback; 
    3636 
    3737  var order = tree.getAttribute("sortDirection") == "ascending" ? 1 : -1; 
  • trunk/proto-14/chrome/content/view-category.js

    r205 r206  
    5353    tree: document.getElementById("ainspector-rule-category-tree"), 
    5454    table: ainspectorSidebar.ruleResultsTable, 
    55     defaultOrder:  ainspectorSidebar.ruleResultConst.DEFAULT_ORDER, 
    56     defaultColumn: ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN, 
    57     sortColumn2:   ainspectorSidebar.ruleResultConst.SORT_COL_2, 
    58     sortColumn3:   ainspectorSidebar.ruleResultConst.SORT_COL_3, 
    59     sortColumn4:   ainspectorSidebar.ruleResultConst.SORT_COL_4, 
     55    viewConstructor: ainspectorSidebar.TreeViewCategory, 
     56    defaultOrder:    ainspectorSidebar.ruleResultConst.DEFAULT_ORDER, 
     57    defaultColumn:   ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN, 
     58    sortColumn2:     ainspectorSidebar.ruleResultConst.SORT_COL_2, 
     59    sortColumn3:     ainspectorSidebar.ruleResultConst.SORT_COL_3, 
     60    sortColumn4:     ainspectorSidebar.ruleResultConst.SORT_COL_4, 
    6061    defaultSortButton: document.getElementById("ainspector-rc-default-sort"), 
    61     viewConstructor: ainspectorSidebar.TreeViewCategory, // called with table arg 
    62     updateCallback: ainspectorSidebar.updateSelectedRuleInfo // called with tree arg 
     62    updateCallback: ainspectorSidebar.updateSelectedRuleInfo 
    6363  }; 
    6464 
     
    110110 * @memberOf ainspectorSidebar 
    111111 * 
    112  * @desc  
     112 * @desc Build data table (array of objects) containing rule result info 
     113 *       corresponding to the currently selected view. 
    113114 */ 
    114115 
     
    233234ainspectorSidebar.setCategoryView = function () { 
    234235  var summary = ainspectorSidebar.ruleCategorySummary; 
    235   var tree = ainspectorSidebar.ruleCategoryTree; 
     236 
     237  // update summary grid 
     238  summary.setData(ainspectorSidebar.getSummaryData(parent.AINSPECTOR.currentView)); 
     239 
     240  // update rule results 
     241  ainspectorSidebar.ruleResultsTable = ainspectorSidebar.getRuleResultsTable(); 
     242  ainspectorSidebar.sortRuleResults(); 
    236243 
    237244  // select rule category template 
    238245  ainspectorSidebar.viewDeck.selectedIndex = ainspector.viewType.CATEGORY; 
    239  
    240   // update summary grid 
    241   summary.setData(ainspectorSidebar.getSummaryData(parent.AINSPECTOR.currentView)); 
    242  
    243   // update rule results tree 
    244   tree.view = new ainspectorSidebar.TreeViewCategory(ainspectorSidebar.ruleResultsTable); 
    245  
    246   // update selected rule textbox 
    247   ainspectorSidebar.updateSelectedRuleInfo(tree); 
    248246}; 
    249247 
  • trunk/proto-14/chrome/content/view-details.js

    r205 r206  
    1111 */ 
    1212var ainspectorSidebar = ainspectorSidebar || {}; 
    13  
    14 Components.classes["@mozilla.org/moz/jssubscript-loader;1"] 
    15   .getService(Components.interfaces.mozIJSSubScriptLoader) 
    16   .loadSubScript("chrome://ai-sidebar/content/utilities/dom.js", ainspectorSidebar); 
    1713 
    1814/** 
     
    4339  // update summary grid 
    4440  summary.setData(ainspectorSidebar.getRuleResultSummaryData(ruleResult)); 
     41 
     42  // update element results 
     43  ainspectorSidebar.updateElementResults(ruleResult); 
    4544 
    4645  // fill content areas 
     
    9594  return data; 
    9695}; 
    97  
    98 /** 
    99  * @function getRuleInfoLabels 
    100  * 
    101  * @memberOf ainspectorSidebar 
    102  * 
    103  * @desc Helper function for getting Rule Information labels from properties file. 
    104  */ 
    105  
    106 ainspectorSidebar.getRuleInfoLabels = function () { 
    107   var nls = ainspectorSidebar.nlsProperties; 
    108   return { 
    109     SUMMARY:         nls.getString("info.summary"), 
    110     RESULT:          nls.getString("info.result"), 
    111  
    112     DEFINITION:      nls.getString("info.definition"), 
    113     COMPLIANCE:      nls.getString("info.compliance"), 
    114     PURPOSE:         nls.getString("info.purpose"), 
    115     TARGET_ELEMENTS: nls.getString("info.target-elements"), 
    116     TECHNIQUES:      nls.getString("info.techniques"), 
    117     WCAG_SC:         nls.getString("info.wcag-sc"), 
    118     INFO_LINKS:      nls.getString("info.info-links"), 
    119  
    120     RECOMMENDED:     nls.getString("info.recommended"), 
    121     REQUIRED:        nls.getString("info.required"), 
    122     WCAG_LEVEL:      nls.getString("info.wcag-level"), 
    123  
    124     ARIA_STRICT:     nls.getString("option.ruleset.aria-strict"), 
    125     ARIA_TRANS:      nls.getString("option.ruleset.aria-transitional") 
    126   } 
    127 }; 
    128  
    129 /** 
    130  * @function setDetailsSummaryContent 
    131  * 
    132  * @memberOf ainspectorSidebar 
    133  * 
    134  * @desc Set the content for top-most vbox of Rule Details. 
    135  */ 
    136  
    137 ainspectorSidebar.setDetailsSummaryContent = function (ruleResult) { 
    138   var getHTML = ainspectorSidebar.createXHTMLElement; 
    139   var addHTML = ainspectorSidebar.appendXHTMLElement; 
    140   var h2, p; 
    141   var h2FirstStyle = ainspector.html.h2FirstStyle; 
    142   var h2Style = ainspector.html.h2Style; 
    143   var pStyle  = ainspector.html.pStyle; 
    144  
    145   var vbox = document.getElementById("ainspector-details-summary"); 
    146   ainspectorSidebar.clearContent(vbox); 
    147  
    148   // get prefix labels 
    149   var labels = ainspectorSidebar.getRuleInfoLabels(); 
    150  
    151   // Summary 
    152   h2 = getHTML("h2", labels.SUMMARY, h2FirstStyle); 
    153   addHTML(vbox, h2); 
    154  
    155   p = getHTML("p", ruleResult.getRuleSummary(), pStyle); 
    156   addHTML(vbox, p, 2); 
    157  
    158   // Result 
    159   h2 = getHTML("h2", labels.RESULT, h2Style); 
    160   addHTML(vbox, h2); 
    161  
    162   p = getHTML("p", ruleResult.getResultMessage(), pStyle); 
    163   addHTML(vbox, p, 2); 
    164 }; 
    165  
    166 /** 
    167  * @function setDetailsRuleInfoContent 
    168  * 
    169  * @memberOf ainspectorSidebar 
    170  * 
    171  * @desc Set the content for the Rule Information vbox/tabpanel of Rule Details. 
    172  */ 
    173  
    174 ainspectorSidebar.setDetailsRuleInfoContent = function (ruleResult) { 
    175   var getHTML = ainspectorSidebar.createXHTMLElement; 
    176   var addHTML = ainspectorSidebar.appendXHTMLElement; 
    177   var h2, p, ul, li, a; 
    178   var h2FirstStyle = ainspector.html.h2FirstStyle; 
    179   var h2Style = ainspector.html.h2Style; 
    180   var pStyle  = ainspector.html.pStyle; 
    181   var ulStyle = ainspector.html.ulStyle; 
    182  
    183   var vbox = document.getElementById("ainspector-details-rule-info"); 
    184   ainspectorSidebar.clearContent(vbox); 
    185  
    186   // get prefix labels 
    187   var labels = ainspectorSidebar.getRuleInfoLabels(); 
    188  
    189   var ruleType = ruleResult.isRuleRequired() ? labels.REQUIRED : labels.RECOMMENDED; 
    190  
    191   // Definition 
    192   h2 = getHTML("h2", labels.DEFINITION, h2FirstStyle); 
    193   addHTML(vbox, h2); 
    194  
    195   p = getHTML("p", ruleResult.getRuleDefinition(), pStyle); 
    196   addHTML(vbox, p, 2); 
    197  
    198   // Compliance 
    199   h2 = getHTML("h2", labels.COMPLIANCE, h2Style); 
    200   addHTML(vbox, h2); 
    201  
    202   p = getHTML("p", labels.WCAG_LEVEL + ruleResult.getWCAG20Level() + "; " + ruleType, pStyle); 
    203   addHTML(vbox, p, 2); 
    204  
    205   // Purpose 
    206   h2 = getHTML("h2", labels.PURPOSE, h2Style); 
    207   addHTML(vbox, h2); 
    208  
    209   p = getHTML("p", ruleResult.getPurpose(), pStyle); 
    210   addHTML(vbox, p, 2); 
    211  
    212   // Target Elements 
    213   h2 = getHTML("h2", labels.TARGET_ELEMENTS, h2Style); 
    214   addHTML(vbox, h2); 
    215  
    216   p = getHTML("p", ruleResult.getTargetResources().join(", "), pStyle); 
    217   addHTML(vbox, p, 2); 
    218  
    219   // Techniques 
    220   h2 = getHTML("h2", labels.TECHNIQUES, h2Style); 
    221   addHTML(vbox, h2); 
    222  
    223   ul = getHTML("ul", null, ulStyle); 
    224   var techniques = ruleResult.getTechniques(); 
    225   for (var i = 0; i < techniques.length; i++) { 
    226     li = getHTML("li", techniques[i], null); 
    227     addHTML(ul, li); 
    228   } 
    229   addHTML(vbox, ul); 
    230  
    231   // WCAG Success Criteria 
    232   h2 = getHTML("h2", labels.WCAG_SC, h2Style); 
    233   addHTML(vbox, h2); 
    234  
    235   // Primary Criterion 
    236   ul = getHTML("ul", null, ulStyle); 
    237   var primary = ruleResult.getPrimarySuccessCriterion(); 
    238   li = getHTML("li", null, null); 
    239   a = getHTML("a", primary.title, { 
    240     "href": primary.url, 
    241     "target": "_blank", 
    242     "style": "text-decoration: underline" 
    243   }); 
    244   li.appendChild(a); 
    245   addHTML(ul, li); 
    246  
    247   // Related Criteria 
    248   var related = ruleResult.getRelatedSuccessCriteria(); 
    249   for (var j = 0; j < related.length; j++) { 
    250     li = getHTML("li", null, null); 
    251     a = getHTML("a", related[j].title, { 
    252       "href": related[j].url, 
    253       "target": "_blank", 
    254       "style": "text-decoration: underline" 
    255     }); 
    256     li.appendChild(a); 
    257     addHTML(ul, li); 
    258   } 
    259   addHTML(vbox, ul); 
    260  
    261   // Informational Links 
    262   h2 = getHTML("h2", labels.INFO_LINKS, h2Style); 
    263   addHTML(vbox, h2); 
    264  
    265   ul = getHTML("ul", null, ulStyle); 
    266   var infoLinks = ruleResult.getInformationalLinks(); 
    267   for (var k = 0; k < infoLinks.length; k++) { 
    268     li = getHTML("li", null, null); 
    269     a = getHTML("a", infoLinks[k].title, { 
    270       "href": infoLinks[k].url, 
    271       "target": "_blank", 
    272       "style": "text-decoration: underline" 
    273     }); 
    274     li.appendChild(a); 
    275     addHTML(ul, li); 
    276   } 
    277   addHTML(vbox, ul); 
    278 }; 
  • trunk/proto-14/chrome/content/view-details.xul

    r177 r206  
    77 
    88  <script src="view-details.js"/> 
     9  <script src="rule-info.js"/> 
     10  <script src="element-results.js"/> 
    911 
    1012  <vbox id="ainspector-details-view"> 
     
    4042      <tabpanels style="padding: 16px 0px 0px"> 
    4143        <tabpanel height="100" style="background: white"> 
    42           <vbox id="ainspector-details-elements"/> 
     44          <tree id="ainspector-element-results-tree" width="381" 
     45            rows="12" seltype="single" style="margin: 0" 
     46            persist="sortDirection sortResource" 
     47            sortDirection="descending" 
     48            sortResource="ainspector-elem-result-col"> 
     49            <treecols> 
     50              <treecol id="ainspector-element-col" 
     51                flex="1" minwidth="70" 
     52                ignoreincolumnpicker="true" 
     53                label="&ai-treecol.element;" 
     54                tooltiptext="&ai-treecol.elementTooltip;" 
     55                persist="width" 
     56                onclick="ainspectorSidebar.sortElementResults(this)" 
     57                class="sortDirectionIndicator"/> 
     58              <splitter class="tree-splitter"/> 
     59              <treecol id="ainspector-order-col" 
     60                width="56" minwidth="56" maxwidth="60" 
     61                ignoreincolumnpicker="true" 
     62                label="&ai-treecol.order;" 
     63                style="text-align: left; padding-right: 16px" 
     64                tooltiptext="&ai-treecol.orderTooltip;" 
     65                persist="width" 
     66                onclick="ainspectorSidebar.sortElementResults(this)" 
     67                class="sortDirectionIndicator"/> 
     68              <splitter class="tree-splitter"/> 
     69              <treecol id="ainspector-elem-result-col" 
     70                width="56" minwidth="56" maxwidth="60" 
     71                ignoreincolumnpicker="true" 
     72                label="&ai-treecol.result;" 
     73                style="text-align: left; padding-right: 16px" 
     74                tooltiptext="&ai-treecol.resultTooltip;" 
     75                persist="width" 
     76                onclick="ainspectorSidebar.sortElementResults(this)" 
     77                class="sortDirectionIndicator"/> 
     78              <splitter class="tree-splitter"/> 
     79              <treecol id="ainspector-action-col" 
     80                width="70" minwidth="70" 
     81                ignoreincolumnpicker="true" 
     82                label="&ai-treecol.action;" 
     83                style="text-align: left; padding-right: 16px" 
     84                tooltiptext="&ai-treecol.actionTooltip;" 
     85                persist="width" 
     86                onclick="ainspectorSidebar.sortElementResults(this)" 
     87                class="sortDirectionIndicator"/> 
     88            </treecols> 
     89            <treechildren/> 
     90          </tree> 
    4391        </tabpanel> 
    4492        <tabpanel height="251" style="background: white"> 
  • trunk/proto-14/chrome/locale/en-US/ai-sidebar.dtd

    r203 r206  
    110110<!ENTITY ai-treecol.passTooltip             "Pass results"> 
    111111 
     112<!-- element results tree labels and tooltips --> 
     113 
     114<!ENTITY ai-treecol.element                 "Element"> 
     115<!ENTITY ai-treecol.elementTooltip          "Element tag name"> 
     116<!ENTITY ai-treecol.order                   "Order"> 
     117<!ENTITY ai-treecol.orderTooltip            "Order in document"> 
     118<!ENTITY ai-treecol.action                  "Action"> 
     119<!ENTITY ai-treecol.actionTooltip           "Corrective action"> 
     120 
    112121<!-- wcag guidelines --> 
    113122 
  • trunk/proto-14/chrome/locale/en-US/ai-sidebar.properties

    r203 r206  
    6060rule.no-results = - 
    6161 
     62# Element Results 
     63 
     64element.result.violation    = V 
     65element.result.warning      = W 
     66element.result.manual-check = MC 
     67element.result.pass         = P 
     68element.result.hidden       = H 
     69 
    6270# Preference Options 
    6371 
Note: See TracChangeset for help on using the changeset viewer.