Changeset 122332 in webkit
- Timestamp:
- Jul 11, 2012 7:50:44 AM (12 years ago)
- Location:
- trunk/Source
- Files:
-
- 10 deleted
- 10 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r122328 r122332 1 2012-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 1 42 2012-07-11 Jason Liu <jason.liu@torchmobile.com.cn> 2 43 -
trunk/Source/WebCore/WebCore.gypi
r122310 r122332 6542 6542 'inspector/front-end/Images/splitviewDimple.png', 6543 6543 'inspector/front-end/Images/splitviewDividerBackground.png', 6544 'inspector/front-end/Images/statusbarBackground.png',6545 'inspector/front-end/Images/statusbarBottomBackground.png',6546 6544 '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',6550 6545 'inspector/front-end/Images/statusbarResizerHorizontal.png', 6551 6546 'inspector/front-end/Images/statusbarResizerVertical.png', -
trunk/Source/WebCore/inspector/front-end/StatusBarButton.js
r121849 r122332 199 199 const buttonHeight = 24; 200 200 optionsBarElement.style.height = (buttonHeight * buttons.length) + "px"; 201 optionsBarElement.style.left = this.element.offsetLeft+ "px";201 optionsBarElement.style.left = (this.element.offsetLeft + 1) + "px"; 202 202 203 203 var boundMouseOver = mouseOver.bind(this); -
trunk/Source/WebCore/inspector/front-end/UIUtils.js
r121902 r122332 79 79 { 80 80 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;"; 82 82 this.element.id = "glass-pane-for-drag"; 83 83 document.body.appendChild(this.element); -
trunk/Source/WebCore/inspector/front-end/WebKit.qrc
r122104 r122332 309 309 <file>Images/splitviewDimple.png</file> 310 310 <file>Images/splitviewDividerBackground.png</file> 311 <file>Images/statusbarBackground.png</file>312 <file>Images/statusbarBottomBackground.png</file>313 <file>Images/statusbarButtons.png</file>314 311 <file>Images/statusbarButtonGlyphs.png</file> 315 <file>Images/statusbarMenuButton.png</file>316 <file>Images/statusbarMenuButtonSelected.png</file>317 312 <file>Images/statusbarResizerHorizontal.png</file> 318 313 <file>Images/statusbarResizerVertical.png</file> -
trunk/Source/WebCore/inspector/front-end/inspector.css
r121911 r122332 444 444 body.drawer-visible #main-status-bar { 445 445 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); 449 447 cursor: ns-resize; 448 } 449 450 body.drawer-visible #main-status-bar::after { 451 position: absolute; 452 right: 0; 453 top: 5px; 454 content: url(Images/statusbarResizerVertical.png); 450 455 } 451 456 … … 459 464 460 465 .status-bar { 461 background-color: rgb(235, 235, 235);462 background-image: url(Images/statusbarBackground.png);463 background-repeat: repeat-x;464 466 white-space: nowrap; 465 467 height: 23px; 466 468 overflow: hidden; 467 469 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); 468 472 } 469 473 … … 471 475 display: inline-block; 472 476 vertical-align: top; 477 overflow: visible; 478 margin-top: -1px; 473 479 } 474 480 … … 491 497 .glyph { 492 498 position: absolute; 493 top: 0;499 top: -1px; 494 500 left: 0; 495 501 right: 0; … … 521 527 position: relative; 522 528 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); 529 538 } 530 539 … … 549 558 select.status-bar-item { 550 559 min-width: 48px; 551 border-width: 0 17px 0 2px;552 padding: 0 2px 0 6px;553 560 font-weight: bold; 554 561 color: rgb(48, 48, 48); 555 562 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 565 select.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); 564 568 } 565 569 … … 587 591 } 588 592 593 body.detached .alternate-status-bar-buttons-bar { 594 margin-left: 1px; 595 } 596 589 597 .alternate-status-bar-buttons-bar { 590 598 position: absolute; 591 599 width: 31px; 592 600 bottom: -3px; 593 margin-left: 1px;594 601 background: white; 595 602 } 596 603 597 604 .alternate-status-bar-buttons-bar .status-bar-item { 605 height: 24px; 598 606 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; 599 615 } 600 616 … … 661 677 height: 200px; 662 678 background-color: white; 663 background-image: url(Images/statusbarBottomBackground.png);664 679 background-repeat: repeat-x; 665 680 background-position: bottom; … … 669 684 position: absolute; 670 685 top: 0; 671 bottom: 2 3px;686 bottom: 24px; 672 687 left: 0; 673 688 right: 0; … … 683 698 left: 0; 684 699 right: 0; 685 background: none;686 700 } 687 701 -
trunk/Source/WebCore/inspector/front-end/scriptsPanel.css
r117064 r122332 52 52 margin-top: -1px; 53 53 height: 24px; 54 } 55 56 #scripts-debug-toolbar img { 57 padding-top: 2px; 54 border-bottom: 1px solid rgb(202, 202, 202); 58 55 } 59 56 … … 172 169 height: 16px; 173 170 width: 16px; 174 margin: 3px 2px 2px 2px; 171 margin: 4px 2px 2px 2px; 172 border: none; 173 } 174 175 button.status-bar-item.scripts-navigator-show-hide-button:active { 176 top: 1px; 177 left: 1px; 175 178 } 176 179 … … 252 255 height: 16px; 253 256 width: 16px; 254 margin: 3px 2px 2px 2px; 257 margin: 4px 2px 2px 2px; 258 border: none; 259 } 260 261 button.status-bar-item.scripts-debugger-show-hide-button:active { 262 top: 1px; 263 right: 15px; 255 264 } 256 265 -
trunk/Source/WebKit/chromium/ChangeLog
r122310 r122332 1 2012-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 1 17 2012-07-11 Kenichi Ishibashi <bashi@chromium.org> 2 18 -
trunk/Source/WebKit/chromium/WebKit.gypi
r122184 r122332 51 51 'src/js/Images/segmentSelectedChromium.png', 52 52 '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',58 53 ], 59 54 'webkit_unittest_files': [ -
trunk/Source/WebKit/chromium/src/js/devTools.css
r103839 r122332 81 81 } 82 82 83 body.drawer-visible #main-status-bar {84 background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackgroundChromium.png);85 }86 87 83 .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)); 105 85 } 106 86
Note: See TracChangeset
for help on using the changeset viewer.