Changeset 32343 in webkit


Ignore:
Timestamp:
Apr 21, 2008 1:53:40 PM (16 years ago)
Author:
timothy@apple.com
Message:

Adds the UI portions of the Scripts panel to the Web Inspector.
The Scripts panel has not been added to the toolbar yet.

https://bugs.webkit.org/show_bug.cgi?id=18601

Reviewed by Adam Roben.

  • English.lproj/InspectorLocalizedStrings.js: Changed "Show inherited properties"

to "Show inherited". Adds new strings for the Scripts' panel tooltips.

  • page/inspector/BreakpointsSidebarPane.js: Added.
  • page/inspector/CallStackSidebarPane.js: Added.
  • page/inspector/Images/back.png: Added.
  • page/inspector/Images/debuggerContinue.png: Added.
  • page/inspector/Images/debuggerPause.png: Added.
  • page/inspector/Images/debuggerStepInto.png: Added.
  • page/inspector/Images/debuggerStepOut.png: Added.
  • page/inspector/Images/debuggerStepOver.png: Added.
  • page/inspector/Images/forward.png: Added.
  • page/inspector/Images/statusbarResizerHorizontal.png: Added.
  • page/inspector/PropertiesSection.js:

(WebInspector.PropertiesSection): Flip the order the subtile is appended
so it can float right in the CSS.

  • page/inspector/ScriptsPanel.js: Added.
  • page/inspector/StylesSidebarPane.js:

(WebInspector.StylePropertiesSection): Changed "Show inherited properties"
to "Show inherited".

  • page/inspector/inspector.css: Added new CSS rules for the Scripts panel.

Also changes the look of the section to match the mockup, this affects
Styles and Properties in Elements.

  • page/inspector/inspector.html: Import new files.
  • page/inspector/inspector.js:

(Preferences.minScriptsSidebarWidth): Added.

