Changeset 219


Ignore:
Timestamp:
10/09/13 22:26:31 (6 years ago)
Author:
nhoyt
Message:

highlight.js

  • Tweaked styling: ensure that containerDiv has non-zero padding
  • Cleaned up insertDIV function: removed tag_name from parameter list; always insert DIV as child of node.parentNode
  • Modified parameter name in getResultValueMessage
  • Fixed comments in positionDIV and insertDIV
  • Changed STYLES.result property to STYLES.noResults

highlight-icon.js

  • Added for testing use of icon image in insertDIV fn.

ai-sidebar.js

  • In updateContext, added call to removeHighlight to when page is reloaded
Location:
trunk/proto-14/chrome/content
Files:
1 added
2 edited

Legend:

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

    r208 r219  
    5959  ainspectorSidebar.locationHref = window.content.location.href; 
    6060  ainspector.log.debug("updateContext: " + ainspectorSidebar.locationHref); 
     61  ainspectorSidebar.highlightModule.removeHighlight(content.document); 
    6162  ainspectorSidebar.evaluate(); 
    6263  ainspectorSidebar.updateView(); 
  • trunk/proto-14/chrome/content/highlight/highlight.js

    r217 r219  
    4040    }; 
    4141 
    42     var solid  = " 3px solid "; 
    43     var dotted = " 3px dotted "; 
     42    var containerDiv = 'padding: 2px; border-collapse: separate; border: 4px solid '; 
     43    var fixedPosDiv  = 'border: 2px dotted '; 
    4444 
    4545    this.STYLES = { 
    46       violations:   'border-collapse: separate; border:' + solid + 'crimson', 
    47       warnings:     'border-collapse: separate; border:' + solid + 'gold',  
    48       manualChecks: 'border-collapse: separate; border:' + solid + 'mediumblue', 
    49       passes:       'border-collapse: separate; border:' + solid + 'seagreen',  
    50       hidden:       'border-collapse: separate; border:' + dotted + 'grey', 
    51       result:       'border-collapse: separate; border:' + dotted + 'black', 
     46      violations:   containerDiv + 'crimson', 
     47      warnings:     containerDiv + 'gold',  
     48      manualChecks: containerDiv + 'mediumblue', 
     49      passes:       containerDiv + 'seagreen',  
     50      hidden:       fixedPosDiv + 'grey', 
     51      noResults:    fixedPosDiv + 'black', 
    5252      offScreen:    'top: 2em; left: 2em; width: 40%; padding: 10px; margin: 2px; ' + 
    5353                    'background-color: white; color: black; font-size: 12pt; ' + 
     
    164164 
    165165      var computed_style = dom_element.computed_style; 
    166       var tag_name       = dom_element.tag_name; 
    167166 
    168167      // The node property of DOMElement is a reference to the DOM node in 
     
    210209          switch (node_result.getResultValue()) { 
    211210            case RESULT_VALUE.VIOLATION: 
    212               this.insertDIV(document, node, tag_name, this.STYLES.violations, 1, 0, 0, 0, 0); 
     211              this.insertDIV(document, node, this.STYLES.violations, 1, 0, 0, 0, 0); 
    213212              break; 
    214213 
    215214            case RESULT_VALUE.WARNING: 
    216               this.insertDIV(document, node, tag_name, this.STYLES.warnings, 0, 1, 0, 0, 0); 
     215              this.insertDIV(document, node, this.STYLES.warnings, 0, 1, 0, 0, 0); 
    217216              break; 
    218217 
     
    222221              if (node_result.isScopePage() && !this.show_page_manual_check) 
    223222                continue; 
    224               this.insertDIV(document, node, tag_name, this.STYLES.manualChecks, 0, 0, 1, 0, 0); 
     223              this.insertDIV(document, node, this.STYLES.manualChecks, 0, 0, 1, 0, 0); 
    225224              break; 
    226225 
    227226            case RESULT_VALUE.PASS: 
    228227              if (this.show_pass) 
    229                 this.insertDIV(document, node, tag_name, this.STYLES.passes, 0, 0, 0, 1, 0); 
     228                this.insertDIV(document, node, this.STYLES.passes, 0, 0, 0, 1, 0); 
    230229              break; 
    231230 
    232231            case RESULT_VALUE.HIDDEN: 
    233232              if (this.show_hidden) 
    234                 this.insertDIV(document, node, tag_name, this.STYLES.hidden, 0, 0, 0, 0, 1); 
     233                this.insertDIV(document, node, this.STYLES.hidden, 0, 0, 0, 0, 1); 
    235234              break; 
    236235 
     
    425424   * @function positionDIV 
    426425   * 
    427    * @desc creates a div to position on top of the web page to show the 
    428    *       off-screen elements and their severities outlined with the worst 
    429    *       result value styling 
    430    * 
    431    * @param {Object}  document  - the DOM to to position DIV 
    432    * @param {String} style - styles the DIV with a border 
     426   * @desc Create a div element to position at top left of the web page to 
     427   *       display a message re. off-screen elements and their severities, 
     428   *       outlined with the worst result value styling. 
     429   * 
     430   * @param {Object} document - the DOM in which to position DIV 
     431   * @param {String} style - the DIV CSS style 
    433432   * @param {String} result_value_message - message to show inside the DIV 
    434433   */ 
     
    451450   * @function insertDIV 
    452451   * 
    453    * @desc position the DIV 
    454    *   1. as only child of elements that can have content (e.g., p, h1, h2, li...) 
    455    *   2. as th eparent of elements that are 
    456    *      * defined as empty (e.g., img, input) 
    457    *      * can only contain element (e.g., ul, dl, ol, object...) 
    458    * 
    459    * @param {Object}  document    - the DOM to highlight elements 
    460    * @param {Object}  cache_item 
    461    * @param {Object}  node 
    462    * @param {String}  tag_name 
    463    */ 
    464   insertDIV: function (document, node, tag_name, style, 
    465                        violations, warnings, manual_checks, pass, hidden) { 
    466  
    467     var flag = false; 
     452   * @desc Create a DIV element styled as specified, insert the DIV just 
     453   *       before the node and then move the node inside the DIV. 
     454   * 
     455   * @param {Object} document - the DOM that contains the node to highlight 
     456   * @param {Object} node - the node to highlight 
     457   * @param {String} style - CSS styling properties for DIV 
     458   * @param {Number} v - violations 
     459   * @param {Number} w - warnings 
     460   * @param {Number} m - manual checks 
     461   * @param {Number} p - passed 
     462   * @param {Number} h - hidden 
     463   */ 
     464  insertDIV: function (document, node, style, v, w, m, p, h) { 
     465 
    468466    var parent_node = null; 
    469     var elements_without_content = [ 
    470       'applet', 
    471       'area', 
    472       'dl', 
    473       'embed', 
    474       'frame', 
    475       'img', 
    476       'input', 
    477       'object', 
    478       'ol', 
    479       'select', 
    480       'textarea', 
    481       'table', 
    482       'ul' 
    483     ]; 
    484     var length =  elements_without_content.length; 
    485     var title = this.getResultValueMessage(violations, warnings, manual_checks, pass, hidden); 
     467    var title = this.getResultValueMessage(v, w, m, p, h); 
     468 
     469    // Create the div element 
    486470    var new_div_element = document.createElement('div'); 
    487  
    488471    new_div_element.setAttribute("class", this.highlightDivClass); 
    489472    new_div_element.setAttribute("style", style); 
    490473    new_div_element.setAttribute("title", title); 
    491474 
    492     var index = elements_without_content.indexOf(tag_name); 
    493  
    494     if (index != -1) { // found in elements_without_content 
    495       parent_node = node.parentNode; 
    496       parent_node.insertBefore(new_div_element, node); 
    497       new_div_element.appendChild(node); 
    498     } 
    499     else { // node may have content 
    500       while (node.firstChild) { 
    501         new_div_element.appendChild(node.firstChild); 
    502       } 
    503       node.appendChild(new_div_element); 
    504     } 
     475    // Replace the node with the div containing the node 
     476    parent_node = node.parentNode; 
     477    parent_node.insertBefore(new_div_element, node); 
     478    new_div_element.appendChild(node); 
    505479 
    506480  }, 
     
    509483   * @function getWorstResultValueStyle 
    510484   * 
    511    * @desc Returns a CSS formatted string to be used with the style property of a DOM node 
    512    *       Result is based on the worst node result value associated with a cache item 
    513    * 
    514    *       manual check (red dotted border) 
    515    *       pass (green single border) 
    516    *       violation (red double border) 
    517    *       warning (yellow single border) 
    518    *       hidden (gray double border) 
    519    *       no results (black border) 
    520    * 
    521    * @param {Object} dom_element  -  OAA DOM element object 
    522    * @param {Object} preferences  -  Preferences object from preferences module 
     485   * @desc Return a CSS formatted string to be used for highlighting a DOM node. 
     486   *       Result is based on the worst node result value associated with the node. 
     487   * 
     488   * @param {Object} dom_element - OAA DOM element object 
    523489   * 
    524490   * @return {String} Returns a CSS string that can be used with a style property of a DOM node 
    525491   */ 
    526   getWorstResultValueStyle: function(dom_element) { 
     492  getWorstResultValueStyle: function (dom_element) { 
    527493 
    528494    if (dom_element.rules_violations.length > 0) 
     
    539505      return this.STYLES.hidden; 
    540506    else 
    541       return this.STYLES.result; 
     507      return this.STYLES.noResults; 
    542508 
    543509  }, 
     
    549515   *       of number of violations, warnings, manual checks and passes 
    550516   * 
    551    * @param {Number} v_count  - Number of violations 
    552    * @param {Number} w_count  - Number of warnings 
    553    * @param {Number} mc_count - Number of manual checks 
    554    * @param {Number} p_count  - Number of pass 
    555    * @param {Number} h_count  - Number of hidden 
     517   * @param {Number} v_count - Number of violations 
     518   * @param {Number} w_count - Number of warnings 
     519   * @param {Number} m_count - Number of manual checks 
     520   * @param {Number} p_count - Number of pass 
     521   * @param {Number} h_count - Number of hidden 
    556522   * 
    557523   * @return {String} title 
    558524   */ 
    559   getResultValueMessage: function(v_count, w_count, mc_count, p_count, h_count) { 
     525  getResultValueMessage: function (v_count, w_count, m_count, p_count, h_count) { 
     526 
    560527    var title = ''; 
    561528 
    562529    if (v_count > 0) 
    563530      title += v_count + ' ' + PluralForm.get(v_count, this.STRINGS.violations) + ' '; 
    564     if (mc_count > 0) 
    565       title += mc_count + ' ' + PluralForm.get(mc_count, this.STRINGS.manualChecks) + ' '; 
     531    if (m_count > 0) 
     532      title += m_count + ' ' + PluralForm.get(m_count, this.STRINGS.manualChecks) + ' '; 
    566533    if (w_count > 0) 
    567534      title += w_count + ' ' + PluralForm.get(w_count, this.STRINGS.warnings) + ' '; 
     
    570537    if (h_count > 0) 
    571538      title += h_count + ' ' + PluralForm.get(h_count, this.STRINGS.hidden) + ' '; 
     539 
    572540    if (title.length === 0) 
    573541      title = this.STRINGS.noResults; 
Note: See TracChangeset for help on using the changeset viewer.