DevTools: Add CSS grid highlighter
Reported by
bojc.to...@gmail.com,
May 31 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7 Steps to reproduce the problem: 1. on HTML element declare `display: grid`, declare `grid-template-columns` and `grid-template-rows` 2. look up this element in web inspector > Styles 3. you have no visualization of the grid What is the expected behavior? We have visualization of the box model. I also would like to see implementation of CSS grid highlighter as it is implemented in Firefox. See attached image. What went wrong? There is no visual reference for CSS grid on the page. Design becomes abstract, and it is difficult to debug. Did this work before? No Chrome version: <Copy from: 'about:version'> Channel: n/a OS Version: OS X 10.11.6 Flash Version:
,
Jun 1 2017
,
Jun 1 2017
,
Aug 14 2017
FF has something like this: https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/
,
Aug 15 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/054863615baeab6db7b49f094b56079252bc0a2f commit 054863615baeab6db7b49f094b56079252bc0a2f Author: Eugene Ostroukhov <eostroukhov@chromium.org> Date: Tue Aug 15 01:54:30 2017 [DevTools] Implement CSS grid highlight Currently this highlight is behind the experiment flag. Bug: 728062 Change-Id: Ic005372520431019d2b9e7f3ffbc3e3f311390ba Reviewed-on: https://chromium-review.googlesource.com/611323 Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Reviewed-by: Andrey Kosyakov <caseq@chromium.org> Cr-Commit-Position: refs/heads/master@{#494300} [add] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/LayoutTests/inspector/elements/highlight/highlight-css-grid-expected.txt [add] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/LayoutTests/inspector/elements/highlight/highlight-css-grid.html [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/inspector/InspectorHighlight.cpp [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/inspector/InspectorHighlight.h [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/inspector/InspectorOverlayAgent.cpp [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/inspector/browser_protocol.json [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/core/layout/LayoutGrid.h [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/devtools/front_end/common/Color.js [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/devtools/front_end/main/Main.js [modify] https://crrev.com/054863615baeab6db7b49f094b56079252bc0a2f/third_party/WebKit/Source/devtools/front_end/sdk/OverlayModel.js
,
Aug 15 2017
,
Aug 16 2017
Is this already shipped? In Chrome Version 60.0.3112.101 I can not find this feature under chrome://flags/
,
Aug 16 2017
It is present in 62.0.3187.0, Canary branch
,
Aug 16 2017
Thanks, works. Will test and provide feedback.
,
Aug 28 2017
,
Sep 1 2017
Thanks so much for this new feature! Works great so far and very useful. Forgive the n00b question: should I provide bug feedback here on this thread or someplace else? Thanks!
,
Sep 1 2017
#12 - the issue tracker is the right place to file issues, bugs and feature requests. Click on the "New issue" button above, though, rather than adding bugs as comments to existing issues. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by phistuck@chromium.org
, May 31 2017Status: Untriaged (was: Unconfirmed)
Summary: Add CSS grid highlighter (was: Implement new feature: CSS grid highlighter)