Page MenuHomePhabricator

Remove inline styling from SocialProfile module: UserProfile
Open, Needs TriagePublic

Description

./SocialProfile/UserProfile/SpecialUploadAvatar.php:            $output .= '<table cellspacing="0" cellpadding="0" style="margin-top:20px;">';
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td valign="top" style="color:#797979;font-size:12px;font-weight:bold;padding-bottom:20px;">' .
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td style="padding-bottom:20px;">
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td valign="top" style="color:#797979;font-size:12px;font-weight:bold;padding-bottom:20px;">' .
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td style="padding-bottom:20px;">
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td valign="top" style="color:#797979;font-size:12px;font-weight:bold;padding-bottom:20px;">' .
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td style="padding-bottom:20px;">
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td valign="top" style="color:#797979;font-size:12px;font-weight:bold;padding-bottom:20px;">' .
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                    <td style="padding-bottom:20px;">
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                            htmlspecialchars( $this->mUploadSource ) . "\" style='width:100px' /></td>
./SocialProfile/UserProfile/SpecialUploadAvatar.php:                                            <p style="margin-bottom:10px;">' .
./SocialProfile/UserProfile/UserProfilePage.php:                                                        <a class=\"perma\" style=\"font-size:8px; color:" . $fanbox['fantag_right_textcolor'] . "\" href=\"" . htmlspecialchars( $fantag_title->getFullURL() ) . "\" title=\"{$fanbox['fantag_title']}\">" . wfMessage( 'fanbox-perma' )->plain() . "</a>
./SocialProfile/UserProfile/UserProfilePage.php:                                                                        <td id=\"fanBoxLeftSideOutputProfile\" style=\"color:" . $fanbox['fantag_left_textcolor'] . "; font-size:$leftfontsize\" bgcolor=\"" . $fanbox['fantag_left_bgcolor'] . "\">" . $fantag_leftside . "</td>
./SocialProfile/UserProfile/UserProfilePage.php:                                                                        <td id=\"fanBoxRightSideOutputProfile\" style=\"color:" . $fanbox['fantag_right_textcolor'] . "; font-size:$rightfontsize\" bgcolor=\"" . $fanbox['fantag_right_bgcolor'] . "\">" . $right_text . "</td>
./SocialProfile/UserProfile/UserProfilePage.php:                                                                        <td style="font-size:10px">' .
./SocialProfile/UserProfile/UserProfilePage.php:                                                                        <td style="font-size:10px">' .
./SocialProfile/UserProfile/UserProfilePage.php:                                                                <td style="font-size:10px">' .

Event Timeline

The current offenders are:

  • AvatarClass.php
    • This cannot be removed, it's related to the strange edge case where the site owner has chosen to disable avatars and thus an empty image is rendered instead.
  • SpecialUploadAvatar.php
    • Only one usage of inline CSS on line 215.
  • UserProfilePage.js
    • This is JS, I think we can safely ignore this for the time being. A lot of the inline styles done here are related to the UserImages stuff, ironically enough.
  • UserProfilePage.php
    • The major (and only) offender here is UserProfilePage::getFanBoxes(), i.e. related to the FanBoxes extension. That function loads the ext.fanBoxes ResourceLoader module, i.e. /extensions/FanBoxes/FanBoxes.css (and the related JS aswell, but we don't care about that since this ticket is about CSS). We can move some of the inline CSS into that file easily enough, although such changes would need to be tested to ensure they don't mess up FanBoxes' other pages and whatnot. The real problem here is that some of the child elements of div.individual-fanbox have certain styles set via PHP (text color for the left part as well as the right part of the fanbox, ditto for background color; font size is also calculated via PHP) and I'm not sure if it's even possible at all to move these into a CSS file...