PROBLEM: Many Polymer Elements have graphical parts or borders with styles that do not match together and this give un aestetically unpleasant result. Not much can be done to customize their appearance, because quite often the graphical style is not configurable. This make real hard to create pages with many differents polymer elements and mantain a consistent visual style for the page.

SOLUTION: Add the possibility to load and apply SVG clipPath masks to page elements. An user must be able to draw a custom clipPath mask in an SVG editor like Inkscape and exporting it as an .svg file. Then the svg fie with the clipPath should be imported or drag&dropped into the Polymer Designer and applied to one or more page elements. This would allow to selectively mask the parts of the polymer elements that do not fit to the intended graphical style or layout of the page. An example of this svg masking technique is described in this excellent article by Sara Soueidan:
http://sarasoueidan.com/blog/css-svg-clipping/

The component grid view shows only one column of components with a lot of white space to the right. I assume that it should show 2 columns of components.

Drag an element onto the canvas and configure its attributes. Then switch to the code view. Then switch back to the designer. There's a good chance you won't see your element anymore. This happens consistently for me in Canary.

I get the following error running bower install:

bower cached        git://github.com/components/highlightjs.git#8.0.0
bower validate      8.0.0 against git://github.com/components/highlightjs.git#*
bower ECMDERR       Failed to execute "git ls-remote --tags --heads git://github.com/Polymer/google-apis.git", exit code of #128

Additional error details:
fatal: remote error: 
  Repository not found.

Seems like google-apis moved to PolymerLabs, but I'm not sure where to update that.

Thanks!

I am running the designer locally,but every time after I view the source codes and back to the canvas nothing is there.It throw me this Exception

