<commit_before><!--
@license
Copyright 2016 <NAME>, The ARC team

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->

<!--
The `<url-input-editor>` is an element that is responsible for displaying and manipulating an URL
of the request. It contains all logic and views.

The `url-input-editor` element is consistent with regule single line view for URL and a detailed view.
Detailed view is a form with the URL splitted to its parts (host, paramterers, history, hash).
Altrought the history hash is not used in REST services and is used only in clients it's a part of the defailed form to not cause the confusion.

### Usage
    <url-input-editor
      url="{{requestURL}}"
      on-send="_sendAction"></url-input-editor>

-->

<link rel="import" href="../history-context-panel/history-context-panel.html">

<dom-module id="url-input-editor">
  <template>
    <style>
    :host {
      @apply(--layout-vertical);
      position: relative;
    }

    .simple {
      @apply(--layout-horizontal);
      @apply(--layout-center);
    }

    .main-input {
      @apply(--layout-flex);
    }

    .host-input {
      @apply(--layout-flex);
      display: none;
    }

    .path-input {
      @apply(--layout-flex);
    }

    .anchor-input {
      @apply(--layout-flex);
    }

    .simple[opened] .host-input {
      display: initial;
    }

    .simple[opened] .main-input {
      display: none;
    }

    #toggleButton {
      transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      transform: rotateZ(0deg);
    }

    .simple[opened] #toggleButton {
      transform: rotateZ(90deg);
    }

    .detailed {
      display: none;
      padding: 0 40px;
    }

    .detailed[opened] {
      display: initial;
    }

    .form-row {
      @apply(--layout-horizontal);
      @apply(--layout-flex);
    }
    .param-name {
      margin-right: 12px;
    }
    .param-value {
      @apply(--layout-flex);
    }
    .params-list {
      margin: 12px 0;
    }
    .query-title {
      @apply(--paper-font-caption);
      color: #737373;
    }
    paper-autocomplete {
      bottom: 0;
    }
    </style>
    <div class="simple" opened$="{{detailed}}">
      <paper-icon-button id="toggleButton" icon="arc:keyboard-arrow-right" on-tap="toggle"></paper-icon-button>
      <paper-input-container class="main-input" no-label-float auto-validate>
        <input is="iron-input" on-change="_urlChangedNotify" type="url" value="{{url::input}}" placeholder="Request URL" id="masterUrl" pattern="\S*"/>
        <paper-input-error>You may want to encode this value before sending it to the server</paper-input-error>
      </paper-input-container>
      <paper-input label="Host" value="{{hostValue}}" class="host-input" on-input="updateUrl"></paper-input>
      <paper-menu-button horizontal-align="right" id="urlContextMenuButton">
        <paper-icon-button icon="arc:more-vert" class="dropdown-trigger" on-tap="_menuOpened"></paper-icon-button>
        <paper-menu class="dropdown-content" id="urlContextMenu" on-iron-select="_contextMenuAction">
          <paper-item data-action="encParamsAction">Encode URL</paper-item>
          <paper-item data-action="decParamsAction">Decode URL</paper-item>
        </paper-menu>
      </paper-menu-button>
      <history-context-panel target="masterUrl"></history-context-panel>
    </div>
    <div class="detailed" opened$="{{detailed}}" on-input="updateUrl">
      <paper-input label="Path" value="{{pathValue}}" class="path-input" auto-validate pattern="\S*"
        error-message="You may want to encode this value before sending it to the server"></paper-input>

      <div class="params-list">
        <label class="query-title">Query parameters</label>
        <template is="dom-repeat" id="paramsList" items="{{paramsList}}" on-dom-change="_onParamsRender">
          <div class="form-row">
            <paper-input-container class="param-name" no-label-float inline>
              <input is="iron-input" type="text" value="{{item.name::input}}" placeholder="Param name"/>
            </paper-input-container>
            <paper-input-container class="param-value" no-label-float inline auto-validate>
              <input is="iron-input" type="text" value="{{item.value::input}}" placeholder="Param value" pattern="\S*"/>
              <paper-input-error>You may want to encode this value before sending it to the server</paper-input-error>
            </paper-input-container>
            <paper-icon-button icon="arc:close" title="Remove parameter" on-tap="_removeParam"></paper-icon-button>
          </div>
        </template>
        <paper-button raised on-tap="appendEmptyQueryParam">Add</paper-button>
      </div>
      <paper-input label="Hash" value="{{anchorValue}}" class="anchor-input"></paper-input>
    </div>
    <paper-autocomplete vertical-offset="-8" horizontal-offset="24" target="[[masterUrlElement]]" id="autocomplete" loader on-query="_queryUrlHistory" opened="{{suggesionsOpened}}" on-selected="_onSuggestionSelected"></paper-autocomplete>
    <arc-historyurl-model id="model" on-data-ready="_setSuggestions"></arc-historyurl-model>
    <paper-toast text="Entered URL is invalid." id="invalidUrlToast"></paper-toast>
    <iron-meta id="meta"></iron-meta>
  </template>
  <script src="url-input-editor.js"></script>
</dom-module>
<commit_msg>Update: removed contextual history list from the URL editor because of the usability issues<commit_after><!--
@license
Copyright 2016 <NAME>, The ARC team

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->

<!--
The `<url-input-editor>` is an element that is responsible for displaying and manipulating an URL
of the request. It contains all logic and views.