Location:
trunk/WebCore
Files:
11 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/WebCore/ChangeLog

    r32342 r32343  
     12008-04-21  Timothy Hatcher  <timothy@apple.com>
     2
     3        Adds the UI portions of the Scripts panel to the Web Inspector.
     4        The Scripts panel has not been added to the toolbar yet.
     5
     6        https://bugs.webkit.org/show_bug.cgi?id=18601
     7
     8        Reviewed by Adam Roben.
     9
     10        * English.lproj/InspectorLocalizedStrings.js: Changed "Show inherited properties"
     11        to "Show inherited". Adds new strings for the Scripts' panel tooltips.
     12        * page/inspector/BreakpointsSidebarPane.js: Added.
     13        * page/inspector/CallStackSidebarPane.js: Added.
     14        * page/inspector/Images/back.png: Added.
     15        * page/inspector/Images/debuggerContinue.png: Added.
     16        * page/inspector/Images/debuggerPause.png: Added.
     17        * page/inspector/Images/debuggerStepInto.png: Added.
     18        * page/inspector/Images/debuggerStepOut.png: Added.
     19        * page/inspector/Images/debuggerStepOver.png: Added.
     20        * page/inspector/Images/forward.png: Added.
     21        * page/inspector/Images/statusbarResizerHorizontal.png: Added.
     22        * page/inspector/PropertiesSection.js:
     23        (WebInspector.PropertiesSection): Flip the order the subtile is appended
     24        so it can float right in the CSS.
     25        * page/inspector/ScriptsPanel.js: Added.
     26        * page/inspector/StylesSidebarPane.js:
     27        (WebInspector.StylePropertiesSection): Changed "Show inherited properties"
     28        to "Show inherited".
     29        * page/inspector/inspector.css: Added new CSS rules for the Scripts panel.
     30        Also changes the look of the section to match the mockup, this affects
     31        Styles and Properties in Elements.
     32        * page/inspector/inspector.html: Import new files.
     33        * page/inspector/inspector.js:
     34        (Preferences.minScriptsSidebarWidth): Added.
     35
    1362008-04-21  Kevin McCullough  <kmccullough@apple.com>
    237
  • trunk/WebCore/English.lproj/InspectorLocalizedStrings.js

    r31922 r32343  
    11WebInspector.localizedStrings = {
    22    "%.0fB": "%.0fB",
     3    "%.0fms": "%.0fms",
     4    "%.1f days": "%.1f days",
     5    "%.1fhrs": "%.1fhrs",
     6    "%.1fmin": "%.1fmin",
    37    "%.2fKB": "%.2fKB",
     8    "%.2fs": "%.2fs",
    49    "%.3fMB": "%.3fMB",
    5     "%.0fms": "%.0fms",
    6     "%.2fs": "%.2fs",
    7     "%.1fmin": "%.1fmin",
    8     "%.1fhrs": "%.1fhrs",
    9     "%.1f days": "%.1f days",
    1010    "%d × %d": "%1$d × %2$d",
    1111    "%s (line %d)": "%s (line %d)",
     
    1616    "An error occurred trying to\nread the “%s” table.": "An error occurred trying to\nread the “%s” table.",
    1717    "An unexpected error %s occured.": "An unexpected error %s occured.",
     18    "Breakpoints": "Breakpoints",
     19    "Call Stack": "Call Stack",
    1820    "Clear console log.": "Clear console log.",
    1921    "Computed Style": "Computed Style",
     
    2426    "Dock to main window.": "Dock to main window.",
    2527    "Dock to main window.": "Dock to main window.",
     28    "Documents": "Documents",
    2629    "Elements": "Elements",
    2730    "File size": "File size",
     31    "Fonts": "Fonts",
    2832    "GRAPHS": "GRAPHS",
    2933    "Hide console.": "Hide console.",
     34    "Images": "Images",
    3035    "Inline Style Attribute": "Inline Style Attribute",
    3136    "MIME type": "MIME type",
     
    3338    "Option-click to show %s.": "Option-click to show %s.",
    3439    "Option-click to visit %s.": "Option-click to visit %s.",
     40    "Other": "Other",
     41    "Pause script execution.": "Pause script execution.",
    3542    "Properties": "Properties",
    3643    "Prototype": "Prototype",
     
    3946    "Resource interpreted as %s but transferred with MIME type %s.": "Resource interpreted as %1$s but transferred with MIME type %2$s.",
    4047    "Resources": "Resources",
     48    "Scripts": "Scripts",
    4149    "Search": "Search",
    4250    "Show console.": "Show console.",
    43     "Show inherited properties": "Show inherited properties",
     51    "Show inherited": "Show inherited",
     52    "Show the next script resource.": "Show the next script resource.",
     53    "Show the previous script resource.": "Show the previous script resource.",
    4454    "Size": "Size",
    4555    "Sort by Size": "Sort by Size",
    4656    "Sort by Time": "Sort by Time",
    4757    "Source": "Source",
     58    "Step into next function call.": "Step into next function call.",
     59    "Step out of current function.": "Step out of current function.",
     60    "Step over next function call.": "Step over next function call.",
    4861    "Styles": "Styles",
     62    "Stylesheets": "Stylesheets",
    4963    "The “%s”\ntable is empty.": "The “%s”\ntable is empty.",
    5064    "Time": "Time",
     
    5266    "Undock into separate window.": "Undock into separate window.",
    5367    "Use large resource rows.": "Use large resource rows.",
     68    "XHR": "XHR",
    5469    "You could save bandwidth by having your web server compress this transfer with gzip or zlib.": "You could save bandwidth by having your web server compress this transfer with gzip or zlib.",
    5570    "document": "document",
    56     "Documents": "Documents",
    5771    "element’s “%s” attribute": "element’s “%s” attribute",
    5872    "font": "font",
    59     "Fonts": "Fonts",
    6073    "image": "image",
    61     "Images": "Images",
    6274    "inline stylesheet": "inline stylesheet",
    63     "Other": "Other",
    6475    "script": "script",
    65     "Scripts": "Scripts",
    6676    "stylesheet": "stylesheet",
    67     "Stylesheets": "Stylesheets",
    6877    "user agent stylesheet": "user agent stylesheet",
    69     "XHR": "XHR",
    7078};
    71 
  • trunk/WebCore/page/inspector/PropertiesSection.js

    r28002 r32343  
    4141    this.subtitleElement.className = "subtitle";
    4242
     43    this.headerElement.appendChild(this.subtitleElement);
    4344    this.headerElement.appendChild(this.titleElement);
    44     this.headerElement.appendChild(this.subtitleElement);
     45
    4546    this.headerElement.addEventListener("click", this.toggleExpanded.bind(this), false);
    4647
  • trunk/WebCore/page/inspector/StylesSidebarPane.js

    r32224 r32343  
    251251
    252252        showInheritedLabel.appendChild(showInheritedInput);
    253         showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited properties")));
     253        showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited")));
    254254        this.subtitleElement.appendChild(showInheritedLabel);
    255255    } else {
  • trunk/WebCore/page/inspector/inspector.css

    r31972 r32343  
    252252    padding: 0;
    253253    margin-left: -1px;
     254    margin-right: 0;
    254255    vertical-align: top;
    255256    border: 0 transparent none;
     
    271272button.status-bar-item:active {
    272273    background-position: 32px 0;
     274}
     275
     276button.status-bar-item:disabled {
     277    background-position: 0 0 !important;
    273278}
    274279
     
    809814
    810815.section {
    811     display: block;
    812     -webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
    813     -webkit-border-radius: 8px;
    814     background-color: white;
    815     font-size: 11px;
    816     margin-bottom: 8px;
     816    position: relative;
     817    margin-top: 1px;
    817818}
    818819
    819820.section .header {
    820     padding: 2px 8px 4px;
    821     border: 2px solid rgba(255, 255, 255, 0.5);
    822     background-color: rgb(214, 221, 229);
    823     background-image: url(Images/gradient.png);
    824     background-repeat: repeat-x;
    825     background-position: bottom;
    826     -webkit-background-size: auto 100%;
    827     -webkit-border-radius: 8px;
    828     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
    829 }
    830 
    831 .section.expanded .header {
    832     border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
    833     -webkit-border-top-right-radius: 8px;
    834     -webkit-border-top-left-radius: 8px;
    835     -webkit-border-bottom-right-radius: 0;
    836     -webkit-border-bottom-left-radius: 0;
     821    padding: 3px 8px 4px 16px;
     822    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 172, 205)), to(rgb(132, 146, 190)));
     823    min-height: 18px;
     824    white-space: nowrap;
     825}
     826
     827.section .header::before {
     828    position: absolute;
     829    top: 4px;
     830    left: 6px;
     831    width: 8px;
     832    height: 8px;
     833    content: url(Images/treeRightTriangleWhite.png);
     834}
     835
     836.section.expanded .header::before {
     837    content: url(Images/treeDownTriangleWhite.png);
    837838}
    838839
    839840.section .header .title {
     841    color: white;
    840842    font-weight: bold;
    841843    word-wrap: break-word;
     844    white-space: normal;
    842845}
    843846
     
    851854
    852855.section .header input[type=checkbox] {
    853     height: 1em;
    854     width: 1em;
     856    height: 10px;
     857    width: 10px;
    855858    margin-left: 0;
    856859    margin-top: 0;
    857860    margin-bottom: 0;
    858     vertical-align: top;
     861    vertical-align: 2px;
    859862}
    860863
    861864.section .header .subtitle {
    862     margin-top: 2px;
     865    float: right;
    863866    font-size: 10px;
    864     word-wrap: break-word;
     867    margin-left: 5px;
     868    max-width: 55%;
     869    color: rgba(255, 255, 255, 0.7);
     870    text-overflow: ellipsis;
     871    overflow: hidden;
    865872}
    866873
     
    874881    padding: 2px 6px 5px;
    875882    list-style: none;
     883    background-color: white;
    876884}
    877885
     
    987995.swatch {
    988996    display: inline-block;
    989     vertical-align: middle;
     997    vertical-align: baseline;
    990998    margin-left: 4px;
    991     width: 0.75em;
    992     height: 0.75em;
     999    margin-bottom: -1px;
     1000    width: 1em;
     1001    height: 1em;
    9931002    border: 1px solid rgb(180, 180, 180);
    9941003}
     
    10021011    background-repeat: repeat-x;
    10031012    background-position: bottom;
    1004     -webkit-background-size: auto 100%;
    1005     height: 14px;
     1013    height: 16px;
    10061014    padding: 0 6px;
    10071015    border-top: 1px solid rgb(129, 129, 129);
     
    10331041.pane > .body {
    10341042    position: relative;
    1035     padding: 8px;
    1036     display: none;
    1037     overflow: auto;
     1043    display: none;
     1044    overflow-y: auto;
     1045    overflow-x: hidden;
    10381046}
    10391047
     
    10521060
    10531061.metrics {
     1062    padding: 8px;
    10541063    font-size: 10px;
    10551064    text-align: center;
     
    13221331.database-query-result.error::before {
    13231332    background-image: url(Images/errorIcon.png);
     1333}
     1334
     1335#scripts-status-bar {
     1336    position: absolute;
     1337    top: -1px;
     1338    left: 0;
     1339    right: 0;
     1340    height: 24px;
     1341}
     1342
     1343#scripts-status-bar .status-bar-item img {
     1344    margin-top: 2px;
     1345}
     1346
     1347#scripts-status-bar .status-bar-item:disabled img {
     1348    opacity: 0.5;
     1349}
     1350
     1351#scripts-back img {
     1352    content: url(Images/back.png);
     1353}
     1354
     1355#scripts-forward img {
     1356    content: url(Images/forward.png);
     1357}
     1358
     1359#scripts-pause img {
     1360    content: url(Images/debuggerPause.png);
     1361}
     1362
     1363#scripts-step-over img {
     1364    content: url(Images/debuggerStepOver.png);
     1365}
     1366
     1367#scripts-step-into img {
     1368    content: url(Images/debuggerStepInto.png);
     1369}
     1370
     1371#scripts-step-out img {
     1372    content: url(Images/debuggerStepOut.png);
     1373}
     1374
     1375#scripts-debugger-status {
     1376    position: absolute;
     1377    line-height: 24px;
     1378    top: 0;
     1379    right: 8px;
     1380}
     1381
     1382#scripts-debugger-status:empty {
     1383    display: none;
     1384}
     1385
     1386#scripts-sidebar-resizer-widget {
     1387    position: absolute;
     1388    top: 0;
     1389    bottom: 0;
     1390    right: 225px;
     1391    width: 16px;
     1392    cursor: col-resize;
     1393    background-image: url(Images/statusbarResizerHorizontal.png);
     1394    background-repeat: no-repeat;
     1395    background-position: center;
     1396}
     1397
     1398#scripts-sidebar-buttons {
     1399    position: absolute;
     1400    right: 0;
     1401    top: 0;
     1402    bottom: 0;
     1403    width: 225px;
     1404    overflow: hidden;
     1405    border-left: 1px solid rgb(64%, 64%, 64%);
     1406}
     1407
     1408#script-resource-views {
     1409    display: block;
     1410    overflow: auto;
     1411    padding: 0;
     1412    position: absolute;
     1413    top: 23px;
     1414    left: 0;
     1415    right: 225px;
     1416    bottom: 0;
     1417}
     1418
     1419#scripts-sidebar {
     1420    position: absolute;
     1421    top: 23px;
     1422    right: 0;
     1423    bottom: 0;
     1424    width: 225px;
     1425    background-color: rgb(232, 232, 232);
     1426    border-left: 1px solid rgb(64%, 64%, 64%);
     1427    cursor: default;
     1428    overflow: auto;
    13241429}
    13251430
  • trunk/WebCore/page/inspector/inspector.html

    r31972 r32343  
    4343    <script type="text/javascript" src="SidebarTreeElement.js"></script>
    4444    <script type="text/javascript" src="PropertiesSection.js"></script>
     45    <script type="text/javascript" src="BreakpointsSidebarPane.js"></script>
     46    <script type="text/javascript" src="CallStackSidebarPane.js"></script>
    4547    <script type="text/javascript" src="MetricsSidebarPane.js"></script>
    4648    <script type="text/javascript" src="PropertiesSidebarPane.js"></script>
     
    4951    <script type="text/javascript" src="ElementsPanel.js"></script>
    5052    <script type="text/javascript" src="ResourcesPanel.js"></script>
     53    <script type="text/javascript" src="ScriptsPanel.js"></script>
    5154    <script type="text/javascript" src="DatabasesPanel.js"></script>
    5255    <script type="text/javascript" src="ResourceView.js"></script>
  • trunk/WebCore/page/inspector/inspector.js

    r31972 r32343  
    3636    minSidebarWidth: 100,
    3737    minElementsSidebarWidth: 200,
     38    minScriptsSidebarWidth: 200,
    3839    showInheritedComputedStyleProperties: false,
    3940    showMissingLocalizedStrings: false
Note: See TracChangeset for help on using the changeset viewer.