Exception caught during observer callback: TypeError: undefined is not a function
    at Polymer.ensureMeta (http://localhost:8000/components/x-meta/x-meta.html/x-meta.js:143:47)
    at Polymer.loadElementImports (http://localhost:8000/elements/design-host/design-host.html/[1962].js:119:22)
    at Polymer.loadHtml (http://localhost:8000/elements/design-host/design-host.html/[1962].js:93:12)
    at Polymer.loadHtml (http://localhost:8000/elements/design-canvas/design-canvas.html/[1636].js:512:21)
    at Polymer.loadHtml (http://localhost:8000/elements/design-frame/design-frame.html/[1808].js:50:19)
    at Polymer.loadHtml (http://localhost:8000/elements/designer-element/designer-element.html/[1072].js:312:19)
    at Polymer.codeToDesign (http://localhost:8000/elements/designer-element/designer-element.html/[1072].js:210:10)
    at Polymer.selectedChanged (http://localhost:8000/elements/designer-element/designer-element.html/[1072].js:155:12)
    at g.invokeMethod (http://localhost:8000/components/polymer/polymer.js:12:13312)
    at g.notifyPropertyChanges (http://localhost:8000/components/polymer/polymer.js:12:11598) platform.js:12

I had a <a href="#"> on a core-item. I happened to click that element in Designer and it actually followed the link and caused this error:

Error: Not Found
The requested URL /tools/designer/components/element/ was not found on this server.

Going back showed an empty view. I went to code view and saw basic boilerplate and thought I'd lost everything. I refreshed, and there's my stuff.

Solution: don't follow links on Designer's live view?

e.g. polymer-ui-breadcrumbs serializes like this:

crumbs="[{" label" ...

The string is not properly escaped.

From Polymer/polymer#542

Scope Mac OS 10.9.3 / Safari

I can't use Save, Share, Launch Preview.
Share && Launch Preview just opens blank tabs.

Saving errors:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (metadata.html, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (metadata.html, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (metadata.html, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (391b62346ab74dc8ca2c, line 0)

When I drag the google maps element onto the basic app scaffold, you can see the outline for the element but the map doesn't display

After run bower install, there is no package named 'paper-calculator' installed in bower_components, and the same in the online version.

The paper elements can not remember their position after drag&drop, may due to the designer failed to load paper-calculator element.

It looks like dropping a child on a container element no longer works. To reproduce, drag out a core-drawer-panel, then drag a google-map into its content area. You'll see in the tree view that google-map is a sibling of core-drawer-panel, not a nested child. I'm seeing this in v0.3.3 and v0.3.4 after a bower cache clean and fresh install

Currently when the designer saves an element, it saves it as a public gist. It would be nice to have an option to save it as 'secret' by default.

I've been messing around with a mobile app that uses the X-Tag deck element to transition between views. It would be really cool to come up with some way to do this inside of the designer.

Interface Builder has a concept similar to this called segues:

I have no idea how we would actually implement this 😄 but right now the tool is limited to single screen apps which is kind of a bummer.

1. Drag out google-maps
2. Drag out UI field
3. Drag out google-maps-search
4. Bind google-maps-search map to google_map.map, query to input.value
5. Bind google_map latitude to google_maps_search.result.latitude
6. Bind google_map longitude to google_maps_search.result.longitude
7. Set google_map zoom to 18
8. Search 'Eiffel Tower' in input field
9. Click anywhere

Expected: Map should show Eiffel Tower
Actual: Nothing happens

Workaround: click on google-map-search in the Elements inspector in the bottom left. This seems to trigger the query to fire and the map updates. Not great for demo'ing though :(

I watched your video on Youtube on introducing designer. When you show the repo there was two empty <input> tags under the project name. Please fill in with descriptions with the link of the online copy of designer. That would be helpful for people to navigate.

Should read
"code-mirror": "PolymerLabs/code-mirror#master" in bower.json

ACE Editor does not show background when switching from code to design (WYSIWYG) view

Browser: Chrome Stable Channel Version Ubuntu 35.0.1916.153

How to reproduce:

1. Navigate browser to http://www.polymer-project.org/tools/designer/
2. Drag and drop an 'ace-element' under PALLETE->Componenets onto the design surface
3. Click on the '< >' button in the toolbar (Toggle Code/Design) to switch to code view
4. Click on the '< >' button in the toolbar (Toggle Code/Design) to switch to design view

At this point, the ace editor should only show text without the default Monokai background. Before/After images are attached below.

Before:

After:

When linking a property to another component's property, it would be useful if after selecting the component to link, if a list of exposed properties on the selected component were available as a dropdown. I'm just getting into webcomponents/polymer, and I don't believe all "available" are required to be exposed, so I image the dropdown would also need to require text entry still.

When the designer is started the components are showing in the grid view. I switch to the list view.

Then I switch from design to code view and back to design view.

Now I get the grid view again, but the list view button is still selected:

I'd expected to still see the components in the list view.

It would be useful if the Polymer designer had a color palette included in the color-picker, as it currently only provides a default full color range.
This is referring to the color-picker that pops up when styling the bg color of UI areas.

The Material page for styling color has a specific set of colors that work nicely, so perhaps it could provide these by default with the option to also pick a custom color if needed:
http://www.google.com/design/spec/style/color.html

Could not change style for element inside another element. E.g. try to set position: absolute for 'core-input' inside 'core-card'. Seem position could be changed only for top level elements. For what reason this restriction is placed?

Drag and drop doesn't work. Can put html in code view that works in design view, but can't add any of the custom elements in the sidebar.

Lost my work using back button. I guess I hadn't saved. Designer should prompt me, perhaps? I found the code in my GitHub gist, pasted that back into code view, but Designer says:

Error: Not Found
The requested URL /tools/designer/components/element/ was not found on this server.

If you pull down the designer and run bower install it doesn't install all of the necessary core-* dependencies.

I generated a key for my Github account, assigned all permissions to it. But when I try to save I get the following error in the console of my browser:

PATCH https://api.github.com/gists/391b62346ab74dc8ca2c?1404111967455 404 (Not Found)

Just used the http://www.polymer-project.org/tools/designer/ with a new my-element

1. drag & drop a new component to the drawing area
2. made a change in the properties
3. clicked save
4. hit refresh

Result: my change was saved and is still there after the refresh

a. drag & drop a new component to the drawing area
b. switch to code view
c. make some changes
d. clicked save
e. hit refresh and switched again to code view

Result: my changes from c. are gone
Expected result: still see my changes

Leave it as I left it?

I think the Sandbox app supported code folding so you could hide the big <style> blocks. They fill up with cruft pretty quickly and that can be really distracting during a demo

The version of Polymer Designer shown at IO demoed a validate property on the paper-input tag, we downloaded the github repo here and made sure it was up to date but the validate property is not shown for the paper-input tag. Any ideas why they are different? TIA.

1. Drag out google-maps element
2. Drag out UI field
3. Drag out second UI field
4. Drag out google-maps-directions
5. Bind google-maps-directions map to google-maps.map, startAddress to input.value, endAddress to input1.value
6. Type 'San Francisco' into input
7. Type 'Sunnyvale, California' into input1
8. Click anywhere on the screen

Expected: A route should appear between SF and Sunnyvale
Actual: Nothing happens

It would be great if I could zoom out from the canvas a bit to fit more elements on screen, or at least have the ability to pan around. I have an app which is ~960px across and that doesn't fit well in the current confines

When installing (I'm making a docker file for this), the bower install says

Unable to find a suitable version for x-meta, please choose one:
1) x-meta#master which resolved to 80428dae20 and is required by designer, more-elements#81ed559392, x-inspector#6d4163409e, x-palette#8950c724ad
2) x-meta#>=0.3.0 <1.0.0 which resolved to 0.3.0 and is required by x-palette#0.3.0

So - 2 questions, first, what's the best answer? Second, can the json be modified to be explicit there?

First off, thank you for all of your amazing work! Polymer is wonderful and will change the world of web development.

Secondly, the main use case I have for using the Designer tool would be to build my own components from scratch and import them into the Designer (like was shown in the Salesforce example at Google I/O); however, there does not seem to be an option to do this currently that I can see unless you fork the code and host your own instance of Designer? Is there a way to add your own components to the official designer app so that we don't have to host our own version of the app and worry about it staying in snyc with the official version?

The "Saving" message persists at the top of the screen because the API returns a 404. The user does not have permission to overwrite the gist.

It might be good to detect this case and allow users to create a new gist under their own account.

One use case for this is the homepage, where we'd like to link off to a scaffolded app in designer. Users should be able to tweak it and save their modified version.

cc @robdodson

Uncaught TypeError: Converting circular structure to JSON in designer-host.html:161

The content to reproduce is this: https://gist.github.com/khaliy/572bc947053c0115541f
I cannot open the preview.
Browser: Chore 36.0.1985.125 m

Hi all,

I got the recent repository, got it up and running and if I start it with http-server I do get a canvas.
Lower left displays my-element (why?), and I cannot get rid of that thing I delete it in code view, switch back to designer and it is displayed again (not on the working area, which is blank).

The strange thing is, that I cannot drag ANY component on my canvas. I see the new element (e.g. Polymer-ui-Toolbar) as long as I drag it, but if I release the mouse button the element is gone, no dialog pops up, etc.

What am I doing wrong?

Thanks for your help.
Andreas

Related to #1, if I switch to the code view and add some custom HTML, then switch back to design view, sometimes my element renders, other times I see a blank canvas and when I switch back to code view my HTML is gone.

Currently we strip out the HTMLImports in the code view and re-generate them from the designed elements. This is done to simplify the management of html imports for elements used in the designer. In order to preserve user imports, we need to either make imports handling more sophisticated or perhaps mark a section in the code output as designer-generated.

Please add a better SVG support.... maybe with the Snap.svg library ( http://snapsvg.io ).
It will be useful to be able to include those SVG animated buttons:
http://tympanus.net/Development/AnimatedSVGIcons/

When I run bower install i got an error in terminal stating

bower core-tests#master EMALFORMED Failed to read C:\Users\Dan\AppData\Local\Temp\PC-Dan\bower\core-tests-7680-WFvcoA\bower.json

Additional error details:
Unexpected token }

Steps to reproduce:

1. Load the designer
2. Drag any element onto the grid-canvas
3. Click the "TREE" tab

Expected: The item that was dragged on the canvas should be listed in the tree panel.
Actual: The tree panel contents appear blank.

When I inspect the panel, I can see that the newly-dragged item is in the dom:

    <div id="tree">
      <template repeat="{{components}}"></template>
        <div class="selected" on-tap="{{ selectAction }}" style="padding-left: 4px">
          <span>my-element<id></id>
            <span id="caption"></span>
          </span>
        </div>
    </div>

The only errors in my console when I inspect source is this (3 times):

GET http://www.polymer-project.org/tools/designer/components/core-firebase/metadata.html 404 (Not Found) 
Loader.js:171

Screenshot:

Just started looking at Polymer and I don't know how to Start a local server. Would be nice if the readme had instructions.

I just installed the designer - so I assume all components are uptodate.

I drag & drop a component to the designer e.g. the "Polymer Core Field" and try to switch to the code view. In the console I get the Exception below, and in the code view I don't see the added component. When switching back to design view the component is not showing any longer.

Exception caught during observer callback: Error: Assertion failed
at c (http://localhost:49321/components/platform/platform.js:12:20940)
at b (http://localhost:49321/components/platform/platform.js:13:7392)
at b.Platform.flags.shadow.F.insertBefore (http://localhost:49321/components/platform/platform.js:13:10931)
at b.Platform.flags.shadow.F.appendChild (http://localhost:49321/components/platform/platform.js:13:10882)
at Polymer.dumpImports (data:text/javascript;base64,CiAgKGZ1bmN0aW9uKCkgewoKICAgIFBvbHltZXIoJ3gtZG9…WFsaXplci94LWRvbS1zZXJpYWxpemVyLmh0bWwveC1kb20tc2VyaWFsaXplci5qcwo=:107:15)
at Polymer.dumpElement (data:text/javascript;base64,CiAgKGZ1bmN0aW9uKCkgewoKICAgIFBvbHltZXIoJ3gtZG9…aWFsaXplci94LWRvbS1zZXJpYWxpemVyLmh0bWwveC1kb20tc2VyaWFsaXplci5qcwo=:14:23)
at html (data:text/javascript;base64,CgogIFBvbHltZXIoJ2Rlc2lnbmVyLWVsZW1lbnQnLCB7CiA…WVsZW1lbnQvZGVzaWduZXItZWxlbWVudC5odG1sL2Rlc2lnbmVyLWVsZW1lbnQuanMK:135:32)
at Polymer.designToCode (data:text/javascript;base64,CgogIFBvbHltZXIoJ2Rlc2lnbmVyLWVsZW1lbnQnLCB7CiA…WVsZW1lbnQvZGVzaWduZXItZWxlbWVudC5odG1sL2Rlc2lnbmVyLWVsZW1lbnQuanMK:143:39)
at Polymer.selectedChanged (data:text/javascript;base64,CgogIFBvbHltZXIoJ2Rlc2lnbmVyLWVsZW1lbnQnLCB7CiA…WVsZW1lbnQvZGVzaWduZXItZWxlbWVudC5odG1sL2Rlc2lnbmVyLWVsZW1lbnQuanMK:104:14)
at e.invokeMethod (http://localhost:49321/components/polymer/polymer.js:12:9662)

I'd like to try binding the speech-mic element to google-map-search but I'm not sure how to connect google-map-search to google-map without an exposed map attribute.

Loading up designer in FF and Safari, everything shows up ok but the Palette is empty. Didn't see any errors in Safari's console. FF's console outputs TypeError: e.scrollIntoViewIfNeeded is not a function

When i switch to code view and write something like this:

<template repeat="{{m in markers}}">
  <google-map-marker latitude="{{m.latitude}}" longitude="{{m.longitude}}"></google-map-marker>
</template>

and then switch to design mode and back, the <google-map-marker> is gone, basically everything in the <template> tag, no matter what markup i put there

i tried this on Chrome 35 on the polymer-project website and in Canary (38) running locally

When you switch to code view it's not obvious how to get back to design view. Previously you would click the eye button but that's been removed. Maybe the code view button should toggle to an eye button, instead of entering a depressed state.

Many times when I try to load the designer up in Canary I see nothing in the sidebars and get this error in the console:

Uncaught TypeError: Cannot read property 'selected' of undefined localhost:3000/:159

It seems to fail on this line in index.html:

designChange: function(event) {
  this.$.inspector.sourceElement = this.designer.selected;  // <-- :(
  ...
},

Expanding a sidebar item on Canary causes the text to overlap

As a polymer-designer user
In order to easily identify the elements that I have created and saved to gists
I would like to be able to assign a name to the gist when I save my element for the first time