New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 639095 link

Starred by 2 users
Status: Fixed
Owner:
█ lushnikov@chromium.org
Last visit 29 days ago
Closed: Dec 2017
Cc:
█ flandy@google.com
█ chowse@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , All
Pri: 2
Type: Feature



Sign in to add a comment

Add CSS shadow editor for box-shadow and text-shadow

Project Member Reported by flandy@google.com, Aug 18 2016 
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce the problem:
1. Open DevTools Styles Sidebar Pane.
2. Attempt to edit a box-shadow or text-shadow property.
3. No special editor is available.

What is the expected behavior?
A shadow editor, similar to the bezier editor and color picker, would be useful. Box shadows can be difficult to write by hand, so having an embedded property editor would simplify web developers' lives.

What went wrong?
No shadow editor exists.

Did this work before? No 

Chrome version: 52.0.2743.116  Channel: n/a
OS Version: 
Flash Version: Shockwave Flash 22.0 r0

Comment 1 by lushnikov@chromium.org, Aug 18 2016

Cc: flandy@google.com
Components: -Platform>DevTools Platform>DevTools>Editing
Labels: -Type-Bug OS-All Type-Feature
Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)
Project Member

Comment 2 by sheriffbot@chromium.org, Aug 19 2016

Labels: Hotlist-Google
Project Member

Comment 4 by bugdroid1@chromium.org, Aug 24 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ea253f5b0f251a0942a6cd181559a1ce0683fc75

commit ea253f5b0f251a0942a6cd181559a1ce0683fc75
Author: flandy <flandy@google.com>
Date: Wed Aug 24 01:30:36 2016

DevTools: Add shadow-editor swatch/icon before box-shadows and text-shadows

This is the first step for the shadow editor and is hidden under an experiment.

BUG= 639095 

Review-Url: https://codereview.chromium.org/2230183004
Cr-Commit-Position: refs/heads/master@{#413927}

[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/devtools.gypi
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/Images/smallIcons.png
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/Images/smallIcons_2x.png
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/Images/src/smallIcons.svg
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/main/Main.js
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
[add] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/ui/cssShadowSwatch.css
[modify] https://crrev.com/ea253f5b0f251a0942a6cd181559a1ce0683fc75/third_party/WebKit/Source/devtools/front_end/ui/module.json

Comment 5 by flandy@google.com, Aug 24 2016 

Here is a first look at the editor.
box-shadow-editor.png
26.0 KB View Download
text-shadow-editor.png
22.5 KB View Download
Project Member

Comment 7 by bugdroid1@chromium.org, Aug 25 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/325c00a303eb2074a76f861cb84787bb37e6e5dd

commit 325c00a303eb2074a76f861cb84787bb37e6e5dd
Author: flandy <flandy@google.com>
Date: Thu Aug 25 23:07:47 2016

DevTools: Box-shadow editor initial implementation

This is dependent on the model in https://codereview.chromium.org/2230183004/
and will be changed accordingly.

BUG= 639095 

Review-Url: https://codereview.chromium.org/2252913002
Cr-Commit-Position: refs/heads/master@{#414575}

[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/devtools.gypi
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/common/CSSShadowModel.js
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
[add] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/CSSShadowEditor.js
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
[add] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/cssShadowEditor.css
[modify] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/module.json
[add] https://crrev.com/325c00a303eb2074a76f861cb84787bb37e6e5dd/third_party/WebKit/Source/devtools/front_end/ui/slider.css

Comment 8 by flandy@google.com, Aug 29 2016 

Here is a look at the editor with a 2D slider for offset.
box-shadow-editor-2D-slider.png
30.0 KB View Download
text-shadow-editor-2D-slider.png
25.8 KB View Download

Comment 9 by dgozman@chromium.org, Aug 29 2016

Cc: chowse@chromium.org
+Chris for UX design.

Comment 10 by chowse@chromium.org, Aug 29 2016 

UX specs here:
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20DevTools/Shadow%20Editor/Specs#

@flandy: What'd be the easiest way to get hands-on with the latest UI? Visually, it's looking pretty solid. Just need to review the interaction.

Comment 11 by flandy@google.com, Aug 29 2016 

@chowse: The easiest way would be to stop by my desk when possible. Otherwise you'd have to apply the patch from https://codereview.chromium.org/2292583002 to tip of tree.

Comment 13 by lushnikov@chromium.org, Aug 31 2016

Labels: allpublic

Comment 15 by flandy@google.com, Sep 6 2016 

Here is the proposed stoke color change from https://codereview.chromium.org/2305983002/.
oldColorsDefaultTheme.png
13.0 KB View Download
oldColorsDarkTheme.png
13.0 KB View Download
newColorsDefaultTheme.png
12.8 KB View Download
newColorsDarkTheme.png
13.2 KB View Download

Comment 16 by chowse@chromium.org, Sep 6 2016 

It looks like there are 2 different shades of blue being used here. I'd use the blue of the 2D slider (the lighter one) for all the controls.

Comment 17 by flandy@google.com, Sep 7 2016 

Thanks Chris. Here's an updated version. Looks the same as before with default theme.
newColorsDarkTheme2.png
13.6 KB View Download

Comment 18 by flandy@google.com, Sep 7 2016 

Here is how the new shadow swatch icon looks:
newShadowSwatchIcon.png
14.0 KB View Download

Comment 23 by flandy@google.com, Sep 9 2016 

Here are the proposed buttons to "Add box-shadow" and "Add text-shadow."
addShadowToolbarButtons.png
27.6 KB View Download

Comment 24 Deleted

Comment 25 by flandy@google.com, Sep 10 2016 

Here is the version with the black box Inkscape issue resolved.
addShadowWhiteBox.png
45.9 KB View Download
Project Member

Comment 26 by bugdroid1@chromium.org, Sep 15 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/390740329c93bc376ee8aa7395af8ef3591d8322

commit 390740329c93bc376ee8aa7395af8ef3591d8322
Author: flandy <flandy@google.com>
Date: Thu Sep 15 02:15:57 2016

DevTools: Add buttons to add box-shadow and text-shadow properties in SSP

These buttons will appear in same toolbar as "Add background-color" and
"Add color."

BUG= 639095 

Review-Url: https://codereview.chromium.org/2324313002
Cr-Commit-Position: refs/heads/master@{#418759}

[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/Images/src/toolbarButtonGlyphs.svg
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs.png
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs_2x.png
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
[modify] https://crrev.com/390740329c93bc376ee8aa7395af8ef3591d8322/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

Comment 27 by paulir...@chromium.org, Sep 29 2016

Components: Platform>DevTools>Authoring

Comment 28 by paulir...@chromium.org, Sep 29 2016

Components: Platform>DevTools

Comment 29 by lushnikov@chromium.org, Dec 5 2017

Status: Fixed (was: Assigned)
►

Sign in to add a comment