Commit Graph
10 Commits
Author SHA1 Message Date
Mathias Bynens ca9fa2d73f Consistently format CSS color and opacity values
- Prefer the modern comma-free CSS color function syntax over the
  legacy syntax. [1]
- Explicitly use the `deg` suffix for angle values in colors, to
  clarify the range.
- Explicitly use the `%` suffix for percentages instead of formatting
  the value as a number, again to clarify the range.

[1]: https://twitter.com/mathias/status/1253242715304857601
[2]: https://goo.gle/devtools-css-color

Bug: chromium:1083142
Fixed: chromium:1073885
Change-Id: I8e1582a2dee3553a61df88564051ea84c2011d76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2209091
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
2020-05-19 16:50:26 +00:00
Mathias Bynens b0c1f4bce2 Fix stylelint-config-standard violations
Bug: chromium:1083142
Change-Id: I5ea4cc5d0f83e52856383ba37a47472e33eb19a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204113
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
2020-05-15 17:05:27 +00:00
Rayan Kanso 42c0f9e54a [DevTools] Add a Learn More link to Background Service panes.
Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c40
Bug: 942174
Change-Id: I5d8b275671b78de6b96aa5f4704a2210bc1bd75f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1760738
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#692458}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e61293ea18d25fb059dc474444cf704409ecc73a
2019-09-02 12:21:09 +00:00
Rayan Kanso f402ef31c4 [DevTools] Add margin to Background Service inline button.
On really small panels the button is covering part of the text. This CL
just adds some padding to avoid that from happening.

Bug: 990762
Change-Id: I52b292a8950ae01741cf3fa98b3ce1a9d40fa7a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1736681
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#685966}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 2aeeb644fd1ae34d6df21f6c36d0f53f22993cfb
2019-08-12 13:05:18 +00:00
Rayan Kanso 4476ca576c [DevTools] Update Background Service UI strings.
As per suggestions from UXW, make it clear that recording persists
and continues in the background.

Also make it clear when a metadata field is empty.

Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c34
Change-Id: Ief7b2dc23f00767fe4e87d37b652a4b0dbb1edd2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1708082
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#679514}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 02d9fc9da9c40566b18632473985d1d5d0fbc586
2019-07-22 11:51:24 +00:00
Rayan Kanso 6156d22b16 [DevTools] dd a recording shortcut for Background Services.
Map the Ctrl+E (or Cmd+E on Mac) to the recording functionality.
Also update the CSS to match that of other UI states.

Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c19

Bug: 942174
Change-Id: Ie3b0518022ca8e320bad6f939f9525595cd9889e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1587884
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#655074}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 1fea123688372477996125b02ecf2baa62447ee2
2019-04-29 23:40:55 +00:00
Rayan Kanso c0bfdd861b [DevTools] Add more descriptive UI for state transitions.
This CL incorporates some of the changes discussed in the latest UX meeting:
- Reorder the columns and toolbar buttons
- Display the metadata in a manner to a similar to the Network panel
- Add instructions for the inital landing page and other UI states

Bug: 942174
Change-Id: I7bd451377b241ec70d49c6d0b443522b43e5bcfe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1578554
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#653543}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 7150235b5070ebb8d03e4b6f4dd4ae3650cab283
2019-04-24 12:32:22 +00:00
Rayan Kanso b451b4f38e Update the DevTools Background Services UI.
As per the UX meeting, the following changes have been made:
- Toolbar refresh/clear were removed and delete was renamed to clear.
- Instead of Popovers a container at the bottom will show the metadata.

Screenshots: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c10
Bug: 942174
Change-Id: Ibb99ade117666367903c739ed5f3acee1f550c18
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1551661
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#647972}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cef97b945609619d937da359b0ccb36c0ef39494
2019-04-04 23:12:11 +00:00
Rayan Kanso 3252d5e58b Add UI to show Background Service events in DevTools.
Events are shown in a data grid. Clicking on a row will create a popover
to show metadata.

This CL also adds functionality for the refresh/clear buttons.

Screenshots: https://bugs.chromium.org/p/chromium/issues/detail?id=942174#c1

Bug: 942174, 927726
Change-Id: Id6fc6dba7ddbc2e175992e76ffea3e29da947753
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1524290
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#644745}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e728204c814742fb6fe33540619e0afc627a8d3a
2019-03-27 11:37:24 +00:00
Rayan Kanso 689042047c Setup Background Services DevTools UI.
Sets up the side panel elements, and the view that will be used to
render the information. The view consists of the toolbar with the
buttons that will communicate with the DevTools protocol handlers.

This is just the UI without functionality.
UI mocks: https://bugs.chromium.org/p/chromium/issues/detail?id=927726#c6

Bug: 927726
Change-Id: I1d00ad98c481127e57054413db0ed0c298ab6546
Reviewed-on: https://chromium-review.googlesource.com/c/1477253
Commit-Queue: Rayan Kanso <rayankans@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#634174}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 955610c988beee8289ef73073de721da80c3fc48
2019-02-21 14:16:25 +00:00