The `url-input-editor` element is consistent with regule single line view for URL and a detailed view.
Detailed view is a form with the URL splitted to its parts (host, paramterers, history, hash).
Altrought the history hash is not used in REST services and is used only in clients it's a part of the defailed form to not cause the confusion.

### Usage
    <url-input-editor
      url="{{requestURL}}"
      on-send="_sendAction"></url-input-editor>

-->

<link rel="import" href="../history-context-panel/history-context-panel.html">

<dom-module id="url-input-editor">
  <template>
    <style>
    :host {
      @apply(--layout-vertical);
      position: relative;
    }

    .simple {
      @apply(--layout-horizontal);
      @apply(--layout-center);
    }

    .main-input {
      @apply(--layout-flex);
    }

    .host-input {
      @apply(--layout-flex);
      display: none;
    }

    .path-input {
      @apply(--layout-flex);
    }

    .anchor-input {
      @apply(--layout-flex);
    }

    .simple[opened] .host-input {
      display: initial;
    }

    .simple[opened] .main-input {
      display: none;
    }

    #toggleButton {
      transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      transform: rotateZ(0deg);
    }

    .simple[opened] #toggleButton {
      transform: rotateZ(90deg);
    }

    .detailed {
      display: none;
      padding: 0 40px;
    }

    .detailed[opened] {
      display: initial;
    }

    .form-row {
      @apply(--layout-horizontal);
      @apply(--layout-flex);
    }
    .param-name {
      margin-right: 12px;
    }
    .param-value {
      @apply(--layout-flex);
    }
    .params-list {
      margin: 12px 0;
    }
    .query-title {
      @apply(--paper-font-caption);
      color: #737373;
    }
    paper-autocomplete {
      bottom: 0;
    }
    </style>
    <div class="simple" opened$="{{detailed}}">
      <paper-icon-button id="toggleButton" icon="arc:keyboard-arrow-right" on-tap="toggle"></paper-icon-button>
      <paper-input-container class="main-input" no-label-float auto-validate>
        <input is="iron-input" on-change="_urlChangedNotify" type="url" value="{{url::input}}" placeholder="Request URL" id="masterUrl" pattern="\S*"/>
        <paper-input-error>You may want to encode this value before sending it to the server</paper-input-error>
      </paper-input-container>
      <paper-input label="Host" value="{{hostValue}}" class="host-input" on-input="updateUrl"></paper-input>
      <paper-menu-button horizontal-align="right" id="urlContextMenuButton">
        <paper-icon-button icon="arc:more-vert" class="dropdown-trigger" on-tap="_menuOpened"></paper-icon-button>
        <paper-menu class="dropdown-content" id="urlContextMenu" on-iron-select="_contextMenuAction">
          <paper-item data-action="encParamsAction">Encode URL</paper-item>
          <paper-item data-action="decParamsAction">Decode URL</paper-item>
        </paper-menu>
      </paper-menu-button>
      <!-- <history-context-panel target="masterUrl"></history-context-panel> -->
    </div>
    <div class="detailed" opened$="{{detailed}}" on-input="updateUrl">
      <paper-input label="Path" value="{{pathValue}}" class="path-input" auto-validate pattern="\S*"
        error-message="You may want to encode this value before sending it to the server"></paper-input>

      <div class="params-list">
        <label class="query-title">Query parameters</label>
        <template is="dom-repeat" id="paramsList" items="{{paramsList}}" on-dom-change="_onParamsRender">
          <div class="form-row">
            <paper-input-container class="param-name" no-label-float inline>
              <input is="iron-input" type="text" value="{{item.name::input}}" placeholder="Param name"/>
            </paper-input-container>
            <paper-input-container class="param-value" no-label-float inline auto-validate>
              <input is="iron-input" type="text" value="{{item.value::input}}" placeholder="Param value" pattern="\S*"/>
              <paper-input-error>You may want to encode this value before sending it to the server</paper-input-error>
            </paper-input-container>
            <paper-icon-button icon="arc:close" title="Remove parameter" on-tap="_removeParam"></paper-icon-button>
          </div>
        </template>
        <paper-button raised on-tap="appendEmptyQueryParam">Add</paper-button>
      </div>
      <paper-input label="Hash" value="{{anchorValue}}" class="anchor-input"></paper-input>
    </div>
    <paper-autocomplete vertical-offset="-8" horizontal-offset="24" target="[[masterUrlElement]]" id="autocomplete" loader on-query="_queryUrlHistory" opened="{{suggesionsOpened}}" on-selected="_onSuggestionSelected"></paper-autocomplete>
    <arc-historyurl-model id="model" on-data-ready="_setSuggestions"></arc-historyurl-model>
    <paper-toast text="Entered URL is invalid." id="invalidUrlToast"></paper-toast>
    <iron-meta id="meta"></iron-meta>
  </template>
  <script src="url-input-editor.js"></script>
</dom-module>

{'fraction_non_alphanumeric': 0.151153813159475, 'fraction_numerical': 0.007034399931371708, 'mean_word_length': 3.1340425531914895, 'pattern_counts': {'":': 0, '<': 148, '<?xml version=': 0, '>': 148, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4621249', 'n_tokens_mistral': 3555, 'n_tokens_neox': 3414, 'n_words': 855}