Preliminary UI for media log inspecting.

New UI allows the selection and viewing of events and properties for
each media player open on the tab being inspected.

This feature depends on enabling the InspectorMediaLogging flag to get
any data.

What's missing:
 - A timeline view for events
 - A right click menu on a media player to inspect it

Design Doc: https://docs.google.com/document/d/1NMTjKc-Q99UDTS0QFoftVwhmzZTEh0fsHGQJ6I82IRY/edit#heading=h.vhj3t4rsmjte
UX discussion: https://docs.google.com/document/d/1EKuv_KNFFIclJOEx6k70WMUOPgsXJs7DmMHNQayKSuI/edit?ts=5d7c04d2

Screenshots:
https://files.tedm.io/dtss/5.png
https://files.tedm.io/dtss/6.png

Bug: 794255
Change-Id: Iff2d4f057168e7f20829ef4752f6dfcdea75a293
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1755008Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Ted Meyer <tmathmeyer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703831}

third_party/blink/renderer/devtools/BUILD.gn

@@ -373,6 +373,16 @@ all_devtools_files = [
   "front_end/mobile_throttling/ThrottlingPresets.js",
   "front_end/mobile_throttling/throttlingSettingsTab.css",
   "front_end/mobile_throttling/ThrottlingSettingsTab.js",
+  "front_end/media/eventDisplayTable.css",
+  "front_end/media/EventDisplayTable.js",
+  "front_end/media/MainView.js",
+  "front_end/media/MediaTable.js",
+  "front_end/media/PlayerDetailView.js",
+  "front_end/media/playerListView.css",
+  "front_end/media/PlayerListView.js",
+  "front_end/media/module.json",
+  "front_end/media/MediaModel.js",
+  "front_end/media/mediaView.css",
   "front_end/ndb_app.json",
   "front_end/network/binaryResourceView.css",
   "front_end/network/blockedURLsPane.css",
@@ -1416,6 +1426,7 @@ generated_non_autostart_non_remote_modules = [
   "$resources_out_dir/js_profiler/js_profiler_module.js",
   "$resources_out_dir/layer_viewer/layer_viewer_module.js",
   "$resources_out_dir/layers/layers_module.js",
+  "$resources_out_dir/media/media_module.js",
   "$resources_out_dir/network/network_module.js",
   "$resources_out_dir/node_debugger/node_debugger_module.js",
   "$resources_out_dir/object_ui/object_ui_module.js",

third_party/blink/renderer/devtools/front_end/Images/smallIcons.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="110"><defs><linearGradient id="y" x1="113" x2="127" y1="104" y2="104" gradientTransform="translate(-.714 -69.286) scale(.71429)" gradientUnits="userSpaceOnUse" xlink:href="#a"/><linearGradient id="a"><stop stop-color="#606eda" offset="0"/><stop stop-color="#021db2" offset="1"/></linearGradient><linearGradient id="A" x2="24" gradientTransform="matrix(0 -.41667 -.41667 0 25 10)" gradientUnits="userSpaceOnUse" xlink:href="#b"/><linearGradient id="b"><stop stop-color="#d7687d" offset="0"/><stop stop-color="#b21402" offset="1"/></linearGradient></defs><path d="M0 20.995c0-.55.456-.995.995-.995h8.01c.55 0 .995.455.995.995v8.01c0 .549-.456.995-.995.995H.995C.445 30 0 29.544 0 29.004zm5.123 4.744C7.691 25.312 8.75 24.546 8.75 22h-1.5c0 1.62-.44 1.939-2.373 2.26-2.568.429-3.627 1.194-3.627 3.74h1.5c0-1.62.44-1.937 2.373-2.26zM23.65 27.21l-1.44-2.03L21 26.39 23.55 30 30 22.33 28.88 21z"/><path d="M6.5 46c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1" fill="#bababa"/><path d="M5.75 42.75L2.25 46l3.5 3.25" fill="none" stroke="#bababa" stroke-width="1.5"/><path d="M27.5 42.43l-.93-.93L24 44.07l-2.57-2.57-.93.93L23.07 45l-2.57 2.57.93.93L24 45.93l2.57 2.57.93-.93L24.93 45l2.57-2.57z" fill-opacity=".24"/><path d="M27.5 41.93l-.93-.93L24 43.57 21.43 41l-.93.93 2.57 2.57-2.57 2.57.93.93L24 45.43 26.57 48l.93-.93-2.57-2.57 2.57-2.57z" fill="#676767"/><path d="M43.25 20c-.7 0-1.25.5-1.25 1.25v7.5c0 .7.5 1.25 1.25 1.25h3.5c.7 0 1.25-.5 1.25-1.25v-7.5c0-.7-.5-1.25-1.25-1.25zM43 21h4v7h-4zm2 7.25c.4 0 .75.3.75.75 0 .4-.3.75-.75.75-.4 0-.75-.3-.75-.75 0-.4.3-.75.75-.75z"/><g transform="translate(40 40)"><path transform="translate(-20)" d="M25 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#c)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#eb3941"/><path d="M3 3l4 4M7 3L3 7" stroke="#fff"/><defs><linearGradient id="d"><stop stop-color="#d7687d" offset="0"/><stop stop-color="#b21402" offset="1"/></linearGradient><linearGradient id="c" x2="24" gradientTransform="matrix(0 -.41667 -.41667 0 25 10)" gradientUnits="userSpaceOnUse" xlink:href="#d"/></defs></g><path d="M4.5 61.3l4 3.7-4 3.7v-1.2H1.425l.075-5h3z" fill="#adf2ad" stroke="#007200"/><g transform="translate(20 60)"><path transform="translate(-140)" d="M144.95 10A5.002 5.002 0 0 1 140 4.95 5.002 5.002 0 0 1 145.05 0c2.76.03 4.98 2.29 4.95 5.05a5.002 5.002 0 0 1-5.05 4.95z" fill="url(#e)"/><path d="M9.5 5.05A4.494 4.494 0 0 1 4.95 9.5 4.494 4.494 0 0 1 .5 4.95 4.494 4.494 0 0 1 5.05.5C7.54.53 9.53 2.56 9.5 5.05z" fill="#00be00"/><path transform="translate(-140)" d="M145.08.53c1.97.02 3.55 1.06 3.54 2.32-.01 1.26-1.62 2.26-3.59 2.24-1.97-.02-3.55-1.06-3.54-2.32.01-1.26 1.62-2.26 3.59-2.24z" fill="url(#f)"/><path transform="translate(-140)" d="M144.98 9.41c1.66.02 3.01-.68 3.02-1.56.01-.88-1.33-1.61-2.98-1.63-1.66-.02-3.01.68-3.02 1.56-.01.88 1.33 1.61 2.98 1.63z" fill="url(#g)"/><defs><linearGradient id="h"><stop stop-color="#00d600" stop-opacity="0" offset="0"/><stop stop-color="#d8fc7b" stop-opacity=".81" offset="1"/></linearGradient><linearGradient id="i"><stop stop-color="#00ba00" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="j"><stop stop-color="#00a104" offset="0"/><stop stop-color="#00c605" offset="1"/></linearGradient><linearGradient id="g" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(-.0048 .4396 .78038 .00853 65.608 -94.834)" gradientUnits="userSpaceOnUse" xlink:href="#h"/><linearGradient id="f" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(.00687 -.62923 .9267 .01012 47.871 147.44)" gradientUnits="userSpaceOnUse" xlink:href="#i"/><linearGradient id="e" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(-.01507 1.3791 -1.3006 -.0142 282.66 -312.8)" gradientUnits="userSpaceOnUse" xlink:href="#j"/></defs></g><g transform="translate(40 60)"><path transform="translate(-80)" d="M85 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#k)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#2a53cd"/><path d="M3.93 2.14c-.03-.53.55-.97 1.06-.83.5.12.79.73.56 1.18-.2.44-.79.61-1.2.36a.812.812 0 0 1-.42-.71zm1.7 5.46h.67v.53H3.41V7.6h.66V3.99h-.66v-.53h2.22V7.6z" fill="#fff"/><defs><linearGradient id="l"><stop stop-color="#606eda" offset="0"/><stop stop-color="#021db2" offset="1"/></linearGradient><linearGradient id="k" x1="113" x2="127" y1="104" y2="104" gradientTransform="translate(-.714 -69.286) scale(.71429)" gradientUnits="userSpaceOnUse" xlink:href="#l"/></defs></g><path d="M60.45 20.467v9.079h5.373l3.582-4.54-3.582-4.539z" fill="#698cfe" stroke="#4073f4" stroke-width=".908"/><path d="M60.45 40.467v9.08h5.372l3.581-4.54-3.581-4.54z" fill="#ef9d0d" stroke="#a36c01" stroke-width=".908"/><g transform="translate(60 60)"><path d="M5 10c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fill="#e5a600"/><path d="M9.5 5c0 2.49-2.01 4.5-4.5 4.5S.5 7.49.5 5 2.51.5 5 .5 9.5 2.51 9.5 5z" fill="#ffbd00"/><path transform="translate(-160)" d="M165.03.53c1.97 0 3.56 1.02 3.56 2.28 0 1.26-1.59 2.28-3.56 2.28s-3.56-1.02-3.56-2.28c0-1.26 1.59-2.28 3.56-2.28z" fill="url(#m)"/><path transform="translate(-160)" d="M164.99 9.42c1.66 0 3-.71 3-1.59 0-.88-1.34-1.59-3-1.59s-3 .71-3 1.59c0 .88 1.34 1.59 3 1.59z" fill="url(#n)"/><defs><linearGradient id="o"><stop stop-color="#ffa801" stop-opacity="0" offset="0"/><stop stop-color="#f0fb3d" offset="1"/></linearGradient><linearGradient id="p"><stop stop-color="#ffbd00" stop-opacity=".65" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="n" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 .43966 .78049 0 84.444 -93.924)" gradientUnits="userSpaceOnUse" xlink:href="#o"/><linearGradient id="m" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 -.62931 .92683 0 69.47 148.53)" gradientUnits="userSpaceOnUse" xlink:href="#p"/></defs></g><g transform="translate(0 80)"><path transform="translate(-120)" d="M125 10c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fill="url(#q)"/><path d="M9.5 5c0 2.49-2.01 4.5-4.5 4.5S.5 7.49.5 5 2.51.5 5 .5 9.5 2.51 9.5 5z" fill="#d00"/><path transform="translate(-120)" d="M125.03.53c1.97 0 3.56 1.02 3.56 2.28 0 1.26-1.59 2.28-3.56 2.28s-3.56-1.02-3.56-2.28c0-1.26 1.59-2.28 3.56-2.28z" fill="url(#r)"/><path transform="translate(-120)" d="M125.03 9.47c1.66 0 3-.71 3-1.59 0-.88-1.34-1.59-3-1.59s-3 .71-3 1.59c0 .88 1.34 1.59 3 1.59z" fill="url(#s)"/><defs><linearGradient id="t"><stop stop-color="red" stop-opacity="0" offset="0"/><stop stop-color="#f0cb68" stop-opacity=".71" offset="1"/></linearGradient><linearGradient id="u"><stop stop-color="#e60000" stop-opacity=".65" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="v"><stop stop-color="#a10000" offset="0"/><stop stop-color="#c60000" offset="1"/></linearGradient><linearGradient id="s" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 .43966 .78049 0 44.488 -93.88)" gradientUnits="userSpaceOnUse" xlink:href="#t"/><linearGradient id="r" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 -.62931 .92683 0 29.47 148.53)" gradientUnits="userSpaceOnUse" xlink:href="#u"/><linearGradient id="q" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 1.3793 -1.3008 0 259.08 -314.35)" gradientUnits="userSpaceOnUse" xlink:href="#v"/></defs></g><path d="M20 80h10v10H20z" fill="none"/><path d="M27.5 82.5V80H20v7.5h2.5V90H30v-7.5zM21 81h5.5v5.5H21zm2.5 6.5h4v-4H29V89h-5.5z"/><path d="M23.5 87.5h4v-4H29V89h-5.5z" fill-opacity=".25"/><g fill="#acf2ae" stroke="#007200" stroke-width="2.577"><path transform="matrix(.29356 0 0 .2909 2.65 86.864)" d="M144.95 10A5.002 5.002 0 0 1 140 4.95 5.002 5.002 0 0 1 145.05 0c2.76.03 4.98 2.29 4.95 5.05a5.002 5.002 0 0 1-5.05 4.95z"/><path transform="matrix(.29356 0 0 .2909 2.65 86.864)" d="M149.5 5.05a4.494 4.494 0 0 1-4.55 4.45 4.494 4.494 0 0 1-4.45-4.55A4.494 4.494 0 0 1 145.05.5c2.49.03 4.48 2.06 4.45 4.55z"/></g><path d="M48.313 82.5L45.21 86l-3.102-3.5h1.24v-1.92h3.723v1.92z" fill="#adf2ad" stroke="#007200"/><path d="M66.537 88.514a1.314 1.314 0 0 1-1.335 1.295 1.313 1.313 0 0 1-1.306-1.324 1.314 1.314 0 0 1 1.335-1.294c.731.009 1.315.6 1.307 1.323z" fill="#acf2ae" stroke="#007200" stroke-width=".753"/><path d="M62.108 83.5l3.102-2.982 3.102 2.982h-1.24v2h-3.723v-2z" fill="#adf2ad" stroke="#007200"/><path d="M83.25 21.75l3.5 3.25-3.5 3.25" fill="none" stroke="#367cf1" stroke-width="1.5"/><path d="M86 40l-5 5 5 5v-2h3v-6h-3zM84 60l5 5-5 5.022v-2.045L81 68v-6h3z" fill="#4688f1"/><path d="M84.5 88l3.5-6h-7M7 104.5L2 101v7M24 100l4 7h-8"/><path d="M43.25 102.75l3.5 3.25-3.5 3.25" fill="none" stroke="#939393" stroke-width="1.5"/><path d="M61 109l4-8 4 8z" stroke="#c19600" stroke-width="2" stroke-linejoin="round"/><path d="M61 109l4-8 4 8z" fill="#f4bd00" stroke="#f5bd00" stroke-width="1.5" stroke-linejoin="round"/><path d="M63.75 102.75h2.5v2.5l-.5 1.75h-1.5l-.5-1.75v-2.5m0 5.25h2.5v1.25h-2.5" fill="#ad8601"/><path d="M64 103h2v2.25l-.5 1.75h-1l-.5-1.75V103m0 5h2v1h-2" fill="#fff"/><text style="line-height:0%" x="3.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="3.051" y="118.387" style="line-height:1.25" font-size="8">a</tspan></text><text style="line-height:0%" x="23.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="23.051" y="118.387" style="line-height:1.25" font-size="8">b</tspan></text><text style="line-height:0%" x="43.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="43.051" y="118.387" style="line-height:1.25" font-size="8">c</tspan></text><text style="line-height:0%" x="63.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="63.051" y="118.387" style="line-height:1.25" font-size="8">d</tspan></text><text style="line-height:0%" x="83.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="83.051" y="118.387" style="line-height:1.25" font-size="8">e</tspan></text><text style="line-height:0%" x="-7.026" y="107.818" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-7.026" y="107.818" style="line-height:1.25" font-size="8">1</tspan></text><text style="line-height:0%" x="-6.819" y="87.88" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.819" y="87.88" style="line-height:1.25" font-size="8">2</tspan></text><text style="line-height:0%" x="-6.756" y="67.992" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.756" y="67.992" style="line-height:1.25" font-size="8">3</tspan></text><text style="line-height:0%" x="-6.917" y="47.994" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.917" y="47.994" style="line-height:1.25" font-size="8">4</tspan></text><text style="line-height:0%" x="-7.108" y="28.056" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-7.108" y="28.056" style="line-height:1.25" font-size="8">5</tspan></text><circle cx="3" cy="3" r="2.5" transform="matrix(1.13208 0 0 1.13208 81.604 102.604)" fill="#00bcd4" stroke="#000" stroke-width=".3"/><path d="M5 0a5 5 0 1 0 0 10A5 5 0 0 0 5 0zm.048.721c1.083 0 2.179.4 3.005 1.226a4.234 4.234 0 0 1 0 5.986L5.048 4.952l-2.98-3.005A4.18 4.18 0 0 1 5.047.721z"/><text style="line-height:0%" x="-6.68" y="8" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.68" y="8" style="line-height:1.25" font-size="8">6</tspan></text><path d="M17.601-2.913h16.232v16.232H17.601z" fill="none"/><path d="M21.11 5.556L20 6.667 23.334 10 30 3.334l-1.11-1.111-5.556 5.555z" fill-rule="evenodd"/><path d="M44.954 8.42a3.467 3.467 0 0 1-3.462-3.46c0-.678.2-1.309.531-1.84l4.77 4.77c-.531.338-1.162.53-1.84.53m3.462-3.46c0 .676-.2 1.307-.53 1.838l-4.77-4.77a3.405 3.405 0 0 1 1.839-.53 3.467 3.467 0 0 1 3.461 3.461M45 .005a5 5 0 1 0 0 10 5 5 0 0 0 0-10"/><path d="M68.875 2.219L63.344 7.78l-.407-.406L61.844 8.5l1.5 1.5L70 3.344l-1.125-1.125z" fill-rule="evenodd"/><text style="line-height:0%" x="103.739" y="118.482" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="103.739" y="118.482" style="line-height:1.25" font-size="8">f</tspan></text><g transform="translate(100 100)" mask="url(#w)"><path d="M1 9l4-8 4 8z" stroke="#c19600" stroke-width="2" stroke-linejoin="round"/><path d="M1 9l4-8 4 8z" fill="#f4bd00" stroke="#f5bd00" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.75 2.75h2.5v2.5L5.75 7h-1.5l-.5-1.75v-2.5m0 5.25h2.5v1.25h-2.5" fill="#ad8601"/><mask id="w"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-60)" d="M64 3h2v2.25L65.5 7h-1L64 5.25V3m0 5h2v1h-2"/></mask></g><g transform="translate(100 80)" mask="url(#x)"><path transform="translate(-80)" d="M85 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#y)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#2a53cd"/><mask id="x"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-80)" d="M83.93 2.14c-.03-.53.55-.97 1.06-.83.5.12.79.73.56 1.18-.2.44-.79.61-1.2.36a.812.812 0 0 1-.42-.71zm1.7 5.46h.67v.53h-2.89V7.6h.66V3.99h-.66v-.53h2.22V7.6z"/></mask></g><g transform="translate(100 60)" mask="url(#z)"><path transform="translate(-20)" d="M25 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#A)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#eb3941"/><mask id="z"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-20)" d="M23 3l4 4M27 3l-4 4" stroke="#000"/></mask></g><g><path d="M105.1 40.267a4.835 4.835 0 0 0-4.833 4.833 4.835 4.835 0 0 0 4.833 4.833 4.835 4.835 0 0 0 4.833-4.833 4.835 4.835 0 0 0-4.833-4.833zm0 1.45c.802 0 1.45.647 1.45 1.45 0 .802-.648 1.45-1.45 1.45-.802 0-1.45-.648-1.45-1.45 0-.803.648-1.45 1.45-1.45zm0 6.863a3.48 3.48 0 0 1-2.9-1.556c.014-.962 1.933-1.489 2.9-1.489.962 0 2.885.527 2.9 1.489a3.48 3.48 0 0 1-2.9 1.556z"/><path d="M99.3 39.3h11.6v11.6H99.3z" fill="none"/></g><path d="M105 22.528l-4 4.43.94 1.042 3.06-3.382L108.06 28l.94-1.041z"/><path d="M76.448 14.99h17.528v19.416H76.448z" fill="none"/><path d="M88.06 3.06L85 6.113 81.94 3.06 81 4l4 4 4-4z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="110"><defs><linearGradient id="y" x1="113" x2="127" y1="104" y2="104" gradientTransform="translate(-.714 -69.286) scale(.71429)" gradientUnits="userSpaceOnUse" xlink:href="#a"/><linearGradient id="a"><stop stop-color="#606eda" offset="0"/><stop stop-color="#021db2" offset="1"/></linearGradient><linearGradient id="A" x2="24" gradientTransform="matrix(0 -.41667 -.41667 0 25 10)" gradientUnits="userSpaceOnUse" xlink:href="#b"/><linearGradient id="b"><stop stop-color="#d7687d" offset="0"/><stop stop-color="#b21402" offset="1"/></linearGradient></defs><path d="M0 20.995c0-.55.456-.995.995-.995h8.01c.55 0 .995.455.995.995v8.01c0 .549-.456.995-.995.995H.995C.445 30 0 29.544 0 29.004zm5.123 4.744C7.691 25.312 8.75 24.546 8.75 22h-1.5c0 1.62-.44 1.939-2.373 2.26-2.568.429-3.627 1.194-3.627 3.74h1.5c0-1.62.44-1.937 2.373-2.26zM23.65 27.21l-1.44-2.03L21 26.39 23.55 30 30 22.33 28.88 21z"/><path d="M6.5 46c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1-1 .45-1 1" fill="#bababa"/><path d="M5.75 42.75L2.25 46l3.5 3.25" fill="none" stroke="#bababa" stroke-width="1.5"/><path d="M27.5 42.43l-.93-.93L24 44.07l-2.57-2.57-.93.93L23.07 45l-2.57 2.57.93.93L24 45.93l2.57 2.57.93-.93L24.93 45l2.57-2.57z" fill-opacity=".24"/><path d="M27.5 41.93l-.93-.93L24 43.57 21.43 41l-.93.93 2.57 2.57-2.57 2.57.93.93L24 45.43 26.57 48l.93-.93-2.57-2.57 2.57-2.57z" fill="#676767"/><path d="M43.25 20c-.7 0-1.25.5-1.25 1.25v7.5c0 .7.5 1.25 1.25 1.25h3.5c.7 0 1.25-.5 1.25-1.25v-7.5c0-.7-.5-1.25-1.25-1.25zM43 21h4v7h-4zm2 7.25c.4 0 .75.3.75.75 0 .4-.3.75-.75.75-.4 0-.75-.3-.75-.75 0-.4.3-.75.75-.75z"/><g transform="translate(40 40)"><path transform="translate(-20)" d="M25 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#c)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#eb3941"/><path d="M3 3l4 4M7 3L3 7" stroke="#fff"/><defs><linearGradient id="d"><stop stop-color="#d7687d" offset="0"/><stop stop-color="#b21402" offset="1"/></linearGradient><linearGradient id="c" x2="24" gradientTransform="matrix(0 -.41667 -.41667 0 25 10)" gradientUnits="userSpaceOnUse" xlink:href="#d"/></defs></g><path d="M4.5 61.3l4 3.7-4 3.7v-1.2H1.425l.075-5h3z" fill="#adf2ad" stroke="#007200"/><g transform="translate(20 60)"><path transform="translate(-140)" d="M144.95 10A5.002 5.002 0 01140 4.95 5.002 5.002 0 01145.05 0c2.76.03 4.98 2.29 4.95 5.05a5.002 5.002 0 01-5.05 4.95z" fill="url(#e)"/><path d="M9.5 5.05A4.494 4.494 0 014.95 9.5 4.494 4.494 0 01.5 4.95 4.494 4.494 0 015.05.5C7.54.53 9.53 2.56 9.5 5.05z" fill="#00be00"/><path transform="translate(-140)" d="M145.08.53c1.97.02 3.55 1.06 3.54 2.32-.01 1.26-1.62 2.26-3.59 2.24-1.97-.02-3.55-1.06-3.54-2.32.01-1.26 1.62-2.26 3.59-2.24z" fill="url(#f)"/><path transform="translate(-140)" d="M144.98 9.41c1.66.02 3.01-.68 3.02-1.56.01-.88-1.33-1.61-2.98-1.63-1.66-.02-3.01.68-3.02 1.56-.01.88 1.33 1.61 2.98 1.63z" fill="url(#g)"/><defs><linearGradient id="h"><stop stop-color="#00d600" stop-opacity="0" offset="0"/><stop stop-color="#d8fc7b" stop-opacity=".81" offset="1"/></linearGradient><linearGradient id="i"><stop stop-color="#00ba00" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="j"><stop stop-color="#00a104" offset="0"/><stop stop-color="#00c605" offset="1"/></linearGradient><linearGradient id="g" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(-.0048 .4396 .78038 .00853 65.608 -94.834)" gradientUnits="userSpaceOnUse" xlink:href="#h"/><linearGradient id="f" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(.00687 -.62923 .9267 .01012 47.871 147.44)" gradientUnits="userSpaceOnUse" xlink:href="#i"/><linearGradient id="e" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(-.01507 1.3791 -1.3006 -.0142 282.66 -312.8)" gradientUnits="userSpaceOnUse" xlink:href="#j"/></defs></g><g transform="translate(40 60)"><path transform="translate(-80)" d="M85 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#k)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#2a53cd"/><path d="M3.93 2.14c-.03-.53.55-.97 1.06-.83.5.12.79.73.56 1.18-.2.44-.79.61-1.2.36a.812.812 0 01-.42-.71zm1.7 5.46h.67v.53H3.41V7.6h.66V3.99h-.66v-.53h2.22V7.6z" fill="#fff"/><defs><linearGradient id="l"><stop stop-color="#606eda" offset="0"/><stop stop-color="#021db2" offset="1"/></linearGradient><linearGradient id="k" x1="113" x2="127" y1="104" y2="104" gradientTransform="translate(-.714 -69.286) scale(.71429)" gradientUnits="userSpaceOnUse" xlink:href="#l"/></defs></g><path d="M60.45 20.467v9.079h5.373l3.582-4.54-3.582-4.539z" fill="#698cfe" stroke="#4073f4" stroke-width=".908"/><path d="M60.45 40.467v9.08h5.372l3.581-4.54-3.581-4.54z" fill="#ef9d0d" stroke="#a36c01" stroke-width=".908"/><g transform="translate(60 60)"><path d="M5 10c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fill="#e5a600"/><path d="M9.5 5c0 2.49-2.01 4.5-4.5 4.5S.5 7.49.5 5 2.51.5 5 .5 9.5 2.51 9.5 5z" fill="#ffbd00"/><path transform="translate(-160)" d="M165.03.53c1.97 0 3.56 1.02 3.56 2.28 0 1.26-1.59 2.28-3.56 2.28s-3.56-1.02-3.56-2.28c0-1.26 1.59-2.28 3.56-2.28z" fill="url(#m)"/><path transform="translate(-160)" d="M164.99 9.42c1.66 0 3-.71 3-1.59 0-.88-1.34-1.59-3-1.59s-3 .71-3 1.59c0 .88 1.34 1.59 3 1.59z" fill="url(#n)"/><defs><linearGradient id="o"><stop stop-color="#ffa801" stop-opacity="0" offset="0"/><stop stop-color="#f0fb3d" offset="1"/></linearGradient><linearGradient id="p"><stop stop-color="#ffbd00" stop-opacity=".65" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="n" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 .43966 .78049 0 84.444 -93.924)" gradientUnits="userSpaceOnUse" xlink:href="#o"/><linearGradient id="m" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 -.62931 .92683 0 69.47 148.53)" gradientUnits="userSpaceOnUse" xlink:href="#p"/></defs></g><g transform="translate(0 80)"><path transform="translate(-120)" d="M125 10c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fill="url(#q)"/><path d="M9.5 5c0 2.49-2.01 4.5-4.5 4.5S.5 7.49.5 5 2.51.5 5 .5 9.5 2.51 9.5 5z" fill="#d00"/><path transform="translate(-120)" d="M125.03.53c1.97 0 3.56 1.02 3.56 2.28 0 1.26-1.59 2.28-3.56 2.28s-3.56-1.02-3.56-2.28c0-1.26 1.59-2.28 3.56-2.28z" fill="url(#r)"/><path transform="translate(-120)" d="M125.03 9.47c1.66 0 3-.71 3-1.59 0-.88-1.34-1.59-3-1.59s-3 .71-3 1.59c0 .88 1.34 1.59 3 1.59z" fill="url(#s)"/><defs><linearGradient id="t"><stop stop-color="red" stop-opacity="0" offset="0"/><stop stop-color="#f0cb68" stop-opacity=".71" offset="1"/></linearGradient><linearGradient id="u"><stop stop-color="#e60000" stop-opacity=".65" offset="0"/><stop stop-color="#fff" stop-opacity=".91" offset="1"/></linearGradient><linearGradient id="v"><stop stop-color="#a10000" offset="0"/><stop stop-color="#c60000" offset="1"/></linearGradient><linearGradient id="s" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 .43966 .78049 0 44.488 -93.88)" gradientUnits="userSpaceOnUse" xlink:href="#t"/><linearGradient id="r" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 -.62931 .92683 0 29.47 148.53)" gradientUnits="userSpaceOnUse" xlink:href="#u"/><linearGradient id="q" x1="227.88" x2="235.12" y1="103.16" y2="103.16" gradientTransform="matrix(0 1.3793 -1.3008 0 259.08 -314.35)" gradientUnits="userSpaceOnUse" xlink:href="#v"/></defs></g><path d="M20 80h10v10H20z" fill="none"/><path d="M27.5 82.5V80H20v7.5h2.5V90H30v-7.5zM21 81h5.5v5.5H21zm2.5 6.5h4v-4H29V89h-5.5z"/><path d="M23.5 87.5h4v-4H29V89h-5.5z" fill-opacity=".25"/><g fill="#acf2ae" stroke="#007200" stroke-width="2.577"><path transform="matrix(.29356 0 0 .2909 2.65 86.864)" d="M144.95 10A5.002 5.002 0 01140 4.95 5.002 5.002 0 01145.05 0c2.76.03 4.98 2.29 4.95 5.05a5.002 5.002 0 01-5.05 4.95z"/><path transform="matrix(.29356 0 0 .2909 2.65 86.864)" d="M149.5 5.05a4.494 4.494 0 01-4.55 4.45 4.494 4.494 0 01-4.45-4.55A4.494 4.494 0 01145.05.5c2.49.03 4.48 2.06 4.45 4.55z"/></g><path d="M48.313 82.5L45.21 86l-3.102-3.5h1.24v-1.92h3.723v1.92z" fill="#adf2ad" stroke="#007200"/><path d="M66.537 88.514a1.314 1.314 0 01-1.335 1.295 1.313 1.313 0 01-1.306-1.324 1.314 1.314 0 011.335-1.294c.731.009 1.315.6 1.307 1.323z" fill="#acf2ae" stroke="#007200" stroke-width=".753"/><path d="M62.108 83.5l3.102-2.982 3.102 2.982h-1.24v2h-3.723v-2z" fill="#adf2ad" stroke="#007200"/><path d="M83.25 21.75l3.5 3.25-3.5 3.25" fill="none" stroke="#367cf1" stroke-width="1.5"/><path d="M86 40l-5 5 5 5v-2h3v-6h-3zM84 60l5 5-5 5.022v-2.045L81 68v-6h3z" fill="#4688f1"/><path d="M84.5 88l3.5-6h-7M7 104.5L2 101v7M24 100l4 7h-8"/><path d="M43.25 102.75l3.5 3.25-3.5 3.25" fill="none" stroke="#939393" stroke-width="1.5"/><path d="M61 109l4-8 4 8z" stroke="#c19600" stroke-width="2" stroke-linejoin="round"/><path d="M61 109l4-8 4 8z" fill="#f4bd00" stroke="#f5bd00" stroke-width="1.5" stroke-linejoin="round"/><path d="M63.75 102.75h2.5v2.5l-.5 1.75h-1.5l-.5-1.75v-2.5m0 5.25h2.5v1.25h-2.5" fill="#ad8601"/><path d="M64 103h2v2.25l-.5 1.75h-1l-.5-1.75V103m0 5h2v1h-2" fill="#fff"/><text style="line-height:0%" x="3.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="3.051" y="118.387" style="line-height:1.25" font-size="8">a</tspan></text><text style="line-height:0%" x="23.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="23.051" y="118.387" style="line-height:1.25" font-size="8">b</tspan></text><text style="line-height:0%" x="43.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="43.051" y="118.387" style="line-height:1.25" font-size="8">c</tspan></text><text style="line-height:0%" x="63.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="63.051" y="118.387" style="line-height:1.25" font-size="8">d</tspan></text><text style="line-height:0%" x="83.051" y="118.387" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="83.051" y="118.387" style="line-height:1.25" font-size="8">e</tspan></text><text style="line-height:0%" x="-7.026" y="107.818" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-7.026" y="107.818" style="line-height:1.25" font-size="8">1</tspan></text><text style="line-height:0%" x="-6.819" y="87.88" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.819" y="87.88" style="line-height:1.25" font-size="8">2</tspan></text><text style="line-height:0%" x="-6.756" y="67.992" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.756" y="67.992" style="line-height:1.25" font-size="8">3</tspan></text><text style="line-height:0%" x="-6.917" y="47.994" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.917" y="47.994" style="line-height:1.25" font-size="8">4</tspan></text><text style="line-height:0%" x="-7.108" y="28.056" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-7.108" y="28.056" style="line-height:1.25" font-size="8">5</tspan></text><circle cx="3" cy="3" r="2.5" transform="matrix(1.13208 0 0 1.13208 81.604 102.604)" fill="#00bcd4" stroke="#000" stroke-width=".3"/><path d="M5 0a5 5 0 100 10A5 5 0 005 0zm.048.721c1.083 0 2.179.4 3.005 1.226a4.234 4.234 0 010 5.986L5.048 4.952l-2.98-3.005A4.18 4.18 0 015.047.721z"/><text style="line-height:0%" x="-6.68" y="8" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="-6.68" y="8" style="line-height:1.25" font-size="8">6</tspan></text><path d="M17.601-2.913h16.232v16.232H17.601z" fill="none"/><path d="M21.11 5.556L20 6.667 23.334 10 30 3.334l-1.11-1.111-5.556 5.555z" fill-rule="evenodd"/><path d="M44.954 8.42a3.467 3.467 0 01-3.462-3.46c0-.678.2-1.309.531-1.84l4.77 4.77c-.531.338-1.162.53-1.84.53m3.462-3.46c0 .676-.2 1.307-.53 1.838l-4.77-4.77a3.405 3.405 0 011.839-.53 3.467 3.467 0 013.461 3.461M45 .005a5 5 0 100 10 5 5 0 000-10"/><path d="M68.875 2.219L63.344 7.78l-.407-.406L61.844 8.5l1.5 1.5L70 3.344l-1.125-1.125z" fill-rule="evenodd"/><text style="line-height:0%" x="103.739" y="118.482" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="103.739" y="118.482" style="line-height:1.25" font-size="8">f</tspan></text><g transform="translate(100 100)" mask="url(#w)"><path d="M1 9l4-8 4 8z" stroke="#c19600" stroke-width="2" stroke-linejoin="round"/><path d="M1 9l4-8 4 8z" fill="#f4bd00" stroke="#f5bd00" stroke-width="1.5" stroke-linejoin="round"/><path d="M3.75 2.75h2.5v2.5L5.75 7h-1.5l-.5-1.75v-2.5m0 5.25h2.5v1.25h-2.5" fill="#ad8601"/><mask id="w"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-60)" d="M64 3h2v2.25L65.5 7h-1L64 5.25V3m0 5h2v1h-2"/></mask></g><g transform="translate(100 80)" mask="url(#x)"><path transform="translate(-80)" d="M85 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#y)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#2a53cd"/><mask id="x"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-80)" d="M83.93 2.14c-.03-.53.55-.97 1.06-.83.5.12.79.73.56 1.18-.2.44-.79.61-1.2.36a.812.812 0 01-.42-.71zm1.7 5.46h.67v.53h-2.89V7.6h.66V3.99h-.66v-.53h2.22V7.6z"/></mask></g><g transform="translate(100 60)" mask="url(#z)"><path transform="translate(-20)" d="M25 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5" fill="url(#A)"/><path d="M.36 5C.36 7.56 2.44 9.64 5 9.64c2.56 0 4.64-2.08 4.64-4.64C9.64 2.44 7.56.36 5 .36 2.44.36.36 2.44.36 5" fill="#eb3941"/><mask id="z"><path fill="#fff" d="M0 0h10v10H0z"/><path transform="translate(-20)" d="M23 3l4 4M27 3l-4 4" stroke="#000"/></mask></g><g><path d="M105.1 40.267a4.835 4.835 0 00-4.833 4.833 4.835 4.835 0 004.833 4.833 4.835 4.835 0 004.833-4.833 4.835 4.835 0 00-4.833-4.833zm0 1.45c.802 0 1.45.647 1.45 1.45 0 .802-.648 1.45-1.45 1.45-.802 0-1.45-.648-1.45-1.45 0-.803.648-1.45 1.45-1.45zm0 6.863a3.48 3.48 0 01-2.9-1.556c.014-.962 1.933-1.489 2.9-1.489.962 0 2.885.527 2.9 1.489a3.48 3.48 0 01-2.9 1.556z"/><path d="M99.3 39.3h11.6v11.6H99.3z" fill="none"/></g><path d="M105 22.528l-4 4.43.94 1.042 3.06-3.382L108.06 28l.94-1.041z"/><path d="M76.448 14.99h17.528v19.416H76.448z" fill="none"/><path d="M88.06 3.06L85 6.113 81.94 3.06 81 4l4 4 4-4zM102 2h2v6h-2z"/><a><path d="M106 2h2v6h-2z"/></a><text style="line-height:0%" x="122.66" y="117.219" font-weight="400" font-family="sans-serif" letter-spacing="0" word-spacing="0" fill="#ccc"><tspan x="122.66" y="117.219" style="line-height:1.25" font-size="8">g</tspan></text><path d="M128 5l-6 3V2zM128 26.5l-1.5 1.5-1.5-1.5-1.5 1.5-1.5-1.5 1.5-1.5-1.5-1.5 1.5-1.5 1.5 1.5 1.5-1.5 1.5 1.5-1.5 1.5z"/></svg>
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/Images/src/optimize_svg.hashes

 {
     "securityIcons.svg": "27676f7c1f1542659c7c49a8052259dc",
+    "accelerometer-back.svg": "342973eb940ef43b409b28c2c6b0d520",
     "largeIcons.svg": "faf26930e93e7525a3cbcc595527662c",
-    "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "19940dda6f171380bfd7d04d0061b44c",
+    "smallIcons.svg": "ed10eae550f101ce8d1cc9e26dd8a33d",
     "mediumIcons.svg": "9cb32f670ba43a7ab424eab281043e6b",
-    "accelerometer-back.svg": "342973eb940ef43b409b28c2c6b0d520",
+    "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "treeoutlineTriangles.svg": "2d26ab85d919f83d5021f2f385dffd0b",
     "chevrons.svg": "79b4b527771e30b6388ce664077b3409",
     "audits_logo.svg": "3a4893bd2ef5bb233e924f15e51af69a",

third_party/blink/renderer/devtools/front_end/Images/src/smallIcons.svg

@@ -8,11 +8,11 @@
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="110"
+   width="130"
    height="110"
    id="svg4185"
    version="1.1"
-   inkscape:version="0.92.2pre0 (973e216, 2017-07-25)"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
    sodipodi:docname="smallIcons.svg"
    inkscape:export-filename="/Users/pfeldman/code/chromium/src/third_party/WebKit/Source/devtools/front_end/Images/smallIcons_2x.png"
    inkscape:export-xdpi="180"
@@ -78,16 +78,16 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1272"
-     inkscape:window-height="1006"
+     inkscape:window-width="1432"
+     inkscape:window-height="1419"
      id="namedview4455"
      showgrid="true"
-     inkscape:zoom="7.4167646"
-     inkscape:cx="72.154899"
-     inkscape:cy="32.871453"
-     inkscape:window-x="768"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
+     inkscape:zoom="5.2444445"
+     inkscape:cx="94.607116"
+     inkscape:cy="82.226632"
+     inkscape:window-x="4002"
+     inkscape:window-y="1063"
+     inkscape:window-maximized="1"
      inkscape:current-layer="svg4185">
     <inkscape:grid
        type="xygrid"
@@ -1046,4 +1046,61 @@
      inkscape:connector-curvature="0"
      d="M 88.06,3.059999 85,6.113332 81.94,3.059999 l -0.94,0.94 4,4 4,-4 z"
      id="path3974" />
+  <path
+     style="stroke-width:0.02383474"
+     d=""
+     id="path5923"
+     inkscape:connector-curvature="0" />
+  <path
+     style="stroke-width:0.02383474"
+     d=""
+     id="path5925"
+     inkscape:connector-curvature="0" />
+  <path
+     style="stroke-width:0.02383474"
+     d=""
+     id="path5927"
+     inkscape:connector-curvature="0" />
+  <rect
+     id="rect5943"
+     width="2"
+     height="6"
+     x="102"
+     y="1.9999998"
+     style="stroke-width:1.13202608" />
+  <a
+     id="a6015">
+    <rect
+       style="stroke-width:1.13202608"
+       y="2"
+       x="106"
+       height="6"
+       width="2"
+       id="rect5943-5" />
+  </a>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#cccccc;fill-opacity:1;stroke:none"
+     x="122.66023"
+     y="117.2188"
+     id="text5191-77-3-3"><tspan
+       sodipodi:role="line"
+       id="tspan5193-6-6-5"
+       x="122.66023"
+       y="117.2188"
+       style="font-size:8px;line-height:1.25;font-family:sans-serif">g</tspan></text>
+  <path
+     inkscape:transform-center-x="0.029808665"
+     inkscape:transform-center-y="-0.33844643"
+     d="m 128,5 -6,3 V 2 Z"
+     id="path6489"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     inkscape:transform-center-x="0.34573841"
+     inkscape:transform-center-y="-0.78316773"
+     d="M 128,26.5 126.5,28 125,26.5 123.5,28 122,26.5 123.5,25 122,23.5 l 1.5,-1.5 1.5,1.5 1.5,-1.5 1.5,1.5 -1.5,1.5 z"
+     id="path6495"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
 </svg>

third_party/blink/renderer/devtools/front_end/devtools_app.json

@@ -25,7 +25,8 @@
     { "name": "security" },
     { "name": "timeline" },
     { "name": "timeline_model" },
-    { "name": "web_audio" }
+    { "name": "web_audio" },
+    { "name": "media" }
   ],
   "extends": "shell",
   "has_html": true

third_party/blink/renderer/devtools/front_end/elements/elements_strings.grdp

@@ -189,9 +189,6 @@
   <message name="IDS_DEVTOOLS_9a0364b9e99bb480dd25e1f0284c8555" desc="Text in Metrics Sidebar Pane of the Elements panel">
     content
   </message>
-  <message name="IDS_DEVTOOLS_9fc2d28c05ed9eb1d75ba4465abf15a9" desc="Title of the 'Properties' tool in the sidebar of the elements tool">
-    Properties
-  </message>
   <message name="IDS_DEVTOOLS_a05fb8660778069f6d4a5c5b40a6dbc9" desc="Title of a setting under the Elements category in Settings">
     Show user agent shadow DOM
   </message>

third_party/blink/renderer/devtools/front_end/langpacks/devtools_ui_strings.grd

@@ -41,6 +41,7 @@
       <part file="../layer_viewer/layer_viewer_strings.grdp" />
       <part file="../layers/layers_strings.grdp" />
       <part file="../main/main_strings.grdp" />
+      <part file="../media/media_strings.grdp" />
       <part file="../mobile_throttling/mobile_throttling_strings.grdp" />
       <part file="../network/network_strings.grdp" />
       <part file="../node_debugger/node_debugger_strings.grdp" />

third_party/blink/renderer/devtools/front_end/langpacks/shared_strings.grdp

@@ -382,6 +382,9 @@
   <message name="IDS_DEVTOOLS_9f29da220ed82809ec5dd70af4e52904" desc="Text for the total time of something">
     Total Time
   </message>
+  <message name="IDS_DEVTOOLS_9fc2d28c05ed9eb1d75ba4465abf15a9" desc="Title of the 'Properties' tool in the sidebar of the elements tool">
+    Properties
+  </message>
   <message name="IDS_DEVTOOLS_a02c83a7dbd96295beaefb72c2bee2de" desc="Text that refers to the main target">
     Main
   </message>

third_party/blink/renderer/devtools/front_end/main/Main.js

@@ -129,6 +129,7 @@ Main.Main = class {
     Root.Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');
     Root.Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);
     Root.Runtime.experiments.register('liveHeapProfile', 'Live heap profile', true);
+    Root.Runtime.experiments.register('mediaInspector', 'Media Element Inspection');
     Root.Runtime.experiments.register('nativeHeapProfiler', 'Native memory sampling heap profiler', true);
     Root.Runtime.experiments.register('protocolMonitor', 'Protocol Monitor');
     Root.Runtime.experiments.register(

third_party/blink/renderer/devtools/front_end/media/EventDisplayTable.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @typedef {{
+ *     id: string,
+ *     title: string,
+ *     sortable: boolean,
+ *     weight: (number|undefined),
+ *     sortingFunction: (!function(!Media.EventNode, !Media.EventNode):number|undefined),
+ * }}
+ */
+Media.EventDisplayColumnConfig;
+
+/**
+ * @typedef {{
+ *     name: string,
+ *     value: string,
+ *     timestamp: (number|string|undefined)
+ * }}
+ */
+Media.Event;
+
+/**
+ * @unrestricted
+ */
+Media.EventNode = class extends DataGrid.SortableDataGridNode {
+  /**
+   * @param {!Media.Event} event
+   */
+  constructor(event) {
+    super(event, false);
+  }
+
+  /**
+   * @override
+   * @param {string} columnId
+   * @return {!Element}
+   */
+  createCell(columnId) {
+    const cell = this.createTD(columnId);
+    const cellData = /** @type string */ (this.data[columnId]);
+    cell.createTextChild(cellData);
+    return cell;
+  }
+
+  /**
+   * @override
+   * @return {number}
+   */
+  nodeSelfHeight() {
+    return 20;
+  }
+};
+
+/**
+ * @unrestricted
+ */
+Media.EventDisplayTable = class extends UI.VBox {
+  /**
+   * @param {!Array.<!Media.EventDisplayColumnConfig>} headerDescriptors
+   * @param {?string=} uniqueColumn
+   * @param {?string=} defaultSortingColumnId
+   */
+  constructor(headerDescriptors, uniqueColumn, defaultSortingColumnId) {
+    super();
+
+    // Set up element styles.
+    this.registerRequiredCSS('media/eventDisplayTable.css');
+    this.contentElement.classList.add('event-display-table-contents-table-container');
+
+    this._uniqueColumnEntryKey = uniqueColumn;
+    this._uniqueColumnMap = new Map();
+
+    this._dataGrid = this._createDataGrid(headerDescriptors, defaultSortingColumnId);
+    this._dataGrid.setStriped(true);
+    this._dataGrid.asWidget().show(this.contentElement);
+  }
+
+  /**
+   * @param {!Array.<!Media.EventDisplayColumnConfig>} headers
+   * @param {?string|undefined} default_sort
+   * @return !DataGrid.SortableDataGrid
+   */
+  _createDataGrid(headers, default_sort) {
+    const gridColumnDescs = [];
+    const sortFunctionMap = new Map();
+    for (const headerDesc of headers) {
+      gridColumnDescs.push(Media.EventDisplayTable._convertToGridDescriptor(headerDesc));
+      if (headerDesc.sortable) {
+        sortFunctionMap.set(headerDesc.id, headerDesc.sortingFunction);
+        if (!default_sort) {
+          default_sort = headerDesc.id;
+        }
+      }
+    }
+
+    const datagrid = new DataGrid.SortableDataGrid(gridColumnDescs);
+    if (default_sort) {
+      datagrid.sortNodes(sortFunctionMap.get(default_sort), !datagrid.isSortOrderAscending());
+
+      function sortGrid() {
+        const comparator = sortFunctionMap.get(datagrid.sortColumnId());
+        datagrid.sortNodes(comparator, !datagrid.isSortOrderAscending());
+      }
+
+      datagrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, sortGrid);
+    }
+    datagrid.asWidget().contentElement.classList.add('no-border-top-datagrid');
+    return datagrid;
+  }
+
+  /**
+   * @param {!Array.<!Media.Event>} events
+   */
+  addEvents(events) {
+    for (const event of events) {
+      this.addEvent(event);
+    }
+  }
+
+  /**
+   * @param {!Media.Event} event
+   */
+  addEvent(event) {
+    if (this._uniqueColumnEntryKey) {
+      const eventValue = event[this._uniqueColumnEntryKey];
+      if (this._uniqueColumnMap.has(eventValue)) {
+        this._uniqueColumnMap.get(eventValue).data = event;
+        return;
+      }
+    }
+    const node = new Media.EventNode(event);
+    this._dataGrid.rootNode().insertChildOrdered(node);
+    if (this._uniqueColumnEntryKey) {
+      this._uniqueColumnMap.set(event[this._uniqueColumnEntryKey], node);
+    }
+  }
+
+  /**
+   * @param {!Media.EventDisplayColumnConfig} columnConfig
+   * @return {!DataGrid.DataGrid.ColumnDescriptor}
+   */
+  static _convertToGridDescriptor(columnConfig) {
+    return /** @type {!DataGrid.DataGrid.ColumnDescriptor} */ ({
+      id: columnConfig.id,
+      title: columnConfig.title,
+      sortable: columnConfig.sortable,
+      weight: columnConfig.weight || 0,
+      sort: DataGrid.DataGrid.Order.Ascending
+    });
+  }
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/MainView.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @implements {SDK.SDKModelObserver<!Media.MediaModel>}
+ */
+Media.MainView = class extends UI.PanelWithSidebar {
+  constructor() {
+    super('Media');
+    this.registerRequiredCSS('media/mediaView.css');
+
+    // Map<Media.PlayerDetailView>
+    this._detailPanels = new Map();
+
+    // Map<string>
+    this._deletedPlayers = new Set();
+
+    this._sidebar = new Media.PlayerListView(this);
+    this._sidebar.show(this.panelSidebarElement());
+
+    SDK.targetManager.observeModels(Media.MediaModel, this);
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {!Array.<!Media.Event>} changes
+   * @param {!Media.MediaModel.MediaChangeTypeKeys} changeType
+   */
+  renderChanges(playerID, changes, changeType) {
+    if (this._deletedPlayers.has(playerID)) {
+      return;
+    }
+
+    if (!this._detailPanels.has(playerID)) {
+      return;
+    }
+
+    this._sidebar.renderChanges(playerID, changes, changeType);
+    this._detailPanels.get(playerID).renderChanges(playerID, changes, changeType);
+  }
+
+  /**
+   * @param {string} playerID
+   */
+  renderMainPanel(playerID) {
+    if (!this._detailPanels.has(playerID)) {
+      return;
+    }
+    this.splitWidget().mainWidget().detachChildWidgets();
+    this._detailPanels.get(playerID).show(this.mainElement());
+  }
+
+  /**
+   * @param {string} playerID
+   */
+  _onPlayerCreated(playerID) {
+    this._sidebar.addMediaElementItem(playerID);
+    this._detailPanels.set(playerID, new Media.PlayerDetailView());
+  }
+
+  /**
+   * @override
+   */
+  wasShown() {
+    super.wasShown();
+    for (const model of SDK.targetManager.models(Media.MediaModel)) {
+      this._addEventListeners(model);
+    }
+  }
+
+  /**
+   * @override
+   */
+  willHide() {
+    for (const model of SDK.targetManager.models(Media.MediaModel)) {
+      this._removeEventListeners(model);
+    }
+  }
+
+  /**
+   * @override
+   * @param {!Media.MediaModel} mediaModel
+   */
+  modelAdded(mediaModel) {
+    if (this.isShowing()) {
+      this._addEventListeners(mediaModel);
+    }
+  }
+
+  /**
+   * @override
+   * @param {!Media.MediaModel} mediaModel
+   */
+  modelRemoved(mediaModel) {
+    this._removeEventListeners(mediaModel);
+  }
+
+  /**
+   * @param {!Media.MediaModel} mediaModel
+   */
+  _addEventListeners(mediaModel) {
+    mediaModel.ensureEnabled();
+    mediaModel.addEventListener(Media.MediaModel.Events.PlayerPropertiesChanged, this._propertiesChanged, this);
+    mediaModel.addEventListener(Media.MediaModel.Events.PlayerEventsAdded, this._eventsAdded, this);
+    mediaModel.addEventListener(Media.MediaModel.Events.PlayersCreated, this._playersCreated, this);
+  }
+
+  /**
+   * @param {!Media.MediaModel} mediaModel
+   */
+  _removeEventListeners(mediaModel) {
+    mediaModel.removeEventListener(Media.MediaModel.Events.PlayerPropertiesChanged, this._propertiesChanged, this);
+    mediaModel.removeEventListener(Media.MediaModel.Events.PlayerEventsAdded, this._eventsAdded, this);
+    mediaModel.removeEventListener(Media.MediaModel.Events.PlayersCreated, this._playersCreated, this);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _propertiesChanged(event) {
+    this.renderChanges(event.data.playerId, event.data.properties, Media.MediaModel.MediaChangeTypeKeys.Property);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _eventsAdded(event) {
+    this.renderChanges(event.data.playerId, event.data.events, Media.MediaModel.MediaChangeTypeKeys.Event);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _playersCreated(event) {
+    const playerlist = /** @type {!Iterable.<string>} */ (event.data);
+    for (const playerID of playerlist) {
+      this._onPlayerCreated(playerID);
+    }
+  }
+};

third_party/blink/renderer/devtools/front_end/media/MediaModel.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @implements {Protocol.MediaDispatcher}
+ */
+Media.MediaModel = class extends SDK.SDKModel {
+  /**
+   * @param {!SDK.Target} target
+   */
+  constructor(target) {
+    super(target);
+
+    this._enabled = false;
+    this._agent = target.mediaAgent();
+
+    target.registerMediaDispatcher(this);
+  }
+
+  /**
+   * @override
+   * @return {!Promise}
+   */
+  resumeModel() {
+    if (!this._enabled) {
+      return Promise.resolve();
+    }
+    return this._agent.enable();
+  }
+
+  ensureEnabled() {
+    this._agent.enable();
+    this._enabled = true;
+  }
+
+  /**
+   * @param {!Protocol.Media.PlayerId} playerId
+   * @param {!Array.<!Protocol.Media.PlayerProperty>} properties
+   * @override
+   */
+  playerPropertiesChanged(playerId, properties) {
+    this.dispatchEventToListeners(
+        Media.MediaModel.Events.PlayerPropertiesChanged, {playerId: playerId, properties: properties});
+  }
+
+  /**
+   * @param {!Protocol.Media.PlayerId} playerId
+   * @param {!Array.<!Protocol.Media.PlayerEvent>} events
+   * @override
+   */
+  playerEventsAdded(playerId, events) {
+    this.dispatchEventToListeners(Media.MediaModel.Events.PlayerEventsAdded, {playerId: playerId, events: events});
+  }
+
+  /**
+   * @param {!Array.<!Protocol.Media.PlayerId>} playerIds
+   * @override
+   */
+  playersCreated(playerIds) {
+    this.dispatchEventToListeners(Media.MediaModel.Events.PlayersCreated, playerIds);
+  }
+};
+
+SDK.SDKModel.register(Media.MediaModel, SDK.Target.Capability.DOM, false);
+
+/** @enum {symbol} */
+Media.MediaModel.Events = {
+  PlayerPropertiesChanged: Symbol('PlayerPropertiesChanged'),
+  PlayerEventsAdded: Symbol('PlayerEventsAdded'),
+  PlayersCreated: Symbol('PlayersCreated')
+};
+
+/** @enum {string} */
+Media.MediaModel.MediaChangeTypeKeys = {
+  Event: 'Events',
+  Property: 'Properties'
+};

third_party/blink/renderer/devtools/front_end/media/MediaTable.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @unrestricted
+ */
+Media.MediaPlayerPropertiesRenderer = class extends Media.EventDisplayTable {
+  constructor() {
+    super(
+        [
+          {
+            id: 'name',
+            title: 'Property Name',
+            sortable: true,
+            weight: 2,
+            sortingFunction: DataGrid.SortableDataGrid.StringComparator.bind(null, 'name')
+          },
+          {id: 'value', title: 'Value', sortable: false, weight: 7}
+        ],
+        'name');
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {!Array.<!Media.Event>} changes
+   * @param {!Media.MediaModel.MediaChangeTypeKeys} change_type
+   */
+  renderChanges(playerID, changes, change_type) {
+    this.addEvents(changes);
+  }
+};
+
+/**
+ * @unrestricted
+ */
+Media.MediaPlayerEventTableRenderer = class extends Media.EventDisplayTable {
+  constructor() {
+    super([
+      {
+        id: 'timestamp',
+        title: 'Timestamp',
+        weight: 1,
+        sortable: true,
+        sortingFunction: DataGrid.SortableDataGrid.NumericComparator.bind(null, 'timestamp')
+      },
+      {id: 'name', title: 'Event Name', weight: 2, sortable: false},
+      {id: 'value', title: 'Value', weight: 7, sortable: false}
+    ]);
+
+    this._firstEventTime = 0;
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {!Array.<!Media.Event>} changes
+   * @param {!Media.MediaModel.MediaChangeTypeKeys} change_type
+   */
+  renderChanges(playerID, changes, change_type) {
+    if (this._firstEventTime === 0 && changes.length > 0) {
+      this._firstEventTime = changes[0].timestamp;
+    }
+
+    this.addEvents(changes.map(this._subtractFirstEventTime.bind(this, this._firstEventTime)));
+  }
+
+  /**
+   * @param {number|string|undefined} first_event_time
+   * @param {!Media.Event} event
+   */
+  _subtractFirstEventTime(first_event_time, event) {
+    event.timestamp = (event.timestamp - first_event_time).toFixed(3);
+    return event;
+  }
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/PlayerDetailView.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @unrestricted
+ */
+Media.PlayerDetailView = class extends UI.TabbedPane {
+  constructor() {
+    super();
+
+    const propertyTable = new Media.MediaPlayerPropertiesRenderer();
+    const eventTable = new Media.MediaPlayerEventTableRenderer();
+
+    // maps handler type to a list of panels that support rendering changes.
+    this._panels = new Map([
+      [Media.MediaModel.MediaChangeTypeKeys.Property, [propertyTable]],
+      [Media.MediaModel.MediaChangeTypeKeys.Event, [eventTable]]
+    ]);
+
+    this.appendTab(
+        Media.PlayerDetailView.Tabs.Properties, Common.UIString('Properties'), propertyTable,
+        Common.UIString('Player properties'));
+
+    this.appendTab(
+        Media.PlayerDetailView.Tabs.Events, Common.UIString('Events'), eventTable, Common.UIString('Player events'));
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {!Array.<!Media.Event>} changes
+   * @param {!Media.MediaModel.MediaChangeTypeKeys} changeType
+   */
+  renderChanges(playerID, changes, changeType) {
+    for (const panel of this._panels.get(changeType)) {
+      panel.renderChanges(playerID, changes, changeType);
+    }
+  }
+};
+
+/**
+ * @enum {string}
+ */
+Media.PlayerDetailView.Tabs = {
+  Events: 'events',
+  Properties: 'properties',
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/PlayerListView.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @typedef {{playerTitle: string, playerID: string, exists: boolean, playing: boolean, titleEdited: boolean}}
+ */
+Media.PlayerStatus;
+
+/**
+ * @typedef {{playerStatus: !Media.PlayerStatus, playerTitleElement: ?HTMLElement}}
+ */
+Media.PlayerStatusMapElement;
+
+
+Media.PlayerEntryTreeElement = class extends UI.TreeElement {
+  /**
+   * @param {!Media.PlayerStatus} playerStatus
+   * @param {!Media.MainView} displayContainer
+   */
+  constructor(playerStatus, displayContainer) {
+    super(playerStatus.playerTitle, false);
+    this.titleFromUrl = true;
+    this._playerStatus = playerStatus;
+    this._displayContainer = displayContainer;
+    this.setLeadingIcons([UI.Icon.create('smallicon-videoplayer-playing', 'media-player')]);
+  }
+
+  /**
+   * @override
+   * @return {boolean}
+   */
+  onselect(selectedByUser) {
+    this._displayContainer.renderMainPanel(this._playerStatus.playerID);
+    return true;
+  }
+};
+
+
+Media.PlayerListView = class extends UI.VBox {
+  /**
+   * @param {!Media.MainView} mainContainer
+   */
+  constructor(mainContainer) {
+    super(true);
+
+    this._playerStatuses = new Map();
+
+    // Container where new panels can be added based on clicks.
+    this._mainContainer = mainContainer;
+
+    // The parent tree for storing sections
+    this._sidebarTree = new UI.TreeOutlineInShadow();
+    this.contentElement.appendChild(this._sidebarTree.element);
+    this._sidebarTree.registerRequiredCSS('media/playerListView.css');
+
+    // Audio capture / output devices.
+    this._audioDevices = this._addListSection(Common.UIString('Audio I/O'));
+
+    // Video capture devices.
+    this._videoDevices = this._addListSection(Common.UIString('Video Capture Devices'));
+
+    // Players active in this tab.
+    this._playerList = this._addListSection(Common.UIString('Players'));
+  }
+
+  /**
+   * @param {string} title
+   * @return {!UI.TreeElement}
+   */
+  _addListSection(title) {
+    const treeElement = new UI.TreeElement(title, true);
+    treeElement.listItemElement.classList.add('storage-group-list-item');
+    treeElement.setCollapsible(false);
+    treeElement.selectable = false;
+    this._sidebarTree.appendChild(treeElement);
+    return treeElement;
+  }
+
+  /**
+   * @param {string} playerID
+   */
+  addMediaElementItem(playerID) {
+    const playerStatus = {playerTitle: playerID, playerID: playerID, exists: true, playing: false, titleEdited: false};
+    const playerElement = new Media.PlayerEntryTreeElement(playerStatus, this._mainContainer);
+    this._playerStatuses.set(playerID, playerElement);
+    this._playerList.appendChild(playerElement);
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {string} newTitle
+   * @param {boolean} isTitleExtractedFromUrl
+   */
+  setMediaElementPlayerTitle(playerID, newTitle, isTitleExtractedFromUrl) {
+    if (this._playerStatuses.has(playerID)) {
+      const sidebarEntry = this._playerStatuses.get(playerID);
+      if (!isTitleExtractedFromUrl || sidebarEntry.titleFromUrl) {
+        sidebarEntry.title = newTitle;
+        sidebarEntry.titleFromUrl = isTitleExtractedFromUrl;
+      }
+    }
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {string} iconName
+   */
+  setMediaElementPlayerIcon(playerID, iconName) {
+    if (this._playerStatuses.has(playerID)) {
+      const sidebarEntry = this._playerStatuses.get(playerID);
+      sidebarEntry.setLeadingIcons([UI.Icon.create('smallicon-videoplayer-' + iconName, 'media-player')]);
+    }
+  }
+
+  /**
+   * @param {string} playerID
+   * @param {!Array.<!Media.Event>} changes
+   * @param {string} changeType
+   */
+  renderChanges(playerID, changes, changeType) {
+    // We only want to try setting the title from the 'frame_title' and 'frame_url' properties.
+    if (changeType === Media.MediaModel.MediaChangeTypeKeys.Property) {
+      for (const change of changes) {
+        // Sometimes frame_title can be an empty string.
+        if (change.name === 'frame_title' && change.value) {
+          this.setMediaElementPlayerTitle(playerID, change.value, false);
+        }
+
+        if (change.name === 'frame_url') {
+          const url_path_component = change.value.substring(change.value.lastIndexOf('/') + 1);
+          this.setMediaElementPlayerTitle(playerID, url_path_component, true);
+        }
+      }
+    }
+
+    if (changeType === Media.MediaModel.MediaChangeTypeKeys.Event) {
+      let change_to = null;
+      for (const change of changes) {
+        if (change.name === 'Event') {
+          if (change.value === 'PLAY') {
+            change_to = 'playing';
+          } else if (change.value === 'PAUSE') {
+            change_to = 'paused';
+          } else if (change.value === 'WEBMEDIAPLAYER_DESTROYED') {
+            change_to = 'destroyed';
+          }
+        }
+      }
+      if (change_to) {
+        this.setMediaElementPlayerIcon(playerID, change_to);
+      }
+    }
+  }
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/eventDisplayTable.css

+/*
+ * Copyright 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.no-border-top-datagrid>.data-grid {
+  /* make sure there is no top border, it ruins the menu view */
+  border-top: 0px;
+}
+
+.event-display-table-contents-table-container>.widget>.data-grid {
+  height: 100%;
+}
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/mediaView.css

+/*
+ * Copyright (c) 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+
+.playerlist-sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.playerlist-sidebar-header {
+  font-size: 22px;
+  padding: 8px 20px;
+  border-bottom:1px solid var(--divider-color);
+}
+
+.playerlist-entry-title>pre {
+  margin: 0px;
+}
+
+.playerlist-entry-title {
+  float: left;
+}
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/media_strings.grdp

+<?xml version="1.0" encoding="utf-8"?>
+<grit-part>
+  <message name="IDS_DEVTOOLS_421b47ffd946ca083b65cd668c6b17e6" desc="Video player">
+    video
+  </message>
+  <message name="IDS_DEVTOOLS_62933a2951ef01f4eafd9bdf4d3cd2f0" desc="Media player">
+    media
+  </message>
+  <message name="IDS_DEVTOOLS_83341e272df7a4f2982e7b96b7f26a4a" desc="Button text for viewing properties.">
+    Player properties
+  </message>
+  <message name="IDS_DEVTOOLS_87f9f735a1d36793ceaecd4e47124b63" desc="Button text for viewing events.">
+    Events
+  </message>
+  <message name="IDS_DEVTOOLS_cf6523ecab64a91c7a9b3d83b58f9e61" desc="Hover text for the Events button.">
+    Player events
+  </message>
+  <message name="IDS_DEVTOOLS_93ec972c68d5caca43370a9746a08cea" desc="Side-panel entry title text for the players section.">
+    Players
+  </message>
+  <message name="IDS_DEVTOOLS_a20467c4e87b5469cbb1a6c31775393c" desc="Side-panel entry title text for the audio devices section.">
+    Audio I/O
+  </message>
+  <message name="IDS_DEVTOOLS_d9f6db9c0f0579391eccedbac66aef9b" desc="Side-panel entry title text for the video capture devices section.">
+    Video Capture Devices
+  </message>
+</grit-part>
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/module.json

+{
+  "extensions": [
+      {
+          "type": "view",
+          "location": "panel",
+          "id": "media",
+          "title": "Media",
+          "persistence": "closeable",
+          "order": 100,
+          "className": "Media.MainView",
+          "tags": "media, video",
+          "experiment": "mediaInspector"
+      }
+  ],
+  "dependencies": [
+      "components",
+      "sdk",
+      "ui",
+      "data_grid"
+  ],
+  "scripts": [
+      "EventDisplayTable.js",
+      "MainView.js",
+      "MediaTable.js",
+      "PlayerDetailView.js",
+      "PlayerListView.js",
+      "MediaModel.js"
+  ],
+  "resources": [
+    "eventDisplayTable.css",
+    "mediaView.css",
+    "playerListView.css"
+  ]
+}
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/media/playerListView.css

+/*
+ * Copyright 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.tree-outline {
+    padding-left: 0;
+    color: rgb(90, 90, 90);
+}
+
+li.storage-group-list-item {
+    padding: 10px 8px 6px 8px;
+}
+
+li.storage-group-list-item:not(:first-child) {
+    border-top: 1px solid rgb(230, 230, 230);
+}
+
+li.storage-group-list-item::before {
+    display: none;
+}
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/ui/Icon.js

@@ -139,6 +139,9 @@ export const Descriptors = {
   'smallicon-clear-info': {position: 'f2', spritesheet: 'smallicons'},
   'smallicon-clear-error': {position: 'f3', spritesheet: 'smallicons'},
   'smallicon-account-circle': {position: 'f4', spritesheet: 'smallicons'},
+  'smallicon-videoplayer-paused': {position: 'f6', spritesheet: 'smallicons', isMask: true},
+  'smallicon-videoplayer-playing': {position: 'g6', spritesheet: 'smallicons', isMask: true},
+  'smallicon-videoplayer-destroyed': {position: 'g5', spritesheet: 'smallicons', isMask: true},
 
   'mediumicon-clear-storage': {position: 'a4', spritesheet: 'mediumicons', isMask: true},
   'mediumicon-cookie': {position: 'b4', spritesheet: 'mediumicons', isMask: true},