Changeset 224


Ignore:
Timestamp:
10/15/13 22:28:18 (6 years ago)
Author:
nhoyt
Message:

Overview: Modified the design of the Rule Details page to:

  • make the Rule title more prominent
  • make the Element Results/Rule? Information tab panel more noticeable
  • make the summary grid data less prominent (now beneath the tab panel)

ai-common.js

  • added hidden property to nullData object

rule-info.js

  • changed property in getRuleInfoLabels fn. from RESULT to ACTION
  • rule summary is now placed in a label element

summary-grid.xml

  • added ainspector-element-results-header and ainspector-element-results-data for display at bottom of Rule Details view

view-category.js

  • changed info.result to info.action

view-details.js

  • added hidden property to data object in getRuleResultSummaryData fn.

view-details.xul

  • moved the summary grid below the tab panel
  • added a label for displaying the Rule title
  • added hidecolumnpicker=true to Element Results tree

ai-sidebar.dtd

  • added entities ai-summary.label.hidden and ai-summary.tooltip.hidden

ai-sidebar.properties

  • added info.action and deleted info.result, info.summary

ai-sidebar.css

  • added element results grid styling
Location:
trunk/proto-14/chrome
Files:
9 edited

Legend:

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

    r200 r224  
    4848    viol:    '--', 
    4949    warn:    '--', 
    50     mc:      '--' 
     50    mc:      '--', 
     51    hidden:  '--' 
    5152  }, 
    5253 
  • trunk/proto-14/chrome/content/rule-info.js

    r206 r224  
    2222  var nls = ainspectorSidebar.nlsProperties; 
    2323  return { 
    24     SUMMARY:         nls.getString("info.summary"), 
    25     RESULT:          nls.getString("info.result"), 
     24    ACTION:          nls.getString("info.action"), 
    2625 
    2726    DEFINITION:      nls.getString("info.definition"), 
     
    6564 
    6665  // Summary 
    67   h2 = getHTML("h2", labels.SUMMARY, h2FirstStyle); 
    68   addHTML(vbox, h2); 
    69  
    70   p = getHTML("p", ruleResult.getRuleSummary(), pStyle); 
    71   addHTML(vbox, p, 2); 
    72  
    73   // Result 
    74   h2 = getHTML("h2", labels.RESULT, h2Style); 
     66  document.getElementById("ainspector-rule-summary").value = ruleResult.getRuleSummary(); 
     67   
     68  // Action 
     69  h2 = getHTML("h2", labels.ACTION, h2FirstStyle); 
    7570  addHTML(vbox, h2); 
    7671 
  • trunk/proto-14/chrome/content/summary-grid.xml

    r201 r224  
    1414        class="summary-header-label" 
    1515        value="&ai-summary.label.warn;" 
    16         tooltiptext="&ai-summary.tooltip.warn;" 
    17         /> 
     16        tooltiptext="&ai-summary.tooltip.warn;"/> 
    1817      <xul:label 
    1918        class="summary-header-label" 
     
    9089  </binding> 
    9190 
     91  <binding id="ainspector-element-results-header"> 
     92    <content> 
     93      <xul:label 
     94        class="summary-header-label" 
     95        value="&ai-summary.label.viol;" 
     96        tooltiptext="&ai-summary.tooltip.viol;"/> 
     97      <xul:label 
     98        class="summary-header-label" 
     99        value="&ai-summary.label.warn;" 
     100        tooltiptext="&ai-summary.tooltip.warn;"/> 
     101      <xul:label 
     102        class="summary-header-label" 
     103        value="&ai-summary.label.mc;" 
     104        tooltiptext="&ai-summary.tooltip.mc;"/> 
     105      <xul:label 
     106        class="summary-header-label" 
     107        value="&ai-summary.label.pass;" 
     108        tooltiptext="&ai-summary.tooltip.pass;"/> 
     109      <xul:label 
     110        class="summary-header-label" 
     111        value="&ai-summary.label.hidden;" 
     112        tooltiptext="&ai-summary.tooltip.hidden;"/> 
     113    </content> 
     114  </binding> 
     115 
     116  <binding id="ainspector-element-results-data"> 
     117    <content> 
     118      <xul:label 
     119        class="summary-label" 
     120        tooltiptext="&ai-summary.tooltip.viol;" 
     121        style="background: #FFAEAE"/> 
     122      <xul:label 
     123        class="summary-label" 
     124        tooltiptext="&ai-summary.tooltip.warn;" 
     125        style="background: #FFEC94"/> 
     126      <xul:label 
     127        class="summary-label" 
     128        tooltiptext="&ai-summary.tooltip.mc;" 
     129        style="background: #B4D8E7"/> 
     130      <xul:label 
     131        class="summary-label" 
     132        tooltiptext="&ai-summary.tooltip.pass;" 
     133        style="background: #B0E57C"/> 
     134      <xul:label 
     135        class="summary-label" 
     136        tooltiptext="&ai-summary.tooltip.hidden;" 
     137        style="background: #DDDDDD"/> 
     138    </content> 
     139    <implementation> 
     140      <method name="setData"> 
     141        <parameter name="data"/> 
     142        <body> 
     143          var nodes = document.getAnonymousNodes(this); 
     144          nodes[0].setAttribute('value', data.viol); 
     145          nodes[1].setAttribute('value', data.warn); 
     146          nodes[2].setAttribute('value', data.mc); 
     147          nodes[3].setAttribute('value', data.pass); 
     148          nodes[4].setAttribute('value', data.hidden); 
     149        </body> 
     150      </method> 
     151    </implementation> 
     152  </binding> 
     153 
    92154</bindings> 
  • trunk/proto-14/chrome/content/view-category.js

    r208 r224  
    307307    addHTML(vbox, p, 2); 
    308308 
    309     // Result 
    310     h2 = getHTML("h2", nls.getString('info.result'), h2Style); 
     309    // Action 
     310    h2 = getHTML("h2", nls.getString('info.action'), h2Style); 
    311311    addHTML(vbox, h2); 
    312312 
  • trunk/proto-14/chrome/content/view-details.js

    r208 r224  
    9292    viol:    summary.violations, 
    9393    warn:    summary.warnings, 
    94     mc:      summary.manual_checks 
     94    mc:      summary.manual_checks, 
     95    hidden:  summary.hidden 
    9596  }; 
    9697 
  • trunk/proto-14/chrome/content/view-details.xul

    r215 r224  
    1212  <vbox id="ainspector-details-view"> 
    1313 
    14     <vbox> 
    15       <hbox> 
    16         <spacer flex="4"/> 
    17         <grid> 
    18           <rows> 
    19             <row class="summary-header"/> 
    20             <row class="summary-data" 
    21               id="ainspector-rule-details-summary"/> 
    22           </rows> 
    23         </grid> 
    24         <spacer flex="4"/> 
    25       </hbox> 
    26     </vbox> 
     14    <spacer height="2"/> 
    2715 
    28     <spacer height="16"/> 
     16    <label id="ainspector-rule-summary" class="header-label"/> 
    2917 
    3018    <vbox id="ainspector-details-summary" 
    31       width="360" height="108"/> 
     19      width="360" height="84"/><!-- 108 --> 
    3220 
    3321    <spacer height="12"/> 
     
    4735            sortDirection="descending" 
    4836            sortResource="ainspector-elem-result-col" 
     37            hidecolumnpicker="true" 
    4938            onselect="ainspectorSidebar.updateSelectedElement(this)"> 
    5039            <treecols> 
     
    10190 
    10291    <vbox> 
     92      <hbox> 
     93        <spacer flex="4"/> 
     94        <grid> 
     95          <rows> 
     96            <row class="element-results-header"/> 
     97            <row class="element-results-data" 
     98              id="ainspector-rule-details-summary"/> 
     99          </rows> 
     100        </grid> 
     101        <spacer flex="4"/> 
     102      </hbox> 
     103    </vbox> 
     104 
     105    <spacer height="12"/> 
     106 
     107    <vbox> 
    103108      <hbox align="baseline"> 
    104109        <button 
  • trunk/proto-14/chrome/locale/en-US/ai-sidebar.dtd

    r222 r224  
    6969<!ENTITY ai-summary.label.category    "Category"> 
    7070<!ENTITY ai-summary.label.guideline   "Guideline"> 
    71 <!ENTITY ai-summary.label.pass        "P"> 
    7271<!ENTITY ai-summary.label.viol        "V"> 
    7372<!ENTITY ai-summary.label.warn        "W"> 
    7473<!ENTITY ai-summary.label.mc          "MC"> 
     74<!ENTITY ai-summary.label.pass        "P"> 
     75<!ENTITY ai-summary.label.hidden      "H"> 
    7576 
    7677<!ENTITY ai-summary.tooltip.category  "Rule Category"> 
    7778<!ENTITY ai-summary.tooltip.guideline "WCAG Guideline"> 
    78 <!ENTITY ai-summary.tooltip.pass      "Passes"> 
    7979<!ENTITY ai-summary.tooltip.viol      "Violations"> 
    8080<!ENTITY ai-summary.tooltip.warn      "Warnings"> 
    8181<!ENTITY ai-summary.tooltip.mc        "Manual checks"> 
     82<!ENTITY ai-summary.tooltip.pass      "Passes"> 
     83<!ENTITY ai-summary.tooltip.hidden    "Hidden"> 
    8284 
    8385<!-- rule details labels and tooltips --> 
  • trunk/proto-14/chrome/locale/en-US/ai-sidebar.properties

    r207 r224  
    3131# Rule Information 
    3232 
     33info.action            = ACTION 
    3334info.compliance        = COMPLIANCE 
    3435info.definition        = DEFINITION 
    3536info.purpose           = PURPOSE 
    36 info.result            = ACTION 
    37 info.summary           = RULE 
    3837info.target-elements   = TARGET ELEMENTS 
    3938info.techniques        = TECHNIQUES 
  • trunk/proto-14/chrome/skin/ai-sidebar.css

    r212 r224  
    9696} 
    9797 
     98/* element results grid */ 
     99 
     100row.element-results-header { 
     101  -moz-binding: url('chrome://ai-sidebar/content/summary-grid.xml#ainspector-element-results-header'); 
     102  color: #999; 
     103  text-align: center; 
     104} 
     105 
     106row.element-results-data { 
     107  -moz-binding: url('chrome://ai-sidebar/content/summary-grid.xml#ainspector-element-results-data'); 
     108  font-weight: bold; 
     109  text-align: center; 
     110} 
     111 
    98112/* miscellaneous */ 
    99113 
     
    104118} 
    105119 
    106 vbox#ainspector-selected-rule, 
     120vbox#ainspector-selected-rule { 
     121  -moz-user-select: text; 
     122  overflow-y: scroll; 
     123  border: 1px solid #bbb; 
     124  background-color: white; 
     125  margin: 0; 
     126  margin-left: 4px; 
     127  margin-right: 5px; 
     128  padding: 4px; 
     129} 
     130 
     131label#ainspector-rule-summary { 
     132  -moz-user-select: text; 
     133  border: 1px solid #bbb; 
     134  border-bottom: 0; 
     135  background-color: white; 
     136  margin: 0; 
     137  margin-left: 4px; 
     138  margin-right: 5px; 
     139  padding: 4px; 
     140  padding-bottom: 6px; 
     141} 
     142 
    107143vbox#ainspector-details-summary { 
    108144  -moz-user-select: text; 
    109145  overflow-y: scroll; 
    110146  border: 1px solid #bbb; 
     147  border-top: 0; 
    111148  background-color: white; 
    112149  margin: 0; 
Note: See TracChangeset for help on using the changeset viewer.