Changeset 223006 in webkit


Ignore:
Timestamp:
Oct 6, 2017, 3:48:28 PM (8 years ago)
Author:
Joseph Pecoraro
Message:

Web Inspector: Network Tab - Headers Detail View
​https://bugs.webkit.org/show_bug.cgi?id=177896
<rdar://problem/34071924>

Source/WebInspectorUI:

Reviewed by Devin Rousso.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Main.html:

New resources and strings.

  • UserInterface/Base/URLUtilities.js:

(parseURL):
(WI.h2Authority):
(WI.h2Path):
Utility methods to get the :authority and :path pseudo-headers from a URL.
This required adding user info (user:pass@) support to URL parsing.

  • UserInterface/Views/NetworkTabContentView.js:

(WI.NetworkTabContentView):

  • UserInterface/Views/NetworkTableContentView.js:

(WI.NetworkTableContentView.prototype.get navigationItems):
(WI.NetworkTableContentView.prototype.get filterNavigationItems):
Move the NetworkTab's filter controls to the left. Since these are not
dynamic just vend them from the TableContentView and place them in the
navigation bar.

  • UserInterface/Models/Resource.js:

(WI.Resource.prototype.updateWithMetrics):
New event whenever metrics change. This is the first event that will allow
a client to react to a resource.protocol change.

  • UserInterface/Views/NetworkResourceDetailView.css:

(.content-view.resource-details):
Base styles for the sub detail views.

  • UserInterface/Views/NetworkResourceDetailView.js:

(WI.NetworkResourceDetailView):
(WI.NetworkResourceDetailView.prototype.headersContentViewGoToRequestData):
(WI.NetworkResourceDetailView.prototype.initialLayout):
(WI.NetworkResourceDetailView.prototype._showPreferredContentView):
(WI.NetworkResourceDetailView.prototype._showContentViewForNavigationItem):
Create a Header view and provide a way to switch to a particular view. This wil
be useful to jump from the Header's Request Data directly to the Preview's
Request ContentView.

  • UserInterface/Views/ResourceDetailsSection.css:

(.resource-details > section):
(.resource-details > section > .title):
(.resource-details > section > .details):
(.resource-details > section > .details > p):
(.resource-details > section.incomplete > .details):

  • UserInterface/Views/ResourceDetailsSection.js:

(WI.ResourceDetailsSection):
(WI.ResourceDetailsSection.prototype.get element):
(WI.ResourceDetailsSection.prototype.get titleElement):
(WI.ResourceDetailsSection.prototype.get detailsElement):
(WI.ResourceDetailsSection.prototype.toggleIncomplete):
(WI.ResourceDetailsSection.prototype.toggleError):
Simple sections with a title and details div with a border.
It may be common to have an incomplete load / error so this
provides some APIs and styles for sections marked incomplete
or with errors.

  • UserInterface/Views/ResourceHeadersContentView.css:

(.resource-headers > section > .details):
(.resource-headers > section.headers > .details):
(.resource-headers > section.error > .details):
(.resource-headers > section.error .key):
Style the left border different colors for different sections or cases.

(.resource-headers .details):
(.resource-headers .details .pair):
(.resource-headers .details .key):
(.resource-headers .value):
(.resource-headers .header > .key):
(.resource-headers .h1-status > .key):
(.resource-headers .h2-pseudo-header > .key):
Wrapped text for key/value pairs and different colors for different
sections or cases.

(.resource-headers .go-to-arrow):
Go-to arrow styles for a request data section.

  • UserInterface/Views/ResourceHeadersContentView.js: Added.

(WI.ResourceHeadersContentView):
(WI.ResourceHeadersContentView.prototype.initialLayout):
(WI.ResourceHeadersContentView.prototype.layout):
(WI.ResourceHeadersContentView.prototype._incompleteSectionWithMessage):
(WI.ResourceHeadersContentView.prototype._incompleteSectionWithLoadingIndicator):
(WI.ResourceHeadersContentView.prototype._appendKeyValuePair):
(WI.ResourceHeadersContentView.prototype._responseSourceDisplayString):
(WI.ResourceHeadersContentView.prototype._refreshSummarySection):
(WI.ResourceHeadersContentView.prototype._refreshRequestHeadersSection):
(WI.ResourceHeadersContentView.prototype._refreshResponseHeadersSection):
(WI.ResourceHeadersContentView.prototype._refreshQueryStringSection):
(WI.ResourceHeadersContentView.prototype._refreshRequestDataSection):
(WI.ResourceHeadersContentView.prototype._resourceMetricsDidChange):
(WI.ResourceHeadersContentView.prototype._resourceRequestHeadersDidChange):
(WI.ResourceHeadersContentView.prototype._resourceResponseReceived):
(WI.ResourceHeadersContentView.prototype._goToRequestDataClicked):
Summary, Request, Response, Query String, and Request Data sections.
The sections refresh as data becomes available.

  • UserInterface/Views/Table.css:

(.table):
These variables are already defined globally.

  • UserInterface/Views/Variables.css:

(:root):
New variables for the colors we use. They closely match, and are
sometimes identical to ones used in Timelines / Memory views.

Source/WebInspectorUI/../../LayoutTests:

Reviewed by NOBODY (OOPS!).

  • inspector/unit-tests/url-utilities-expected.txt:
  • inspector/unit-tests/url-utilities.html:

Tests for new utility functions.

