Changeset 122332 in webkit


Ignore:
Timestamp:
Jul 11, 2012 7:50:44 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: migrate from background images to CSS for statusbar rendering.
​https://bugs.webkit.org/show_bug.cgi?id=90902

Reviewed by Vsevolod Vlasov.

Source/WebCore:

This change removes statusbar* images and uses gradients and borders to re-create original inspector look.

  • WebCore.gypi:
  • inspector/front-end/Images/statusbarBackground.png: Removed.
  • inspector/front-end/Images/statusbarBottomBackground.png: Removed.
  • inspector/front-end/Images/statusbarButtons.png: Removed.
  • inspector/front-end/Images/statusbarMenuButton.png: Removed.
  • inspector/front-end/Images/statusbarMenuButtonSelected.png: Removed.
  • inspector/front-end/StatusBarButton.js:
  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/inspector.css:

(body.drawer-visible #main-status-bar):
(body.drawer-visible #main-status-bar::after):
(.status-bar-background):
(.status-bar > div):
(.glyph):
(button.status-bar-item):
(.status-bar button.status-bar-item:active):
(select.status-bar-item):
(select.status-bar-item, select.status-bar-item:hover):
(body.detached .alternate-status-bar-buttons-bar):
(.alternate-status-bar-buttons-bar):
(.alternate-status-bar-buttons-bar .status-bar-item):
(.alternate-status-bar-buttons-bar .status-bar-item.emulate-active):
(#drawer):
(body.drawer-visible #drawer-contents):
(#drawer-status-bar):

  • inspector/front-end/inspector.html:
  • inspector/front-end/scriptsPanel.css:

(button.status-bar-item.scripts-navigator-show-hide-button):
(button.status-bar-item.scripts-navigator-show-hide-button:active):
(button.status-bar-item.scripts-debugger-show-hide-button):
(button.status-bar-item.scripts-debugger-show-hide-button:active):

Source/WebKit/chromium:

  • WebKit.gypi:
  • src/js/Images/statusbarBackgroundChromium.png: Removed.
  • src/js/Images/statusbarBottomBackgroundChromium.png: Removed.
  • src/js/Images/statusbarButtonsChromium.png: Removed.
  • src/js/Images/statusbarMenuButtonChromium.png: Removed.
  • src/js/Images/statusbarMenuButtonSelectedChromium.png: Removed.
  • src/js/devTools.css:

(.status-bar-background):

Location:
trunk/Source
Files:
10 deleted
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r122328 r122332  
     12012-07-10  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: migrate from background images to CSS for statusbar rendering.
     4        https://bugs.webkit.org/show_bug.cgi?id=90902
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        This change removes statusbar* images and uses gradients and borders to re-create original inspector look.
     9
     10        * WebCore.gypi:
     11        * inspector/front-end/Images/statusbarBackground.png: Removed.
     12        * inspector/front-end/Images/statusbarBottomBackground.png: Removed.
     13        * inspector/front-end/Images/statusbarButtons.png: Removed.
     14        * inspector/front-end/Images/statusbarMenuButton.png: Removed.
     15        * inspector/front-end/Images/statusbarMenuButtonSelected.png: Removed.
     16        * inspector/front-end/StatusBarButton.js:
     17        * inspector/front-end/WebKit.qrc:
     18        * inspector/front-end/inspector.css:
     19        (body.drawer-visible #main-status-bar):
     20        (body.drawer-visible #main-status-bar::after):
     21        (.status-bar-background):
     22        (.status-bar > div):
     23        (.glyph):
     24        (button.status-bar-item):
     25        (.status-bar button.status-bar-item:active):
     26        (select.status-bar-item):
     27        (select.status-bar-item, select.status-bar-item:hover):
     28        (body.detached .alternate-status-bar-buttons-bar):
     29        (.alternate-status-bar-buttons-bar):
     30        (.alternate-status-bar-buttons-bar .status-bar-item):
     31        (.alternate-status-bar-buttons-bar .status-bar-item.emulate-active):
     32        (#drawer):
     33        (body.drawer-visible #drawer-contents):
     34        (#drawer-status-bar):
     35        * inspector/front-end/inspector.html:
     36        * inspector/front-end/scriptsPanel.css:
     37        (button.status-bar-item.scripts-navigator-show-hide-button):
     38        (button.status-bar-item.scripts-navigator-show-hide-button:active):
     39        (button.status-bar-item.scripts-debugger-show-hide-button):
     40        (button.status-bar-item.scripts-debugger-show-hide-button:active):
     41
    1422012-07-11  Jason Liu  <jason.liu@torchmobile.com.cn>
    243

  • trunk/Source/WebCore/WebCore.gypi

    r122310 r122332  
    65426542            'inspector/front-end/Images/splitviewDimple.png',
    65436543            'inspector/front-end/Images/splitviewDividerBackground.png',
    6544             'inspector/front-end/Images/statusbarBackground.png',
    6545             'inspector/front-end/Images/statusbarBottomBackground.png',
    65466544            'inspector/front-end/Images/statusbarButtonGlyphs.png',
    6547             'inspector/front-end/Images/statusbarButtons.png',
    6548             'inspector/front-end/Images/statusbarMenuButton.png',
    6549             'inspector/front-end/Images/statusbarMenuButtonSelected.png',
    65506545            'inspector/front-end/Images/statusbarResizerHorizontal.png',
    65516546            'inspector/front-end/Images/statusbarResizerVertical.png',

  • trunk/Source/WebCore/inspector/front-end/StatusBarButton.js

    r121849 r122332  
    199199        const buttonHeight = 24;
    200200        optionsBarElement.style.height = (buttonHeight * buttons.length) + "px";
    201         optionsBarElement.style.left = this.element.offsetLeft + "px";
     201        optionsBarElement.style.left = (this.element.offsetLeft + 1) + "px";
    202202
    203203        var boundMouseOver = mouseOver.bind(this);

  • trunk/Source/WebCore/inspector/front-end/UIUtils.js

    r121902 r122332  
    7979{
    8080    this.element = document.createElement("div");
    81     this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:1";
     81    this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:transparent;z-index:1000;";
    8282    this.element.id = "glass-pane-for-drag";
    8383    document.body.appendChild(this.element);

  • trunk/Source/WebCore/inspector/front-end/WebKit.qrc

    r122104 r122332  
    309309    <file>Images/splitviewDimple.png</file>
    310310    <file>Images/splitviewDividerBackground.png</file>
    311     <file>Images/statusbarBackground.png</file>
    312     <file>Images/statusbarBottomBackground.png</file>
    313     <file>Images/statusbarButtons.png</file>
    314311    <file>Images/statusbarButtonGlyphs.png</file>
    315     <file>Images/statusbarMenuButton.png</file>
    316     <file>Images/statusbarMenuButtonSelected.png</file>
    317312    <file>Images/statusbarResizerHorizontal.png</file>
    318313    <file>Images/statusbarResizerVertical.png</file>

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r121911 r122332  
    444444body.drawer-visible #main-status-bar {
    445445    height: 24px;
    446     background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackground.png);
    447     background-repeat: no-repeat, repeat-x;
    448     background-position: right center, center;
     446    border-bottom: 1px solid rgb(202, 202, 202);
    449447    cursor: ns-resize;
     448}
     449
     450body.drawer-visible #main-status-bar::after {
     451    position: absolute;
     452    right: 0;
     453    top: 5px;
     454    content: url(Images/statusbarResizerVertical.png);
    450455}
    451456
    … …  
    459464
    460465.status-bar {
    461     background-color: rgb(235, 235, 235);
    462     background-image: url(Images/statusbarBackground.png);
    463     background-repeat: repeat-x;
    464466    white-space: nowrap;
    465467    height: 23px;
    466468    overflow: hidden;
    467469    z-index: 12;
     470    background-image: -webkit-linear-gradient(rgb(253,253,253), rgb(230,230,230) 75%, rgb(230,230,230));
     471    border-top: 1px solid rgb(202, 202, 202);
    468472}
    469473
    … …  
    471475    display: inline-block;
    472476    vertical-align: top;
     477    overflow: visible;
     478    margin-top: -1px;
    473479}
    474480
    … …  
    491497.glyph {
    492498    position: absolute;
    493     top: 0;
     499    top: -1px;
    494500    left: 0;
    495501    right: 0;
    … …  
    521527    position: relative;
    522528    width: 32px;
    523     background-image: url(Images/statusbarButtons.png);
    524     background-position: 0 0;
    525 }
    526 
    527 button.status-bar-item:active, button.status-bar-item.emulate-active {
    528     background-position: 32px 0 !important;
     529    border-left: 1px solid rgb(202, 202, 202);
     530    border-right: 1px solid rgb(202, 202, 202);
     531}
     532
     533.status-bar select.status-bar-item:active,
     534.status-bar button.status-bar-item:active {
     535    background-color: rgb(163,163,163);
     536    border-left: 1px solid rgb(120, 120, 120);
     537    border-right: 1px solid rgb(120, 120, 120);
    529538}
    530539
    … …  
    549558select.status-bar-item {
    550559    min-width: 48px;
    551     border-width: 0 17px 0 2px;
    552     padding: 0 2px 0 6px;
    553560    font-weight: bold;
    554561    color: rgb(48, 48, 48);
    555562    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
    556     -webkit-border-image: url(Images/statusbarMenuButton.png) 0 17 0 2;
    557     -webkit-border-radius: 0;
    558     -webkit-appearance: none;
    559 }
    560 
    561 select.status-bar-item:active {
    562     color: black;
    563     -webkit-border-image: url(Images/statusbarMenuButtonSelected.png) 0 17 0 2;
     563}
     564
     565select.status-bar-item, select.status-bar-item:hover {
     566    border-left: 1px solid rgb(202, 202, 202);
     567    border-right: 1px solid rgb(202, 202, 202);
    564568}
    565569
    … …  
    587591}
    588592
     593body.detached .alternate-status-bar-buttons-bar {
     594    margin-left: 1px;
     595}
     596
    589597.alternate-status-bar-buttons-bar {
    590598    position: absolute;
    591599    width: 31px;
    592600    bottom: -3px;
    593     margin-left: 1px;
    594601    background: white;
    595602}
    596603
    597604.alternate-status-bar-buttons-bar .status-bar-item {
     605    height: 24px;
    598606    margin-top: -1px;
     607    border: 1px solid rgb(202, 202, 202);
     608    border-bottom: 1px solid transparent;
     609}
     610
     611.alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
     612    background-color: rgb(163,163,163);
     613    border: 1px solid rgb(120, 120, 120);
     614    border-bottom: 1px solid transparent;
    599615}
    600616
    … …  
    661677    height: 200px;
    662678    background-color: white;
    663     background-image: url(Images/statusbarBottomBackground.png);
    664679    background-repeat: repeat-x;
    665680    background-position: bottom;
    … …  
    669684    position: absolute;
    670685    top: 0;
    671     bottom: 23px;
     686    bottom: 24px;
    672687    left: 0;
    673688    right: 0;
    … …  
    683698    left: 0;
    684699    right: 0;
    685     background: none;
    686700}
    687701

  • trunk/Source/WebCore/inspector/front-end/scriptsPanel.css

    r117064 r122332  
    5252    margin-top: -1px;
    5353    height: 24px;
    54 }
    55 
    56 #scripts-debug-toolbar img {
    57     padding-top: 2px;
     54    border-bottom: 1px solid rgb(202, 202, 202);
    5855}
    5956
    … …  
    172169    height: 16px;
    173170    width: 16px;
    174     margin: 3px 2px 2px 2px;
     171    margin: 4px 2px 2px 2px;
     172    border: none;
     173}
     174
     175button.status-bar-item.scripts-navigator-show-hide-button:active {
     176    top: 1px;
     177    left: 1px;
    175178}
    176179
    … …  
    252255    height: 16px;
    253256    width: 16px;
    254     margin: 3px 2px 2px 2px;
     257    margin: 4px 2px 2px 2px;
     258    border: none;
     259}
     260
     261button.status-bar-item.scripts-debugger-show-hide-button:active {
     262    top: 1px;
     263    right: 15px;
    255264}
    256265

  • trunk/Source/WebKit/chromium/ChangeLog

    r122310 r122332  
     12012-07-10  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: migrate from background images to CSS for statusbar rendering.
     4        https://bugs.webkit.org/show_bug.cgi?id=90902
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        * WebKit.gypi:
     9        * src/js/Images/statusbarBackgroundChromium.png: Removed.
     10        * src/js/Images/statusbarBottomBackgroundChromium.png: Removed.
     11        * src/js/Images/statusbarButtonsChromium.png: Removed.
     12        * src/js/Images/statusbarMenuButtonChromium.png: Removed.
     13        * src/js/Images/statusbarMenuButtonSelectedChromium.png: Removed.
     14        * src/js/devTools.css:
     15        (.status-bar-background):
     16
    1172012-07-11  Kenichi Ishibashi  <bashi@chromium.org>
    218

  • trunk/Source/WebKit/chromium/WebKit.gypi

    r122184 r122332  
    5151            'src/js/Images/segmentSelectedChromium.png',
    5252            'src/js/Images/segmentSelectedEndChromium.png',
    53             'src/js/Images/statusbarBackgroundChromium.png',
    54             'src/js/Images/statusbarBottomBackgroundChromium.png',
    55             'src/js/Images/statusbarButtonsChromium.png',
    56             'src/js/Images/statusbarMenuButtonChromium.png',
    57             'src/js/Images/statusbarMenuButtonSelectedChromium.png',
    5853        ],
    5954        'webkit_unittest_files': [

  • trunk/Source/WebKit/chromium/src/js/devTools.css

    r103839 r122332  
    8181}
    8282
    83 body.drawer-visible #main-status-bar {
    84     background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackgroundChromium.png);
    85 }
    86 
    8783.status-bar {
    88     background-image: url(Images/statusbarBackgroundChromium.png);
    89 }
    90 
    91 button.status-bar-item {
    92     background-image: url(Images/statusbarButtonsChromium.png);
    93 }
    94 
    95 select.status-bar-item:active {
    96     -webkit-border-image: url(Images/statusbarMenuButtonSelectedChromium.png) 0 17 0 2;
    97 }
    98 
    99 #drawer {
    100     background-image: url(Images/statusbarBottomBackgroundChromium.png);
    101 }
    102 
    103 select.status-bar-item {
    104     -webkit-border-image: url(Images/statusbarMenuButtonChromium.png) 0 17 0 2;
     84    background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
    10585}
    10686
Note: See TracChangeset for help on using the changeset viewer.