Commit Graph
16 Commits
Author SHA1 Message Date
James Lissiak 042827fcdd DevTools: Fix Console Live Expression CSS
This patch updates the css for the console pin pane so that it never
exceeds 50% of the outer window.

Issue 884137 shows that when the console window height is small, the
live expression pane can overflow the console input pane making it
impossible to type into the console. This is due to the pin pane css
setting a max-height of 200px regardless of the height of the outer
window.

The fix is to update the css so that pane has a max height of 50% but
the inner container uses 200px so that it will have a height of the
smaller of the two. Allowing users to always see the input area.

See: https://imgur.com/a/GS8yA8h


Bug: 884137
Change-Id: I85337f7391a882ca107a30be2bf5c2a12f261787
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1837527
Reviewed-by: John Emau <John.Emau@microsoft.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: James Lissiak <jalissia@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#703449}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 7df70dbd0f8d39c40d3347f592666bb3e3ab98d2
2019-10-07 20:46:20 +00:00
Erik Luo 840be6b88d DevTools: fix stick-to-bottom for Console with keyboard navigation
Keyboard navigation in Console presents new interactions that our
stick-to-bottom (STB) logic should care about.

Prompt
- Before, STB only cared about TextChanged events, but now cares
  about focusin, since users can Tab from messages to prompt

Objects
- Expanding an object results in noticeable scroll-anchoring jumps,
  STB should turn off due to expanding. Expanding a small object
  that can fit in viewport should guarantee it is visible.

Bug: 865674
Change-Id: I47872110d4bf2261b4940b565f8c926333b66836
Reviewed-on: https://chromium-review.googlesource.com/c/1330350
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#613239}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cc2fb34c6c8a513781dc7d78e827f340605681e9
2018-12-03 20:54:27 +00:00
Erik Luo 85c1d22222 DevTools: fix Console stick-to-bottom on load, enter
Fixes 2 stick to bottom cases
- Prompt has text, but is scrolled out of view. User presses 'Enter'.
  Browsers usually scroll an field into view on input events, but
  Console preventsDefault to avoid adding a newline. Now, we will
  emulate the scroll.
- Page logs a ton of messages, Console opened for the first time.
  CodeMirror asynchronously resized prompt height on load, which
  broke stick to bottom. This CL changes layout so that prompt
  height does not grow on editor load.

Bug: 863664
Change-Id: Ia25a71100d9a895d4c8c710b36ba1d8b76d76990
Reviewed-on: https://chromium-review.googlesource.com/c/1321575
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#605936}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 60802eced856d89133f211ef29df6124f29401bd
2018-11-07 02:43:25 +00:00
Joel Einbinder 3d04d2fb80 DevTools: Fix 1px gap on the console group nesting level marker
The border was missing a pixel, and so didn't look like a solid line.

https://imgur.com/a/jjEPH9g

Change-Id: I647953188d2029670851201cb7b2d43e09cf37d1
Reviewed-on: https://chromium-review.googlesource.com/1244113
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#594091}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 9c42caf6fcee6bc19f1202f0b5c19c43eb140f69
2018-09-25 20:53:21 +00:00
Erik Luo b5bfff4b5d DevTools: do not focus prompt on Console message click
With keyboard navigation experiment enabled,

- Switch viewport's focus proxy from `element` > `_contentElement`
- Clicking a message will select it
- Click-selection applies "blue" highlight, except when a user
  expands objects, groups, or traces
- Move focus from log > prompt when user types on 'keydown'
- Better distinguish events below prompt (geometry works with
  MouseEvents, but not FocusEvents)
- Stick to bottom when prompt gains focus

Bug: 865674
Change-Id: I473bcdf714408406b0ce7a49772589daf3cbe9cb
Reviewed-on: https://chromium-review.googlesource.com/1171814
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#592669}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 1d9c78149597bc68797982d9ac6294f9595fcd9f
2018-09-20 02:52:39 +00:00
Erik Luo 39452ffb18 DevTools: allow Console message keyboard navigation
This makes Consoles messages focusable and navigable using:
ArrowUp/Down/Left/Right, Home, End

Screenshot: https://imgur.com/a/6JWY0iU

Bug: 865674
Change-Id: I4166bf4d8d57856c6d1f7d51ef29e2dea0c088eb
Reviewed-on: https://chromium-review.googlesource.com/1144453
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#588237}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 8fce8ab13eba5c18c14e308a9821d0675e0a4a1e
2018-09-01 01:08:07 +00:00
Erik Luo 58ffb33d9f DevTools: fix console dark theme regression
Recently, Console message border colors became CSS variables, which
are preserved in dark theme by default. This CL fixes the regression
by giving explicit dark colors.

Screenshot: https://imgur.com/a/7Hj2GXb

Bug: none
Change-Id: Ib62c8ffa0454303e35699f1d1c70e398a185d52a
Reviewed-on: https://chromium-review.googlesource.com/1159208
Commit-Queue: Erik Luo <luoe@chromium.org>
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#579979}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 09236caff0505fbe95f28d6b07ca391002c360bd
2018-08-01 23:02:46 +00:00
Erik Luo 4b002328ab DevTools: [console-stability] more precise viewport
Simplify visible index calculation and tests by
- Remove padding on viewport container
- Remove negative margin (was on error/warning logs)