Location:
trunk
Files:
1 added
14 edited
3 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r222999 r223006  
     12017-10-05  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Network Tab - Headers Detail View
     4        https://bugs.webkit.org/show_bug.cgi?id=177896
     5        <rdar://problem/34071924>
     6
     7        Reviewed by Devin Rousso.
     8
     9        * inspector/unit-tests/url-utilities-expected.txt:
     10        * inspector/unit-tests/url-utilities.html:
     11        Tests for new utility functions.
     12
    1132017-10-06  Nan Wang  <n_wang@apple.com>
    214

  • trunk/LayoutTests/inspector/unit-tests/url-utilities-expected.txt

    r209143 r223006  
    1313Test Valid: http://example.com
    1414PASS: scheme should be: 'http'
     15PASS: userinfo should be: 'null'
    1516PASS: host should be: 'example.com'
    1617PASS: port should be: 'null'
    … …  
    2223Test Valid: http://example.com/
    2324PASS: scheme should be: 'http'
     25PASS: userinfo should be: 'null'
    2426PASS: host should be: 'example.com'
    2527PASS: port should be: 'null'
    … …  
    3133Test Valid: http://example.com:80/
    3234PASS: scheme should be: 'http'
     35PASS: userinfo should be: 'null'
    3336PASS: host should be: 'example.com'
    3437PASS: port should be: '80'
    … …  
    4043Test Valid: http://example.com/path/to/page.html
    4144PASS: scheme should be: 'http'
     45PASS: userinfo should be: 'null'
    4246PASS: host should be: 'example.com'
    4347PASS: port should be: 'null'
    … …  
    4953Test Valid: http://example.com/path/to/page.html?
    5054PASS: scheme should be: 'http'
     55PASS: userinfo should be: 'null'
    5156PASS: host should be: 'example.com'
    5257PASS: port should be: 'null'
    … …  
    5863Test Valid: http://example.com/path/to/page.html?a=1
    5964PASS: scheme should be: 'http'
     65PASS: userinfo should be: 'null'
    6066PASS: host should be: 'example.com'
    6167PASS: port should be: 'null'
    … …  
    6773Test Valid: http://example.com/path/to/page.html?a=1&b=2
    6874PASS: scheme should be: 'http'
     75PASS: userinfo should be: 'null'
    6976PASS: host should be: 'example.com'
    7077PASS: port should be: 'null'
    … …  
    7683Test Valid: http://example.com/path/to/page.html?a=1&b=2#test
    7784PASS: scheme should be: 'http'
     85PASS: userinfo should be: 'null'
    7886PASS: host should be: 'example.com'
    7987PASS: port should be: 'null'
    … …  
    8593Test Valid: http://example.com:123/path/to/page.html?a=1&b=2#test
    8694PASS: scheme should be: 'http'
     95PASS: userinfo should be: 'null'
    8796PASS: host should be: 'example.com'
    8897PASS: port should be: '123'
    … …  
    94103Test Valid: http://example.com/path/to/page.html#test
    95104PASS: scheme should be: 'http'
     105PASS: userinfo should be: 'null'
    96106PASS: host should be: 'example.com'
    97107PASS: port should be: 'null'
    … …  
    103113Test Valid: http://example.com#alpha/beta
    104114PASS: scheme should be: 'http'
     115PASS: userinfo should be: 'null'
    105116PASS: host should be: 'example.com'
    106117PASS: port should be: 'null'
    … …  
    112123Test Valid: app-specific://example.com
    113124PASS: scheme should be: 'app-specific'
     125PASS: userinfo should be: 'null'
    114126PASS: host should be: 'example.com'
    115127PASS: port should be: 'null'
    … …  
    121133Test Valid: http://example
    122134PASS: scheme should be: 'http'
     135PASS: userinfo should be: 'null'
    123136PASS: host should be: 'example'
    124137PASS: port should be: 'null'
    … …  
    130143Test Valid: http://my.example.com
    131144PASS: scheme should be: 'http'
     145PASS: userinfo should be: 'null'
    132146PASS: host should be: 'my.example.com'
    133147PASS: port should be: 'null'
    … …  
    139153Test Valid: data:text/plain,test
    140154PASS: scheme should be: 'data'
     155PASS: userinfo should be: 'null'
    141156PASS: host should be: 'null'
    142157PASS: port should be: 'null'
    … …  
    164179    Expected: "http"
    165180    Actual: null
     181PASS: userinfo should be: 'null'
    166182FAIL: host should be: 'example.com'
    167183    Expected: "example.com"
    … …  
    179195    Expected: "http"
    180196    Actual: null
     197PASS: userinfo should be: 'null'
    181198FAIL: host should be: 'example.com'
    182199    Expected: "example.com"
    … …  
    186203    Expected: "/"
    187204    Actual: null
     205PASS: queryString should be: 'null'
     206PASS: fragment should be: 'null'
     207PASS: lastPathComponent should be: 'null'
     208
     209Test Valid: http://user:pass@example.com/
     210PASS: scheme should be: 'http'
     211PASS: userinfo should be: 'user:pass'
     212PASS: host should be: 'example.com'
     213PASS: port should be: 'null'
     214PASS: path should be: '/'
    188215PASS: queryString should be: 'null'
    189216PASS: fragment should be: 'null'
    … …  
    194221    Expected: "http"
    195222    Actual: null
     223PASS: userinfo should be: 'null'
    196224FAIL: host should be: 'example.com'
    197225    Expected: "example.com"
    … …  
    207235Test Valid: http://example.com?key=alpha/beta
    208236PASS: scheme should be: 'http'
     237PASS: userinfo should be: 'null'
    209238FAIL: host should be: 'example.com'
    210239    Expected: "example.com"
    … …  
    307336PASS: data should be: 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    308337
     338-- Running test case: WI.h2Authority
     339PASS: HTTP/2 :authority of 'http://example.com' should be 'example.com'.
     340PASS: HTTP/2 :authority of 'https://example.com' should be 'example.com'.
     341PASS: HTTP/2 :authority of 'ftp://example.com' should be 'example.com'.
     342PASS: HTTP/2 :authority of 'http://example.com/foo' should be 'example.com'.
     343PASS: HTTP/2 :authority of 'https://example.com/foo' should be 'example.com'.
     344PASS: HTTP/2 :authority of 'ftp://example.com/foo' should be 'example.com'.
     345PASS: HTTP/2 :authority of 'http://example.com:123' should be 'example.com:123'.
     346PASS: HTTP/2 :authority of 'https://example.com:123' should be 'example.com:123'.
     347PASS: HTTP/2 :authority of 'ftp://example.com:123' should be 'example.com:123'.
     348PASS: HTTP/2 :authority of 'ftp://user:pass@example.com/foo' should be 'user:pass@example.com'.
     349PASS: HTTP/2 :authority of 'http://user:pass@example.com/foo' should be 'example.com'.
     350PASS: HTTP/2 :authority of 'https://user:pass@example.com/foo' should be 'example.com'.
     351PASS: HTTP/2 :authority of 'ftp://user:pass@example.com:123/foo' should be 'user:pass@example.com:123'.
     352PASS: HTTP/2 :authority of 'http://user:pass@example.com:123/foo' should be 'example.com:123'.
     353PASS: HTTP/2 :authority of 'https://user:pass@example.com:123/foo' should be 'example.com:123'.
     354
     355-- Running test case: WI.h2Path
     356PASS: HTTP/2 :path of 'http://example.com' should be '/'.
     357PASS: HTTP/2 :path of 'https://example.com' should be '/'.
     358PASS: HTTP/2 :path of 'ftp://example.com' should be ''.
     359PASS: HTTP/2 :path of 'http://example.com/foo' should be '/foo'.
     360PASS: HTTP/2 :path of 'https://example.com/foo' should be '/foo'.
     361PASS: HTTP/2 :path of 'ftp://example.com/foo' should be '/foo'.
     362PASS: HTTP/2 :path of 'http://example.com/foo#hash' should be '/foo'.
     363PASS: HTTP/2 :path of 'https://example.com/foo#hash' should be '/foo'.
     364PASS: HTTP/2 :path of 'ftp://example.com/foo#hash' should be '/foo'.
     365PASS: HTTP/2 :path of 'http://example.com/foo/bar.js' should be '/foo/bar.js'.
     366PASS: HTTP/2 :path of 'https://example.com/foo/bar.js' should be '/foo/bar.js'.
     367PASS: HTTP/2 :path of 'ftp://example.com/foo/bar.js' should be '/foo/bar.js'.
     368PASS: HTTP/2 :path of 'http://example.com/foo/bar.js#hash' should be '/foo/bar.js'.
     369PASS: HTTP/2 :path of 'https://example.com/foo/bar.js#hash' should be '/foo/bar.js'.
     370PASS: HTTP/2 :path of 'ftp://example.com/foo/bar.js#hash' should be '/foo/bar.js'.
     371PASS: HTTP/2 :path of 'http://example.com/?t=1' should be '/?t=1'.
     372PASS: HTTP/2 :path of 'https://example.com/?t=1' should be '/?t=1'.
     373PASS: HTTP/2 :path of 'ftp://example.com/?t=1' should be '/?t=1'.
     374PASS: HTTP/2 :path of 'http://example.com/foo/bar.js?t=1' should be '/foo/bar.js?t=1'.
     375PASS: HTTP/2 :path of 'https://example.com/foo/bar.js?t=1' should be '/foo/bar.js?t=1'.
     376PASS: HTTP/2 :path of 'ftp://example.com/foo/bar.js?t=1' should be '/foo/bar.js?t=1'.
     377PASS: HTTP/2 :path of 'http://example.com/foo/bar.js?t=1#hash' should be '/foo/bar.js?t=1'.
     378PASS: HTTP/2 :path of 'https://example.com/foo/bar.js?t=1#hash' should be '/foo/bar.js?t=1'.
     379PASS: HTTP/2 :path of 'ftp://example.com/foo/bar.js?t=1#hash' should be '/foo/bar.js?t=1'.
     380

  • trunk/LayoutTests/inspector/unit-tests/url-utilities.html

    r209143 r223006  
    2828                InspectorTest.log("Test Valid: " + url);
    2929
    30                 let {scheme: expectedScheme, host: expectedHost, port: expectedPort, path: expectedPath, queryString: expectedQueryString, fragment: expectedFragment, lastPathComponent: expectedLastPathComponent} = expected;
    31                 let {scheme: actualScheme, host: actualHost, port: actualPort, path: actualPath, queryString: actualQueryString, fragment: actualFragment, lastPathComponent: actualLastPathComponent} = parseURL(url);
     30                let {scheme: expectedScheme, userinfo: expectedUserInfo, host: expectedHost, port: expectedPort, path: expectedPath, queryString: expectedQueryString, fragment: expectedFragment, lastPathComponent: expectedLastPathComponent} = expected;
     31                let {scheme: actualScheme, userinfo: actualUserInfo, host: actualHost, port: actualPort, path: actualPath, queryString: actualQueryString, fragment: actualFragment, lastPathComponent: actualLastPathComponent} = parseURL(url);
    3232
    3333                InspectorTest.expectEqual(actualScheme, expectedScheme, `scheme should be: '${expectedScheme}'`);
     34                InspectorTest.expectEqual(actualUserInfo, expectedUserInfo, `userinfo should be: '${expectedUserInfo}'`);
    3435                InspectorTest.expectEqual(actualHost, expectedHost, `host should be: '${expectedHost}'`);
    3536                InspectorTest.expectEqual(actualPort, expectedPort, `port should be: '${expectedPort}'`);
    … …  
    4546            testValid("http://example.com", {
    4647                scheme: "http",
     48                userinfo: null,
    4749                host: "example.com",
    4850                port: null,
    … …  
    5557            testValid("http://example.com/", {
    5658                scheme: "http",
     59                userinfo: null,
    5760                host: "example.com",
    5861                port: null,
    … …  
    6568            testValid("http://example.com:80/", {
    6669                scheme: "http",
     70                userinfo: null,
    6771                host: "example.com",
    6872                port: 80,
    … …  
    7579            testValid("http://example.com/path/to/page.html", {
    7680                scheme: "http",
     81                userinfo: null,
    7782                host: "example.com",
    7883                port: null,
    … …  
    8590            testValid("http://example.com/path/to/page.html?", {
    8691                scheme: "http",
     92                userinfo: null,
    8793                host: "example.com",
    8894                port: null,
    … …  
    95101            testValid("http://example.com/path/to/page.html?a=1", {
    96102                scheme: "http",
     103                userinfo: null,
    97104                host: "example.com",
    98105                port: null,
    … …  
    105112            testValid("http://example.com/path/to/page.html?a=1&b=2", {
    106113                scheme: "http",
     114                userinfo: null,
    107115                host: "example.com",
    108116                port: null,
    … …  
    115123            testValid("http://example.com/path/to/page.html?a=1&b=2#test", {
    116124                scheme: "http",
     125                userinfo: null,
    117126                host: "example.com",
    118127                port: null,
    … …  
    125134            testValid("http://example.com:123/path/to/page.html?a=1&b=2#test", {
    126135                scheme: "http",
     136                userinfo: null,
    127137                host: "example.com",
    128138                port: 123,
    … …  
    135145            testValid("http://example.com/path/to/page.html#test", {
    136146                scheme: "http",
     147                userinfo: null,
    137148                host: "example.com",
    138149                port: null,
    … …  
    145156            testValid("http://example.com#alpha/beta", {
    146157                scheme: "http",
     158                userinfo: null,
    147159                host: "example.com",
    148160                port: null,
    … …  
    155167            testValid("app-specific://example.com", {
    156168                scheme: "app-specific",
     169                userinfo: null,
    157170                host: "example.com",
    158171                port: null,
    … …  
    165178            testValid("http://example", {
    166179                scheme: "http",
     180                userinfo: null,
    167181                host: "example",
    168182                port: null,
    … …  
    175189            testValid("http://my.example.com", {
    176190                scheme: "http",
     191                userinfo: null,
    177192                host: "my.example.com",
    178193                port: null,
    … …  
    186201            testValid("data:text/plain,test", {
    187202                scheme: "data",
     203                userinfo: null,
    188204                host: null,
    189205                port: null,
    … …  
    203219            testValid("http:example.com/", {
    204220                scheme: "http",
     221                userinfo: null,
    205222                host: "example.com",
    206223                port: null,
    … …  
    213230            testValid("http:/example.com/", {
    214231                scheme: "http",
     232                userinfo: null,
     233                host: "example.com",
     234                port: null,
     235                path: "/",
     236                queryString: null,
     237                fragment: null,
     238                lastPathComponent: null,
     239            });
     240
     241            testValid("http://user:pass@example.com/", {
     242                scheme: "http",
     243                userinfo: "user:pass",
    215244                host: "example.com",
    216245                port: null,
    … …  
    223252            testValid("http://user@pass:example.com/", {
    224253                scheme: "http",
     254                userinfo: null,
    225255                host: "example.com",
    226256                port: null,
    … …  
    233263            testValid("http://example.com?key=alpha/beta", {
    234264                scheme: "http",
     265                userinfo: null,
    235266                host: "example.com",
    236267                port: null,
    … …  
    244275        }
    245276    });
    246 
    247277
    248278    suite.addTestCase({
    … …  
    356386    });
    357387
     388    suite.addTestCase({
     389        name: "WI.h2Authority",
     390        test() {
     391            function test(url, expected) {
     392                let components = parseURL(url);
     393                InspectorTest.expectEqual(WI.h2Authority(components), expected, `HTTP/2 :authority of '${url}' should be '${expected}'.`);
     394            }
     395
     396            test("http://example.com", "example.com");
     397            test("https://example.com", "example.com");
     398            test("ftp://example.com", "example.com");
     399
     400            test("http://example.com/foo", "example.com");
     401            test("https://example.com/foo", "example.com");
     402            test("ftp://example.com/foo", "example.com");
     403
     404            test("http://example.com:123", "example.com:123");
     405            test("https://example.com:123", "example.com:123");
     406            test("ftp://example.com:123", "example.com:123");
     407
     408            test("ftp://user:pass@example.com/foo", "user:pass@example.com");
     409            test("http://user:pass@example.com/foo", "example.com");
     410            test("https://user:pass@example.com/foo", "example.com");
     411
     412            test("ftp://user:pass@example.com:123/foo", "user:pass@example.com:123");
     413            test("http://user:pass@example.com:123/foo", "example.com:123");
     414            test("https://user:pass@example.com:123/foo", "example.com:123");
     415
     416            return true;
     417        }
     418    });
     419
     420    suite.addTestCase({
     421        name: "WI.h2Path",
     422        test() {
     423            function test(url, expected) {
     424                let components = parseURL(url);
     425                InspectorTest.expectEqual(WI.h2Path(components), expected, `HTTP/2 :path of '${url}' should be '${expected}'.`);
     426            }
     427
     428            test("http://example.com", "/");
     429            test("https://example.com", "/");
     430            test("ftp://example.com", "");
     431
     432            test("http://example.com/foo", "/foo");
     433            test("https://example.com/foo", "/foo");
     434            test("ftp://example.com/foo", "/foo");
     435            test("http://example.com/foo#hash", "/foo");
     436            test("https://example.com/foo#hash", "/foo");
     437            test("ftp://example.com/foo#hash", "/foo");
     438
     439            test("http://example.com/foo/bar.js", "/foo/bar.js");
     440            test("https://example.com/foo/bar.js", "/foo/bar.js");
     441            test("ftp://example.com/foo/bar.js", "/foo/bar.js");
     442            test("http://example.com/foo/bar.js#hash", "/foo/bar.js");
     443            test("https://example.com/foo/bar.js#hash", "/foo/bar.js");
     444            test("ftp://example.com/foo/bar.js#hash", "/foo/bar.js");
     445
     446            test("http://example.com/?t=1", "/?t=1");
     447            test("https://example.com/?t=1", "/?t=1");
     448            test("ftp://example.com/?t=1", "/?t=1");
     449
     450            test("http://example.com/foo/bar.js?t=1", "/foo/bar.js?t=1");
     451            test("https://example.com/foo/bar.js?t=1", "/foo/bar.js?t=1");
     452            test("ftp://example.com/foo/bar.js?t=1", "/foo/bar.js?t=1");
     453            test("http://example.com/foo/bar.js?t=1#hash", "/foo/bar.js?t=1");
     454            test("https://example.com/foo/bar.js?t=1#hash", "/foo/bar.js?t=1");
     455            test("ftp://example.com/foo/bar.js?t=1#hash", "/foo/bar.js?t=1");
     456
     457            return true;
     458        }
     459    });
     460
    358461    suite.runTestCasesAndFinish();
    359462}

  • trunk/Source/WebInspectorUI/ChangeLog

    r222988 r223006  
     12017-10-06  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Network Tab - Headers Detail View
     4        https://bugs.webkit.org/show_bug.cgi?id=177896
     5        <rdar://problem/34071924>
     6
     7        Reviewed by Devin Rousso.
     8
     9        * Localizations/en.lproj/localizedStrings.js:
     10        * UserInterface/Main.html:
     11        New resources and strings.
     12
     13        * UserInterface/Base/URLUtilities.js:
     14        (parseURL):
     15        (WI.h2Authority):
     16        (WI.h2Path):
     17        Utility methods to get the :authority and :path pseudo-headers from a URL.
     18        This required adding user info (user:pass@) support to URL parsing.
     19
     20        * UserInterface/Views/NetworkTabContentView.js:
     21        (WI.NetworkTabContentView):
     22        * UserInterface/Views/NetworkTableContentView.js:
     23        (WI.NetworkTableContentView.prototype.get navigationItems):
     24        (WI.NetworkTableContentView.prototype.get filterNavigationItems):
     25        Move the NetworkTab's filter controls to the left. Since these are not
     26        dynamic just vend them from the TableContentView and place them in the
     27        navigation bar.
     28
     29        * UserInterface/Models/Resource.js:
     30        (WI.Resource.prototype.updateWithMetrics):
     31        New event whenever metrics change. This is the first event that will allow
     32        a client to react to a resource.protocol change.
     33
     34        * UserInterface/Views/NetworkResourceDetailView.css:
     35        (.content-view.resource-details):
     36        Base styles for the sub detail views.
     37
     38        * UserInterface/Views/NetworkResourceDetailView.js:
     39        (WI.NetworkResourceDetailView):
     40        (WI.NetworkResourceDetailView.prototype.headersContentViewGoToRequestData):
     41        (WI.NetworkResourceDetailView.prototype.initialLayout):
     42        (WI.NetworkResourceDetailView.prototype._showPreferredContentView):
     43        (WI.NetworkResourceDetailView.prototype._showContentViewForNavigationItem):
     44        Create a Header view and provide a way to switch to a particular view. This wil
     45        be useful to jump from the Header's Request Data directly to the Preview's
     46        Request ContentView.
     47
     48        * UserInterface/Views/ResourceDetailsSection.css:
     49        (.resource-details > section):
     50        (.resource-details > section > .title):
     51        (.resource-details > section > .details):
     52        (.resource-details > section > .details > p):
     53        (.resource-details > section.incomplete > .details):
     54        * UserInterface/Views/ResourceDetailsSection.js:
     55        (WI.ResourceDetailsSection):
     56        (WI.ResourceDetailsSection.prototype.get element):
     57        (WI.ResourceDetailsSection.prototype.get titleElement):
     58        (WI.ResourceDetailsSection.prototype.get detailsElement):
     59        (WI.ResourceDetailsSection.prototype.toggleIncomplete):
     60        (WI.ResourceDetailsSection.prototype.toggleError):
     61        Simple sections with a title and details div with a border.
     62        It may be common to have an incomplete load / error so this
     63        provides some APIs and styles for sections marked incomplete
     64        or with errors.
     65
     66        * UserInterface/Views/ResourceHeadersContentView.css:
     67        (.resource-headers > section > .details):
     68        (.resource-headers > section.headers > .details):
     69        (.resource-headers > section.error > .details):
     70        (.resource-headers > section.error .key):
     71        Style the left border different colors for different sections or cases.
     72
     73        (.resource-headers .details):
     74        (.resource-headers .details .pair):
     75        (.resource-headers .details .key):
     76        (.resource-headers .value):
     77        (.resource-headers .header > .key):
     78        (.resource-headers .h1-status > .key):
     79        (.resource-headers .h2-pseudo-header > .key):
     80        Wrapped text for key/value pairs and different colors for different
     81        sections or cases.
     82
     83        (.resource-headers .go-to-arrow):
     84        Go-to arrow styles for a request data section.
     85
     86        * UserInterface/Views/ResourceHeadersContentView.js: Added.
     87        (WI.ResourceHeadersContentView):
     88        (WI.ResourceHeadersContentView.prototype.initialLayout):
     89        (WI.ResourceHeadersContentView.prototype.layout):
     90        (WI.ResourceHeadersContentView.prototype._incompleteSectionWithMessage):
     91        (WI.ResourceHeadersContentView.prototype._incompleteSectionWithLoadingIndicator):
     92        (WI.ResourceHeadersContentView.prototype._appendKeyValuePair):
     93        (WI.ResourceHeadersContentView.prototype._responseSourceDisplayString):
     94        (WI.ResourceHeadersContentView.prototype._refreshSummarySection):
     95        (WI.ResourceHeadersContentView.prototype._refreshRequestHeadersSection):
     96        (WI.ResourceHeadersContentView.prototype._refreshResponseHeadersSection):
     97        (WI.ResourceHeadersContentView.prototype._refreshQueryStringSection):
     98        (WI.ResourceHeadersContentView.prototype._refreshRequestDataSection):
     99        (WI.ResourceHeadersContentView.prototype._resourceMetricsDidChange):
     100        (WI.ResourceHeadersContentView.prototype._resourceRequestHeadersDidChange):
     101        (WI.ResourceHeadersContentView.prototype._resourceResponseReceived):
     102        (WI.ResourceHeadersContentView.prototype._goToRequestDataClicked):
     103        Summary, Request, Response, Query String, and Request Data sections.
     104        The sections refresh as data becomes available.
     105
     106        * UserInterface/Views/Table.css:
     107        (.table):
     108        These variables are already defined globally.
     109
     110        * UserInterface/Views/Variables.css:
     111        (:root):
     112        New variables for the colors we use. They closely match, and are
     113        sometimes identical to ones used in Timelines / Memory views.
     114
    11152017-10-06  Joseph Pecoraro  <pecoraro@apple.com>
    2116

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r222868 r223006  
    296296localizedStrings["Disable paint flashing"] = "Disable paint flashing";
    297297localizedStrings["Disabled"] = "Disabled";
     298localizedStrings["Disk Cache"] = "Disk Cache";
    298299localizedStrings["Display"] = "Display";
    299300localizedStrings["Do not fade unexecuted code"] = "Do not fade unexecuted code";
    … …  
    562563localizedStrings["Medium"] = "Medium";
    563564localizedStrings["Memory"] = "Memory";
     565localizedStrings["Memory Cache"] = "Memory Cache";
    564566localizedStrings["Memory usage of this canvas"] = "Memory usage of this canvas";
    565567localizedStrings["Memory: %s"] = "Memory: %s";
    … …  
    606608localizedStrings["No matching ARIA role"] = "No matching ARIA role";
    607609localizedStrings["No preview available"] = "No preview available";
     610localizedStrings["No request headers"] = "No request headers";
     611localizedStrings["No request, served from the disk cache."] = "No request, served from the disk cache.";
     612localizedStrings["No request, served from the memory cache."] = "No request, served from the memory cache.";
     613localizedStrings["No response headers"] = "No response headers";
    608614localizedStrings["Node"] = "Node";
    609615localizedStrings["Node Removed"] = "Node Removed";
    … …  
    877883localizedStrings["Stylesheets"] = "Stylesheets";
    878884localizedStrings["Subtree Modified"] = "Subtree Modified";
     885localizedStrings["Summary"] = "Summary";
    879886localizedStrings["Tab width:"] = "Tab width:";
    880887localizedStrings["Tabs"] = "Tabs";

  • trunk/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js

    r222216 r223006  
    9797
    9898    if (url.startsWith("data:"))
    99         return {scheme: "data", host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
    100 
    101     var match = url.match(/^(?<scheme>[^\/:]+):\/\/(?<host>[^\/#:]*)(?::(?<port>[\d]+))?(?:(?<path>\/[^#]*)?(?:#(?<fragment>.*))?)?$/i);
     99        return {scheme: "data", userinfo: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
     100
     101    let match = url.match(/^(?<scheme>[^\/:]+):\/\/(?:(?<userinfo>[^#@\/]+)@)?(?<host>[^\/#:]*)(?::(?<port>[\d]+))?(?:(?<path>\/[^#]*)?(?:#(?<fragment>.*))?)?$/i);
    102102    if (!match)
    103         return {scheme: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
    104 
    105     var scheme = match.groups.scheme.toLowerCase();
    106     var host = match.groups.host.toLowerCase();
    107     var port = Number(match.groups.port) || null;
    108     var wholePath = match.groups.path || null;
    109     var fragment = match.groups.fragment || null;
    110     var path = wholePath;
    111     var queryString = null;
     103        return {scheme: null, userinfo: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
     104
     105    let scheme = match.groups.scheme.toLowerCase();
     106    let userinfo = match.groups.userinfo || null;
     107    let host = match.groups.host.toLowerCase();
     108    let port = Number(match.groups.port) || null;
     109    let wholePath = match.groups.path || null;
     110    let fragment = match.groups.fragment || null;
     111    let path = wholePath;
     112    let queryString = null;
    112113
    113114    // Split the path and the query string.
    114115    if (wholePath) {
    115         var indexOfQuery = wholePath.indexOf("?");
     116        let indexOfQuery = wholePath.indexOf("?");
    116117        if (indexOfQuery !== -1) {
    117118            path = wholePath.substring(0, indexOfQuery);
    … …  
    122123
    123124    // Find last path component.
    124     var lastPathComponent = null;
     125    let lastPathComponent = null;
    125126    if (path && path !== "/") {
    126127        // Skip the trailing slash if there is one.
    127         var endOffset = path[path.length - 1] === "/" ? 1 : 0;
    128         var lastSlashIndex = path.lastIndexOf("/", path.length - 1 - endOffset);
     128        let endOffset = path[path.length - 1] === "/" ? 1 : 0;
     129        let lastSlashIndex = path.lastIndexOf("/", path.length - 1 - endOffset);
    129130        if (lastSlashIndex !== -1)
    130131            lastPathComponent = path.substring(lastSlashIndex + 1, path.length - endOffset);
    131132    }
    132133
    133     return {scheme, host, port, path, queryString, fragment, lastPathComponent};
     134    return {scheme, userinfo, host, port, path, queryString, fragment, lastPathComponent};
    134135}
    135136
    … …  
    264265    return host;
    265266};
     267
     268// https://tools.ietf.org/html/rfc7540#section-8.1.2.3
     269WI.h2Authority = function(components)
     270{
     271    let {scheme, userinfo, host, port} = components;
     272    let result = host || "";
     273
     274    // The authority MUST NOT include the deprecated "userinfo"
     275    // subcomponent for "http" or "https" schemed URIs.
     276    if (userinfo && (scheme !== "http" && scheme !== "https"))
     277        result = userinfo + "@" + result;
     278    if (port)
     279        result += ":" + port;
     280
     281    return result;
     282};
     283
     284// https://tools.ietf.org/html/rfc7540#section-8.1.2.3
     285WI.h2Path = function(components)
     286{
     287    let {scheme, path, queryString} = components;
     288    let result = path || "";
     289
     290    // The ":path" pseudo-header field includes the path and query parts
     291    // of the target URI. [...] This pseudo-header field MUST NOT be empty
     292    // for "http" or "https" URIs; "http" or "https" URIs that do not contain
     293    // a path component MUST include a value of '/'.
     294    if (!path && (scheme === "http" || scheme === "https"))
     295        result = "/";
     296    if (queryString)
     297        result += "?" + queryString;
     298
     299    return result;
     300};

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r222959 r223006  
    152152    <link rel="stylesheet" href="Views/RenderingFrameTimelineView.css">
    153153    <link rel="stylesheet" href="Views/Resizer.css">
     154    <link rel="stylesheet" href="Views/ResourceDetailsSection.css">
    154155    <link rel="stylesheet" href="Views/ResourceDetailsSidebarPanel.css">
     156    <link rel="stylesheet" href="Views/ResourceHeadersContentView.css">
    155157    <link rel="stylesheet" href="Views/ResourceIcons.css">
    156158    <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
    … …  
    687689    <script src="Views/ResourceClusterContentView.js"></script>
    688690    <script src="Views/ResourceCollectionContentView.js"></script>
     691    <script src="Views/ResourceDetailsSection.js"></script>
    689692    <script src="Views/ResourceDetailsSidebarPanel.js"></script>
     693    <script src="Views/ResourceHeadersContentView.js"></script>
    690694    <script src="Views/ResourceSidebarPanel.js"></script>
    691695    <script src="Views/ResourceTimelineDataGridNode.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/Resource.js

    r222762 r223006  
    722722            this.dispatchEventToListeners(WI.Resource.Event.TransferSizeDidChange);
    723723        }
     724
     725        this.dispatchEventToListeners(WI.Resource.Event.MetricsDidChange);
    724726    }
    725727
    … …  
    10061008    TransferSizeDidChange: "resource-transfer-size-did-change",
    10071009    CacheStatusDidChange: "resource-cached-did-change",
     1010    MetricsDidChange: "resource-metrics-did-change",
    10081011    InitiatedResourcesDidChange: "resource-initiated-resources-did-change",
    10091012};

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css

    r222868 r223006  
    7272    bottom: 0;
    7373}
     74
     75.content-view.resource-details {
     76    position: absolute;
     77    top: 0;
     78    left: 0;
     79    right: 0;
     80    bottom: 0;
     81
     82    padding: 0 20px 20px;
     83    overflow: scroll;
     84
     85    -webkit-user-select: text;
     86    white-space: nowrap;
     87}

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.js

    r222868 r223006  
    3838
    3939        this._contentBrowser = null;
     40        this._resourceContentView = null;
    4041        this._headersContentView = null;
    4142        this._cookiesContentView = null;
    … …  
    6970    }
    7071
     72    // ResourceHeadersContentView delegate
     73
     74    headersContentViewGoToRequestData(headersContentView)
     75    {
     76        this._contentBrowser.navigationBar.selectedNavigationItem = this._previewNavigationItem;
     77
     78        this._resourceContentView.showRequest();
     79    }
     80
    7181    // Protected
    7282
    … …  
    8494        const disableFindBanner = false;
    8595        this._contentBrowser = new WI.ContentBrowser(null, this, disableBackForward, disableFindBanner, contentViewNavigationItemsFlexItem, contentViewNavigationItemsGroup);
     96
     97        this._previewNavigationItem = new WI.RadioButtonNavigationItem("preview", WI.UIString("Preview"));
     98        this._headersNavigationItem = new WI.RadioButtonNavigationItem("headers", WI.UIString("Headers"));
     99        this._cookiesNavigationItem = new WI.RadioButtonNavigationItem("cookies", WI.UIString("Cookies"));
     100        this._timingNavigationItem = new WI.RadioButtonNavigationItem("timing", WI.UIString("Timing"));
     101        this._detailsNavigationItem = new WI.RadioButtonNavigationItem("details", WI.UIString("Details"));
    86102
    87103        // Insert all of our custom navigation items at the start of the ContentBrowser's NavigationBar.
    … …  
    89105        this._contentBrowser.navigationBar.insertNavigationItem(closeNavigationItem, index++);
    90106        this._contentBrowser.navigationBar.insertNavigationItem(new WI.FlexibleSpaceNavigationItem, index++);
    91         this._contentBrowser.navigationBar.insertNavigationItem(new WI.RadioButtonNavigationItem("preview", WI.UIString("Preview")), index++);
    92         this._contentBrowser.navigationBar.insertNavigationItem(new WI.RadioButtonNavigationItem("headers", WI.UIString("Headers")), index++);
    93         this._contentBrowser.navigationBar.insertNavigationItem(new WI.RadioButtonNavigationItem("cookies", WI.UIString("Cookies")), index++);
    94         this._contentBrowser.navigationBar.insertNavigationItem(new WI.RadioButtonNavigationItem("timing", WI.UIString("Timing")), index++);
    95         this._contentBrowser.navigationBar.insertNavigationItem(new WI.RadioButtonNavigationItem("details", WI.UIString("Details")), index++);
     107        this._contentBrowser.navigationBar.insertNavigationItem(this._previewNavigationItem, index++);
     108        this._contentBrowser.navigationBar.insertNavigationItem(this._headersNavigationItem, index++);
     109        this._contentBrowser.navigationBar.insertNavigationItem(this._cookiesNavigationItem, index++);
     110        this._contentBrowser.navigationBar.insertNavigationItem(this._timingNavigationItem, index++);
     111        this._contentBrowser.navigationBar.insertNavigationItem(this._detailsNavigationItem, index++);
    96112        this._contentBrowser.navigationBar.addEventListener(WI.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
    97113
    … …  
    112128                continue;
    113129
     130            if (navigationItem !== this._previewNavigationItem
     131                && navigationItem !== this._headersNavigationItem
     132                && navigationItem !== this._cookiesNavigationItem
     133                && navigationItem !== this._timingNavigationItem
     134                && navigationItem !== this._detailsNavigationItem)
     135                continue;
     136
    114137            if (!firstNavigationItem)
    115138                firstNavigationItem = navigationItem;
    … …  
    129152        switch (navigationItem.identifier) {
    130153        case "preview":
    131             this._contentBrowser.showContentViewForRepresentedObject(this._resource);
     154            if (!this._resourceContentView)
     155                this._resourceContentView = this._contentBrowser.showContentViewForRepresentedObject(this._resource);
     156            this._contentBrowser.showContentView(this._resourceContentView);
    132157            break;
    133158        case "headers":
    134             // FIXME: Provide a Resource Headers View.
    135159            if (!this._headersContentView)
    136                 this._headersContentView = new WI.DebugContentView("Headers");
     160                this._headersContentView = new WI.ResourceHeadersContentView(this._resource, this);
    137161            this._contentBrowser.showContentView(this._headersContentView);
    138162            break;

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js

    r222470 r223006  
    3939        this._contentBrowser = new WI.ContentBrowser(null, this, disableBackForward, disableFindBanner);
    4040        this._contentBrowser.showContentView(this._networkTableContentView);
     41
     42        let filterNavigationItems = this._networkTableContentView.filterNavigationItems;
     43        for (let i = 0; i < filterNavigationItems.length; ++i)
     44            this._contentBrowser.navigationBar.insertNavigationItem(filterNavigationItems[i], i);
    4145
    4246        this.addSubview(this._contentBrowser);

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js

    r222988 r223006  
    134134    get navigationItems()
    135135    {
    136         let items = [this._typeFilterScopeBar];
    137 
     136        let items = [];
    138137        if (this._disableResourceCacheNavigationItem)
    139138            items.push(this._disableResourceCacheNavigationItem);
    140139        items.push(this._clearNetworkItemsNavigationItem);
    141 
    142140        return items;
     141    }
     142
     143    get filterNavigationItems()
     144    {
     145        return [this._typeFilterScopeBar];
    143146    }
    144147

  • trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSection.css

    r223005 r223006  
    2424 */
    2525
    26 .network-resource-detail {
    27     position: absolute;
    28     top: 0;
    29     left: 0;
    30     right: 0;
    31     bottom: 0;
    32     /* left or right set by NetworkTableView on display / resize */
    33     z-index: 10;
    34     background-color: white;
     26.resource-details > section {
     27    padding-top: 8px;
    3528}
    3629
    37 .network-resource-detail .navigation-bar {
    38     position: -webkit-sticky;
    39     top: 0;
    40     z-index: 1;
     30.resource-details > section > .title {
     31    margin: 10px 0;
    4132}
    4233
    43 .network-resource-detail .item.close > .glyph {
    44     border-radius: 2px;
    45     padding: 2px;
    46     background: white;
     34.resource-details > section > .details {
     35    -webkit-margin-start: 10px;
    4736}
    4837
    49 .network-resource-detail .item.close > .glyph:hover {
    50     background-color: var(--button-background-color-hover);
     38body[dir=ltr] .resource-details > section > .details {
     39    border-left: 2px solid var(--border-color);
     40}
     41   
     42body[dir=rtl] .resource-details > section > .details {
     43    border-right: 2px solid var(--border-color);
    5144}
    5245
    53 .network-resource-detail .item.close > .glyph:active {
    54     background-color: var(--button-background-color-pressed);
     46.resource-details > section > .details > p {
     47    margin: 0;
     48    padding: 2px 0;
     49    -webkit-padding-start: 7px;
    5550}
    5651
    57 .network .network-resource-detail .navigation-bar .item.radio.button.text-only {
    58     color: inherit;
    59     background-color: inherit;
     52.resource-details > section.incomplete > .details {
     53    color: var(--console-secondary-text-color) !important;
     54    border-color: var(--console-secondary-text-color) !important;
    6055}
    61 
    62 .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
    63     color: var(--selected-background-color);
    64     background-color: white;
    65 }
    66 
    67 .network-resource-detail > .content-browser {
    68     position: absolute;
    69     top: 0;
    70     left: 0;
    71     right: 0;
    72     bottom: 0;
    73 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSection.js

    r223005 r223006  
    2424 */
    2525
    26 .network-resource-detail {
    27     position: absolute;
    28     top: 0;
    29     left: 0;
    30     right: 0;
    31     bottom: 0;
    32     /* left or right set by NetworkTableView on display / resize */
    33     z-index: 10;
    34     background-color: white;
     26WI.ResourceDetailsSection = class ResourceDetailsSection
     27{
     28    constructor(title, className)
     29    {
     30        this._element = document.createElement("section");
     31        if (className)
     32            this._element.className = className;
     33
     34        this._titleElement = this._element.appendChild(document.createElement("div"));
     35        this._titleElement.className = "title";
     36        this._titleElement.textContent = title;
     37
     38        this._detailsElement = this._element.appendChild(document.createElement("div"));
     39        this._detailsElement.className = "details";
     40    }
     41
     42    // Public
     43
     44    get element() { return this._element; }
     45    get titleElement() { return this._titleElement; }
     46    get detailsElement() { return this._detailsElement; }
     47
     48    toggleIncomplete(isIncomplete)
     49    {
     50        console.assert(typeof isIncomplete === "boolean");
     51        this.element.classList.toggle("incomplete", isIncomplete);
     52    }
     53
     54    toggleError(isError)
     55    {
     56        console.assert(typeof isError === "boolean");
     57        this.element.classList.toggle("error", isError);
     58    }
    3559}
    36 
    37 .network-resource-detail .navigation-bar {
    38     position: -webkit-sticky;
    39     top: 0;
    40     z-index: 1;
    41 }
    42 
    43 .network-resource-detail .item.close > .glyph {
    44     border-radius: 2px;
    45     padding: 2px;
    46     background: white;
    47 }
    48 
    49 .network-resource-detail .item.close > .glyph:hover {
    50     background-color: var(--button-background-color-hover);
    51 }
    52 
    53 .network-resource-detail .item.close > .glyph:active {
    54     background-color: var(--button-background-color-pressed);
    55 }
    56 
    57 .network .network-resource-detail .navigation-bar .item.radio.button.text-only {
    58     color: inherit;
    59     background-color: inherit;
    60 }
    61 
    62 .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
    63     color: var(--selected-background-color);
    64     background-color: white;
    65 }
    66 
    67 .network-resource-detail > .content-browser {
    68     position: absolute;
    69     top: 0;
    70     left: 0;
    71     right: 0;
    72     bottom: 0;
    73 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css

    r223005 r223006  
    2424 */
    2525
    26 .network-resource-detail {
    27     position: absolute;
    28     top: 0;
    29     left: 0;
    30     right: 0;
    31     bottom: 0;
    32     /* left or right set by NetworkTableView on display / resize */
    33     z-index: 10;
    34     background-color: white;
     26body[dir] .resource-headers > section > .details {
     27    border-color: var(--network-system-color);
    3528}
    3629
    37 .network-resource-detail .navigation-bar {
    38     position: -webkit-sticky;
    39     top: 0;
    40     z-index: 1;
     30body[dir] .resource-headers > section.headers > .details {
     31    border-color: var(--network-header-color);
    4132}
    4233
    43 .network-resource-detail .item.close > .glyph {
    44     border-radius: 2px;
    45     padding: 2px;
    46     background: white;
     34body[dir] .resource-headers > section.error > .details {
     35    border-color: var(--network-error-color);
    4736}
    4837
    49 .network-resource-detail .item.close > .glyph:hover {
    50     background-color: var(--button-background-color-hover);
     38.resource-headers > section.error .key {
     39    color: var(--network-error-color);
    5140}
    5241
    53 .network-resource-detail .item.close > .glyph:active {
    54     background-color: var(--button-background-color-pressed);
     42.resource-headers .details {
     43    white-space: normal;
     44    word-break: break-all;
    5545}
    5646
    57 .network .network-resource-detail .navigation-bar .item.radio.button.text-only {
    58     color: inherit;
    59     background-color: inherit;
     47.resource-headers .details .pair {
     48    --resource-headers-value-indent: 15px;
     49    -webkit-margin-start: var(--resource-headers-value-indent);
    6050}
    6151
    62 .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
    63     color: var(--selected-background-color);
    64     background-color: white;
     52body[dir=rtl] .resource-headers .details .pair {
     53    /* Don't include indents in RTL */
     54    --resource-headers-value-indent: 0px;
    6555}
    6656
    67 .network-resource-detail > .content-browser {
    68     position: absolute;
    69     top: 0;
    70     left: 0;
    71     right: 0;
    72     bottom: 0;
     57.resource-headers .details .key {
     58    color: var(--network-system-color);
     59    font-weight: 500;
     60    -webkit-margin-start: calc(var(--resource-headers-value-indent) * -1);
    7361}
     62
     63.resource-headers .value {
     64    color: black;
     65}
     66
     67.resource-headers .header > .key {
     68    color: var(--network-header-color);
     69}
     70
     71.resource-headers .h1-status > .key,
     72.resource-headers .h2-pseudo-header > .key {
     73    color: var(--network-pseudo-header-color);
     74}
     75
     76.resource-headers .go-to-arrow {
     77    vertical-align: top;
     78    bottom: 1px;
     79}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Table.css

    r222868 r223006  
    3131    background: white;
    3232
    33     --even-zebra-stripe-row-background-color: white;
    34     --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
    3533    --table-column-border-start: 1px solid transparent;
    3634    --table-column-border-end: 0.5px solid var(--border-color);

  • trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css

    r222868 r223006  
    9797    --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
    9898
     99    --network-header-color: hsl(204, 52%, 55%);
     100    --network-system-color: hsl(79, 32%, 50%);
     101    --network-pseudo-header-color: hsl(312, 35%, 51%);
     102    --network-error-color: hsl(0, 54%, 50%);
     103
    99104    --even-zebra-stripe-row-background-color: white;
    100105    --odd-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
Note: See TracChangeset for help on using the changeset viewer.