Changeset 13392


Ignore:
Timestamp:
Jul 20, 2012, 5:37:50 PM (9 years ago)
Author:
jordan
Message:

(trunk web) #4979 "CSS Issues in Web Client" -- proposed fix. See ticket for more details.

Location:
trunk/web/javascript
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/javascript/common.js

    r13101 r13392  
    8080
    8181/**
    82  * "innerHTML = html" is pretty slow in FF.  Happily a lot of our innerHTML
    83  * changes are triggered by periodic refreshes on torrents whose state hasn't
    84  * changed since the last update, so even this simple test helps a lot.
     82 * Checks to see if the content actually changed before poking the DOM.
    8583 */
    8684function setInnerHTML(e, html)
     
    9795                e.innerHTML = html;
    9896        }
     97};
     98
     99function sanitizeText(text)
     100{
     101        return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
     102};
     103
     104/**
     105 * Many of our text changes are triggered by periodic refreshes
     106 * on torrents whose state hasn't changed since the last update,
     107 * so see if the text actually changed before poking the DOM.
     108 */
     109function setTextContent(e, text)
     110{
     111        if (e && (e.textContent != text))
     112                e.textContent = text;
    99113};
    100114
  • trunk/web/javascript/dialog.js

    r12865 r13392  
    7777                if (!isMobileDevice)
    7878                        $('.dialog_container').hide();
    79                 setInnerHTML(this._heading[0], dialog_heading);
    80                 setInnerHTML(this._message[0], dialog_message);
    81                 setInnerHTML(this._cancel_button[0], cancel_button_label || 'Cancel');
    82                 setInnerHTML(this._confirm_button[0], confirm_button_label);
     79                setTextContent(this._heading[0], dialog_heading);
     80                setTextContent(this._message[0], dialog_message);
     81                setTextContent(this._cancel_button[0], cancel_button_label || 'Cancel');
     82                setTextContent(this._confirm_button[0], confirm_button_label);
    8383                this._confirm_button.show();
    8484                this._callback_function = callback_function;
     
    9797                if (!isMobileDevice)
    9898                        $('.dialog_container').hide();
    99                 setInnerHTML(this._heading[0], dialog_heading);
    100                 setInnerHTML(this._message[0], dialog_message);
     99                setTextContent(this._heading[0], dialog_heading);
     100                setTextContent(this._message[0], dialog_message);
    101101                // jquery::hide() doesn't work here in Safari for some odd reason
    102102                this._confirm_button.css('display', 'none');
    103                 setInnerHTML(this._cancel_button[0], cancel_button_label);
     103                setTextContent(this._cancel_button[0], cancel_button_label);
    104104                // Just in case
    105105                $('#upload_container').hide();
  • trunk/web/javascript/file-row.js

    r13042 r13392  
    7474                          Transmission.fmt.percentString(pct),
    7575                          '%)' ].join('');
    76                 setInnerHTML(elements.progress, c);
     76                setTextContent(elements.progress, c);
    7777        },
    7878        refreshHTML = function() {
     
    141141                e = document.createElement('div');
    142142                e.className = "inspector_torrent_file_list_entry_name";
    143                 e.innerHTML = name;
     143                setTextContent(e, name);
    144144                root.appendChild(e);
    145145
  • trunk/web/javascript/inspector.js

    r13257 r13392  
    6666        else
    6767            name = '' + torrents.length+' Transfers Selected';
    68         setInnerHTML(e.name_lb, name || na);
     68        setTextContent(e.name_lb, name || na);
    6969
    7070        // update the visible page
     
    147147                str = torrents[0].getStateString();
    148148        }
    149         setInnerHTML(e.state_lb, str);
     149        setTextContent(e.state_lb, str);
    150150        stateString = str;
    151151
     
    181181                str = fmt.size(haveVerified) + ' of ' + fmt.size(sizeWhenDone) + ' (' + str +'%), ' + fmt.size(haveUnverified) + ' Unverified';
    182182        }
    183         setInnerHTML(e.have_lb, str);
     183        setTextContent(e.have_lb, str);
    184184
    185185        //
     
    193193        else
    194194            str = '' + fmt.percentString( ( 100.0 * available ) / sizeWhenDone ) +  '%';
    195         setInnerHTML(e.availability_lb, str);
     195        setTextContent(e.availability_lb, str);
    196196
    197197        //
     
    212212                str = fmt.size(d);
    213213        }
    214         setInnerHTML(e.downloaded_lb, str);
     214        setTextContent(e.downloaded_lb, str);
    215215
    216216        //
     
    237237            str = fmt.size(u) + ' (Ratio: ' + fmt.ratioString( Math.ratio(u,d))+')';
    238238        }
    239         setInnerHTML(e.uploaded_lb, str);
     239        setTextContent(e.uploaded_lb, str);
    240240
    241241        //
     
    261261                str = fmt.timeInterval(now/1000 - baseline);
    262262        }
    263         setInnerHTML(e.running_time_lb, str);
     263        setTextContent(e.running_time_lb, str);
    264264
    265265        //
     
    285285                str = fmt.timeInterval(baseline);
    286286        }
    287         setInnerHTML(e.remaining_time_lb, str);
     287        setTextContent(e.remaining_time_lb, str);
    288288
    289289        //
     
    309309                str = fmt.timeInterval(d) + ' ago';
    310310        }
    311         setInnerHTML(e.last_activity_lb, str);
     311        setTextContent(e.last_activity_lb, str);
    312312
    313313        //
     
    326326            }
    327327        }
    328         setInnerHTML(e.error_lb, str || none);
     328        setTextContent(e.error_lb, str || none);
    329329
    330330        //
     
    351351                str = fmt.size(size) + ' (' + pieces.toStringWithCommas() + ' pieces)';
    352352        }
    353         setInnerHTML(e.size_lb, str);
     353        setTextContent(e.size_lb, str);
    354354
    355355        //
     
    368368            }
    369369        }
    370         setInnerHTML(e.hash_lb, str);
     370        setTextContent(e.hash_lb, str);
    371371
    372372        //
     
    386386            }
    387387        }
    388         setInnerHTML(e.privacy_lb, str);
     388        setTextContent(e.privacy_lb, str);
    389389
    390390        //
     
    405405        if(!str)
    406406            str = none; 
    407         setInnerHTML(e.comment_lb, str.replace(/(https?|ftp):\/\/([\w\-]+(\.[\w\-]+)*(\.[a-z]{2,4})?)(\d{1,5})?(\/([^<>\s]*))?/g, '<a target="_blank" href="$&">$&</a>'));
     407        setTextContent(e.comment_lb, str.replace(/(https?|ftp):\/\/([\w\-]+(\.[\w\-]+)*(\.[a-z]{2,4})?)(\d{1,5})?(\/([^<>\s]*))?/g, '<a target="_blank" href="$&">$&</a>'));
    408408
    409409        //
     
    433433                str = 'Created by ' + creator + ' on ' + (new Date(date*1000)).toDateString();
    434434        }
    435         setInnerHTML(e.origin_lb, str);
     435        setTextContent(e.origin_lb, str);
    436436
    437437        //
     
    450450            }
    451451        }
    452         setInnerHTML(e.foldername_lb, str);
     452        setTextContent(e.foldername_lb, str);
    453453    },
    454454
     
    536536            html.push('<div class="inspector_group">');
    537537            if (torrents.length > 1) {
    538                 html.push('<div class="inspector_torrent_label">', tor.getName(), '</div>');
     538                html.push('<div class="inspector_torrent_label">', sanitizeText(tor.getName()), '</div>');
    539539            }
    540540            if (!peers || !peers.length) {
     
    561561                       '<td class="percentCol">', Math.floor(peer.progress*100), '%', '</td>',
    562562                       '<td>', fmt.peerStatus(peer.flagStr), '</td>',
    563                        '<td>', peer.address, '</td>',
    564                        '<td class="clientCol">', peer.clientName, '</td>',
     563                       '<td>', sanitizeText(peer.address), '</td>',
     564                       '<td class="clientCol">', sanitizeText(peer.clientName), '</td>',
    565565                       '</tr>');
    566566            }
     
    677677                lastScrapeStatusHash = lastScrapeStatus(tracker);
    678678                parity = (j%2) ? 'odd' : 'even';
    679                 html.push('<li class="inspector_tracker_entry ', parity, '"><div class="tracker_host" title="', tracker.announce, '">',
    680                       tracker.host, '</div>',
     679                html.push('<li class="inspector_tracker_entry ', parity, '"><div class="tracker_host" title="', sanitizeText(tracker.announce), '">',
     680                      sanitizeText(tracker.host), '</div>',
    681681                      '<div class="tracker_activity">',
    682682                      '<div>', lastAnnounceStatusHash['label'], ': ', lastAnnounceStatusHash['value'], '</div>',
     
    695695        }
    696696
    697         setInnerHTML(trackers_list, html.join(''));
     697        setInnerHTML (trackers_list, html.join(''));
    698698    },
    699699
  • trunk/web/javascript/torrent-row.js

    r12986 r13392  
    231231        {
    232232                // name
    233                 setInnerHTML(root._name_container, t.getName());
     233                setTextContent(root._name_container, t.getName());
    234234
    235235                // progressbar
     
    240240                var e = root._peer_details_container;
    241241                $(e).toggleClass('error',has_error);
    242                 setInnerHTML(e, this.getPeerDetails(t));
     242                setTextContent(e, this.getPeerDetails(t));
    243243
    244244                // progress details
    245245                e = root._progress_details_container;
    246                 setInnerHTML(e, this.getProgressDetails(controller, t));
     246                setTextContent(e, this.getProgressDetails(controller, t));
    247247
    248248                // pause/resume button
     
    320320                var e = root._name_container;
    321321                $(e).toggleClass('paused', is_stopped);
    322                 setInnerHTML(e, t.getName());
     322                setTextContent(e, t.getName());
    323323
    324324                // peer details
     
    326326                e = root._details_container;
    327327                $(e).toggleClass('error', has_error);
    328                 setInnerHTML(e, this.getPeerDetails(t));
     328                setTextContent(e, this.getPeerDetails(t));
    329329
    330330                // progressbar
Note: See TracChangeset for help on using the changeset viewer.