Improve visible index / scrollItemIntoView() precision by
- Rebuild cumulative heights even if each message is slightly off
- No need to scroll last item into view if it is fully visible
- Perform extra scroll on scroll into view in case items above
  were larger than expected
- Message height measurements now include wrapper's border

Bug: 865674
Change-Id: Id4abad0e40a971dff9accbc7b904427ea02f728c
Reviewed-on: https://chromium-review.googlesource.com/1144254
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#579175}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 8ee170a089cd03e7f0b7ab6982174d15d0180f8a
2018-07-30 21:23:31 +00:00
Erik Luo fa544813dc DevTools: split out consolePrompt.css, fix matching bracket style
- Splits out prompt styles into consolePrompt.css
- Do not show background/border on matching brackets if the
  CodeMirror container is not focused

Bug: none
Change-Id: I1955e07ca3289a6781097d0c99467c51336403b9
Reviewed-on: https://chromium-review.googlesource.com/1153468
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#579136}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 60fc08c17da4f858739220886c4899ef846cc4bc
2018-07-30 20:03:54 +00:00
Erik Luo 625f4ac8c8 DevTools: fix console/timeline toolbar overlap
UI.Toolbars give 'flex: none' to their shadow :host. In [1], an extra
element was placed in between the Toolbar and the flex container,
breaking the 'flex: none'.

[1] https://chromium-review.googlesource.com/c/chromium/src/+/1080036

Screenshot: https://imgur.com/a/wyacU7H

Bug: 860476
Change-Id: If12df76e2bf711c93acee8df5d7f0bbb0a5a868d
Reviewed-on: https://chromium-review.googlesource.com/1139049
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#575536}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 4030d08e852df100f4f2d84e96401a797cf28150
2018-07-17 03:18:31 +00:00
Erik Luo 6294d3b496 DevTools: pinned expressions in console
Part 1: introduce pins behind an experiment.
- Prompt has 'pin' button to add current expression to pins
- Pin pane sticks to the top of the Console, with max height
- Pins have multiline editors and a value preview that shows
  "not available" when there is an error

Screenshot: https://imgur.com/a/Ahdtosa

Bug: 849875
Change-Id: Ib0b8bafd97551f823ff8b64d13c5259f42328994
Reviewed-on: https://chromium-review.googlesource.com/1087509
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#574740}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 589cdcb33ef96770a2c3e4a9c76ee439d1e2e56e
2018-07-12 21:54:16 +00:00
Erik Luo 5fb33bda7b DevTools: use expandable fragment for long Object property values
Screenshot: https://imgur.com/a/FUh1E91

Bug: 754216
Change-Id: Id7f04637f85ad776e4c61b0cedf500351723342d
Reviewed-on: https://chromium-review.googlesource.com/1081677
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#564286}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d96b9f46eafdd0145393b5fe3e188e9bedb2da72
2018-06-04 23:23:52 +00:00
Erik Luo 6355f4d04a DevTools: make settings toolbar button always visible
- Settings gear icon in Console and Performance are always visible
- Console's 'N hidden' text is also always visible

Screenshot: https://imgur.com/a/NTxdNFb

Bug: none
Change-Id: I60d08361ab8ee52f4dd86020039e3e7d105667f4
Reviewed-on: https://chromium-review.googlesource.com/1080036
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#563520}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0a643b4cd5ed6be2b661c08e100c6b8310c19e4b
2018-06-01 03:32:24 +00:00
Erik Luo 89efea3187 DevTools: add runtime experiment for prompt
Bug: 810176
Change-Id: Ic78c5e6ef5557067679f3f4ed2dcf6b76f1ee8e2
Reviewed-on: https://chromium-review.googlesource.com/1014348
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#553228}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cc91acb0e25cada9b9506da8c405c06cb7526074
2018-04-24 19:19:58 +00:00
Erik Luo 0f7f85b790 DevTools: add space-below-prompt experiment
- Adds an empty 15px space directly below the Console
  prompt's editor.
- Updates "isScrolledToBottom" logic in Console to account
  for the new space. Without this update, typing on the
  prompt's last line will not "jump + stick to bottom"
  as expected.

With this CL, overlay scrollbars (e.g. on Mac), should
never cover the prompt's editor.

Bug: 725249
Change-Id: Ib0167f6919d5b9942e7f2dc4d8cf0c15fc9368df
Reviewed-on: https://chromium-review.googlesource.com/965020
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#551222}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 06e046ba940fb6dffe3bbed45b85fb840b4a9194
2018-04-17 03:06:58 +00:00
Blink Reformat 4c46d0969f The Great Blink mv for source files, part 2.
Move and rename files.

NOAUTOREVERT=true
NOPRESUBMIT=true
NOTREECHECKS=true
Bug: 768828
TBR=darin@chromium.org
NOTRY=true

Change-Id: I66d3b155808bc5bdbf237b80208e1e552bcf7f28
Reviewed-on: https://chromium-review.googlesource.com/1001153
Reviewed-by: Blink Reformat <blink-reformat@chromium.org>
Commit-Queue: Blink Reformat <blink-reformat@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#549061}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0aee4434a4dba42a42abaea9bfbc0cd196a63bc1
2018-04-07 15:32:37 +00:00